4
在 Leaflet 地图上画线
source link: https://www.itwork.club/2020/08/20/draw-on-leaflet-map/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在 Leaflet 地图上画线
Aug 20, 2020web167点击
如何在 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/
版权声明: 转载请注明出处
体验小程序「简易记账」
关注公众号「特想学英语」
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK