L.polyline() 添加点击事件

).(

已于 2023-05-29 10:27:45 修改

阅读量920

点赞数 1

分类专栏： leaflet 文章标签： javascript

于 2023-05-29 10:27:02 首次发布

本文链接：https://blog.csdn.net/weixin_43493113/article/details/130922552

版权

leaflet 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何处理Leaflet地图中根据接口返回的坐标数据用L.polyline画线，并为每段线添加点击事件。由于接口返回的数据可能包含不连续的线段坐标，因此采用逐段绘制的方法避免将不同线段连接成连续线。通过遍历坐标，转换经纬度并创建polyline，同时添加点击监听器来实现点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Leaflet地图 L.polyline() 添加点击事件

最近开发要求根据后端返回一组坐标（线）展示在地图上，然后又要给渲染的线路添加点击事件。找了很多资料，然后整理如下，会结合代码进行说明。

根据接口返回的数据画线：使用 L.polyline() ：

这里接口返回的数据（this.construLine），无论是字段还是坐标都不是前端想要的，
本来打算把所有的坐标处理后放到一个数组里面进行展示。但是最后画出来的线段不太理想，
例如返回的线段坐标如果是不连续的，那么这种方法就会出现问题
（这种方法会把所有的线段连城一段连续的线段），所以就弃用了。
想到了这种一段一段画上去的办法。


this.construLine.map(item => {
   showBioshiLine(item.geo.coordinates, item)
})


function showBioshiLine(coordinates, info) {
   let linesTow = [];
   //这里线段的经纬度需要转换
    coordinates.map(item => { linesTow.push([item[1], item[0]]) })
    //这里的 .on('click',(e)=>{  )  就是 L.polyline 的点击事件
    L.polyline(linesTow, { color: 'red', weight: 10, opacity: 0.8, clickTolerance: 0})
    .on('click', (e) => {
     	console.log(e)
     }
    }).addTo(_self.startLayerGroup);
}