npm install leaflet
npm install leaflet.pm

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 引入Leaflet對象 掛載到Vue上，便于全局使用，也可以單獨頁面中單獨引用
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";

Vue.config.productionTip = false;
Vue.L = Vue.prototype.$L = L;

/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

this.map = L.map("map", {
	  center: [40.02404009136253, 116.50641060224784], // 地圖中心
	  zoom: 14, //縮放比列
	  zoomControl: false, //禁用 + - 按鈕
	  doubleClickZoom: false, // 禁用雙擊放大
	  attributionControl: false, // 移除右下角leaflet標(biāo)識
});

let gaoDeLayer = L.tileLayer(
  "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
)
gaoDeLayer.addTo(this.map);

// 添加地圖點擊彈窗
this.map.on('click', (e) => {
   L.popup().setLatLng(e.latlng)
     .setContent("You clicked the map at " + e.latlng.toString())
     .openOn(this.map);
 });

this.map.pm.addControls({
	  position: "topleft",
	  drawPolygon: true, // 繪制多邊形
	  drawMarker: false, //繪制標(biāo)記點
	  drawCircleMarker: false, //繪制圓形標(biāo)記
	  drawPolyline: false, //繪制線條
	  drawRectangle: true,	//繪制矩形
	  drawCircle: false, //繪制圓圈
	  editMode: true, //編輯多邊形
	  dragMode: true, //拖動多邊形
	  cutPolygon: true, // 添加一個按鈕以刪除多邊形里面的部分內(nèi)容
	  removalMode: true  // 清除多邊形
});

// 控制繪制樣式  如下給Polygon多邊形設(shè)置樣式
var options = {
  // 連接線  標(biāo)記之間的線
  templineStyle: {
    color: 'red',
  },
  // 提示線  從最后一個標(biāo)記到鼠標(biāo)光標(biāo)的線
  hintlineStyle: {
    color: 'red',
    dashArray: [5, 5],
  },
  // 繪制完成的樣式
  pathOptions: {
    color: 'orange',
    fillColor: 'green',
  },
};
// 會激活繪制多邊形功能
this.map.pm.enableDraw('Polygon', options);

this.map.pm.setPathOptions({
  color: 'orange',
  fillColor: 'green',
  fillOpacity: 0.4,
});

//設(shè)置語言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
this.map.pm.setLang('zh');  

// 啟用繪制多邊形功能
map.pm.enableDraw('Polygon', {
  snappable: true,//啟用捕捉到其他繪制圖形的頂點
  snapDistance: 20,//頂點捕捉距離
});
 
// 關(guān)閉繪制  注意也可以關(guān)閉其他模式的繪制功能
map.pm.disableDraw('Polygon');

<template>
  <div class="home">
    <button @click="drawRectangle">繪制矩形</button>
    <button @click="drawCircle">繪制圓</button>
    <button @click="disableDraw">關(guān)閉繪制</button>

    <div id="map"></div>
  </div>
</template>

drawRectangle () {
  this.map.pm.enableDraw('Rectangle', {
    snappable: true,
    snapDistance: 20,
  });
},
drawCircle () {
  this.map.pm.enableDraw('Circle', {
    snappable: true,
    snapDistance: 20,
  });
},
disableDraw () {
  this.map.pm.disableDraw('Rectangle');
},

//pm:drawstart 開始第一個點的時候調(diào)用
//pm:drawend  禁止繪制時調(diào)用
//pm:create  圖形創(chuàng)建完成時調(diào)用
this.map.on("pm:drawstart", e => {
  console.log(e, "first");
});
this.map.on("pm:drawend", e => {
  console.log(e, "禁止繪制");
});
this.map.on("pm:create", e => {
  console.log(e, "繪制完成時調(diào)用");
  if (e.shape == "Circle") {
    console.log(e.layer._latlng, e.layer._radius, "繪制坐標(biāo)")
  } else {
    console.log(e.layer._latlngs[0], "繪制坐標(biāo)")
  }
});

      // 繪制多邊形
      let latlngs = [
        [50.0214690112063, 116.50239229202272],
        [50.019694293123855, 116.50224208831787],
        [50.01979288978388, 116.50580406188966],
        [50.021436146476105, 116.50601863861085],
        [50.02253710631967, 116.50316476821901]
      ];
      // color：線段顏色
      // weight：線段寬度
      // opacity：線段透明度
      // dashArray：虛線間隔
      // fill：是否填充內(nèi)部(true/false)
      // fillColor:內(nèi)部填充顏色，如不設(shè)置，默認(rèn)為color顏色
      // fillOpacity：內(nèi)部填充透明度
      this.myPolygon = L.polygon(latlngs, { color: "red" }).addTo(this.map);
      // 調(diào)整地圖視圖中心點為多邊形中心點
      this.map.setView(this.myPolygon.getCenter(), 16)

<button @click="enableEdit">編輯</button>
<button @click="disableEdit">關(guān)閉編輯</button>

// 編輯
enableEdit () {
  let layer = this.myPolygon
  // 添加可編輯功能
  layer.pm.enable({
    allowSelfIntersection: false,
  });
  
  // 監(jiān)聽編輯事件
  layer.on('pm:vertexadded', e => {
    console.log(e, "添加頂點")
  });
  layer.on('pm:edit', e => {
    console.log(e, "拖動");
    console.log(e.target._latlngs[0], "拖動后的坐標(biāo)")
  });
},

// 關(guān)閉編輯
disableEdit () {
  let layer = this.myPolygon
  layer.pm.disable()
}

// 開啟全體編輯
this.map.pm.enableGlobalEditMode();
// 禁用全局編輯
this.map.pm.disableGlobalEditMode()
// 全局編輯切換
this.map.pm.toggleGlobalEditMode();
// 判斷是否全局編輯,有返回值
let isEdit = this.map.pm.globalEditEnabled();

// 全局拖拽模式切換
this.map.pm.toggleGlobalDragMode();
// 是否啟用全局拖動模式,有返回值
console.log(this.map.pm.globalDragModeEnabled())

// 全局的拖拽模式切換監(jiān)聽器
this.map.on('pm:globaldragmodetoggled', e => {
  console.log(e);
});
// 單個元素添加拖拽監(jiān)聽
let layer = this.myPolygon
layer.on('pm:dragend', e => {
  console.log(e, "拖拽")
});

map.pm.toggleGlobalRemovalMode();
map.pm.globalRemovalEnabled()

<button @click="enableCut">啟用剪輯</button>
<button @click="disableCut">關(guān)閉剪輯</button>

enableCut () {
  // 開啟剪切功能
  this.map.pm.Draw.Cut.enable({
    allowSelfIntersection: false,
  });
  // 單個元素添加剪切監(jiān)聽
  let layer = this.myPolygon
  layer.on('pm:cut', e => {
    console.log(e, "剪切")
  });
},
disableCut () {
  // 關(guān)閉剪切功能
  this.map.pm.Draw.Cut.disable();
}