乐于分享
好东西不私藏

Leaflet | draw 绘图插件

Leaflet | draw 绘图插件
Leaflet.draw 是一个矢量图形绘制和编辑控件,有图标和文字提示,交互友好,支持绘制折线、多边形、矩形、圆形、标注和圆形标注。
已关注
关注
重播 分享 赞
插件下载地址:
https://github.com/Leaflet/Leaflet.draw/releases/tag/v0.4.14
在页面引入 JS 和 CSS 文件(确保已先引入 Leaflet 的 JS 和 CSS)。
<linkrel="stylesheet"href="leaflet/leaflet.css" /><scriptsrc="leaflet/leaflet.js"></script><linkrel="stylesheet"href="Leaflet.draw-0.4.14/dist/leaflet.draw.css" /><scriptsrc="Leaflet.draw-0.4.14/dist/leaflet.draw.js"></script>
插件使用方法:
var map = L.map('map', {  center: [51.505, -0.09],  zoom: 11});// 创建一个要素组图层用于保存绘制的几何要素var editableLayers = new L.FeatureGroup();map.addLayer(editableLayers);// 定义绘图控件属性var drawControl = new L.Control.Draw({  edit: { //编辑工具栏    featureGroup: editableLayers, //必须指定编辑的图层  },});// 将绘图控件添加到地图容器map.addControl(drawControl);// 将绘制的几何要素添加到 editableLayers 图层中map.on(L.Draw.Event.CREATED, function (event) {  var layer = event.layer;  editableLayers.addLayer(layer);  getSaveGeoJSON();});// 将 editableLayers 图层的几何要素输出为 GeoJSON 数据function getSaveGeoJSON() {  var saveGeoJSON = editableLayers.toGeoJSON();  console.log(saveGeoJSON)}

注意:编辑和删除操作后需点击“Save”按钮才能保存操作效果。

相关学习资料