Leaflet使用PM实现编辑面，线同理

源代码地址Leaflet: https://gitee.com/SunBear/Leaflet效果如图vue中安装引入leaflet组件及相关插件npm i leafletnpm i leaflet.pm// vue中引入import * as L from leaflet;import leaflet/dist/leaflet.css;import leaflet.pm;import leaflet.pm/dist/leaflet.pm.css;完整html代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 link hrefassets/css/map.css relstylesheet link hrefassets/css/leaflet.css relstylesheet link hrefassets/css/leaflet.pm.css relstylesheet titleleaflet插件/title /head body div idmap/div div classbtns styletext-align: center;margin-top: 20px; button onclickedit()编辑面/button button onclickcomplete()完成编辑/button /div script srcassets/js/leaflet.js/script script srcassets/js/leaflet.pm.min.js/script script let map L.map(map, { zoom: 12, maxZoom: 18, center: [34.269701076858354, 108.94729614257814], }); L.tileLayer( http://{s}.tile.osm.org/{z}/{x}/{y}.png ).addTo(map); const path [{ lat: 34.294948419549335, lng: 108.93940546535963 }, { lat: 34.239905136147776, lng: 108.98607923668818 }, { lat: 34.22684835281174, lng: 108.92018685363611 }, { lat: 34.264310212432044, lng: 108.87282670331743 }, { lat: 34.296933843873816, lng: 108.88758385160514 }] const polygon L.polygon(path, { weight: 2, color: rgb(53, 146, 241), fillColor: rgb(53, 146, 241), opacity: 0.8, fillOpacity: 0.4, }); polygon.addTo(map) // 编辑面 function edit(){ polygon.pm.enable(); polygon.on(pm:edit, e { const { target } e; const latlng target.getLatLngs()[0]; console.log(编辑后的坐标列表,latlng) }); } // 完成编辑 function complete(){ polygon.pm.disable() } /script /body /html相关api参考https://github.com/themre/leaflet.pm