如何在 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
| var editableLayers = new window.L.FeatureGroup(); map.addLayer(editableLayers);
var drawPluginOptions = { position: 'topright', draw: { polyline: { shapeOptions: { color: '#f357a1', weight: 2 } }, circle: false, polygon: false, rectangle: false, marker: false, circlemarker: false }, edit: { featureGroup: editableLayers, remove: false, edit: false } }
var drawControl = new window.L.Control.Draw(drawPluginOptions) this.map.addControl(drawControl)
this.map.on('draw:created', function(e) { const layer = e.layer const latlngs = layer._latlngs console.log('points:', latlngs) editableLayers.addLayer(layer) })
|
在jsfiddle
有一个代码示例参考
关于导出数据还可以参考代码