源代码地址：Leaflet: https://gitee.com/SunBear/Leaflet
效果如图：
vue中安装引入leaflet组件及相关插件：
npm i leaflet
npm 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 lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/map.css" rel="stylesheet"> <link href="assets/css/leaflet.css" rel="stylesheet"> <link href="assets/css/leaflet.pm.css" rel="stylesheet"> <title>leaflet插件</title> </head> <body> <div id="map"></div> <div class="btns" style="text-align: center;margin-top: 20px;"> <button onclick="edit()">编辑面</button> <button onclick="complete()">完成编辑</button> </div> <script src="assets/js/leaflet.js"></script> <script src="assets/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
