在 Leaflet 地图上画线

如何在 leaflet 生成的地图上画线?


有一个叫 leaflet.draw 的插件,我们可以利用它在地图上画线


引入资源文件

首先引入对应的资源文件

leaflet.draw.css
leaflet.draw.js


编写代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 初始化 featureGroup 用来放 editable layers
var editableLayers = new window.L.FeatureGroup();
map.addLayer(editableLayers);

// 插件的配置项。我这里只需要画折线,所以把其它几个开关都设为 false
var drawPluginOptions = {
position: 'topright',
draw: {
polyline: {
shapeOptions: {
color: '#f357a1',
weight: 2
}
},
circle: false,
polygon: false,
rectangle: false,
marker: false,
circlemarker: false
},
edit: {
featureGroup: editableLayers, // REQUIRED!!
remove: false,
edit: false // 不显示 edit 图标
}
}

// 利用上面的配置项初始化一个插件控制器
var drawControl = new window.L.Control.Draw(drawPluginOptions)
this.map.addControl(drawControl)

// 监听用户画完一个形状,把 layer 添加到地图
this.map.on('draw:created', function(e) {
const layer = e.layer
const latlngs = layer._latlngs
console.log('points:', latlngs) // 可以在这里得到画线所包含的坐标点
editableLayers.addLayer(layer)
})

jsfiddle有一个代码示例参考

关于导出数据还可以参考代码

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2020/08/20/draw-on-leaflet-map/

版权声明: 转载请注明出处

为您推荐

体验小程序「跟我记账」

关注公众号「特想学英语」

为 Shopify 产品页补充结构化数据