npm install leaflet.pm
npm install leaflet

import 'leaflet/dist/leaflet.css'
// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
import * as L from 'leaflet'
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'),
})

 map = L.map('map',{
      center: [40.02404009136253, 116.50641060224784], // 地图中心
      zoom: 14,   //缩放比列
      zoomControl: false, //禁用 + - 按钮
      doubleClickZoom: false,  // 禁用双击放大
      attributionControl: false  // 移除右下角leaflet标识
    });

 L.tileLayer(
    "http://mt0.google.cn/vt/lyrs=y@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga",
  ).addTo(this.map);

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

<script>
export default {
  data() {
    return {
        map: ""
    };
  },
  mounted() {
    this.initDate();
  },
  methods: {
    initDate() {
      this.map = L.map("map", {
        center: [40.02404009136253, 116.50641060224784], // 地图中心
        zoom: 14, //缩放比列
        zoomControl: false, //禁用 + - 按钮
        doubleClickZoom: false, // 禁用双击放大
        attributionControl: false // 移除右下角leaflet标识
      });
      let name = L.tileLayer(
        "http://mt0.google.cn/vt/lyrs=y@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga",
      ).addTo(this.map);
    //   this.map.removeLayer(name)  // 移除图层
    }
  }
};
</script>

<style lang="stylus" scoped>
#map {
  width: 100%;
  height: calc(100vh);
  z-index: 1;
}
</style>

 this.map.pm.addControls({
    position: "topleft",
    drawPolygon: false, // 添加绘制多边形
    drawMarker: false, //添加按钮以绘制标记
    drawCircleMarker: false, //添加按钮以绘制圆形标记
    drawPolyline: false, //添加按钮绘制线条
    drawRectangle:	true,	//添加按钮绘制矩形
    drawCircle: false, //  添加按钮绘制圆圈
    editMode: true, //  添加按钮编辑多边形
    dragMode: true, //   添加按钮拖动多边形
    cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
    removalMode: true  // 清除图层
  });
 // 设置绘制后的线条颜色等
this.map.pm.setPathOptions({
    color: "orange",
    fillColor: "green",
    fillOpacity: 0.4
});
this.map.pm.setLang('zh');  //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl

<!----template>
<template>
  <div>
    <button class="draw" @click="draw()">绘制</button>
    <button class="disDraw" @click="disDraw()">关闭绘制</button>
    <div id="map"></div>
  </div>
</template>

<!----js>
draw() {
  this.map.pm.enableDraw("Polygon", { 
      snappable: false,
   });
  //   this.map.pm.enableDraw("Marker", { snappable: false });
  //   this.map.pm.enableDraw("CircleMarker", { snappable: false });
},
disDraw() {
  this.map.pm.disableDraw("Polygon");
  //    this.map.pm.disableDraw('Marker');
  //    this.map.pm.disableDraw('CircleMarker');
}

<!----style>
.draw {
  display: flex;
  z-index: 2;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 50px;
  justify-content: center;
  align-items: center;
}

.disDraw {
  display: flex;
  z-index: 2;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 200px;
  justify-content: center;
  align-items: center;
}

getlatLngs() {
  //pm:drawstart 开始第一个点的时候调用
  //pm:drawend  禁止绘制时调用
  //pm:create  创建完成时调用
  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, "绘制完成时调用");
    console.log(e.layer._latlngs[0], "绘制坐标")
  });
},

layer.pm.enable({
    allowSelfIntersection: false, 
    preventMarkerRemoval: false,  // 禁止右键删除点
});

layer.on('pm:edit', e => {
    console.log(e, "拖动");
    console.log(e.target._latlngs[0], "拖动后的坐标")
});
layer.on('pm:edit', e => {
    console.log(e, "拖动");
    console.log(e.target._latlngs[0], "拖动后的坐标")
});
layer.on('pm:vertexadded', e =>{
    console.log(e, "添加顶点")
});

 // 开启全体编辑按钮
map.pm.toggleGlobalEditMode();

// 禁用全局编辑按钮
map.pm.disableGlobalEditMode()


// 全局编辑切换
map.pm.toggleGlobalEditMode()

// 判断是否全局编辑,有返回值
map.pm.globalEditEnabled()

map.pm.toggleGlobalDragMode()
// 是否启用全局拖动模式
alert(map.pm.globalDragModeEnabled())

map.pm.toggleGlobalRemovalMode();

//开启
map.pm.Draw.Cut.enable({
    allowSelfIntersection: false
});

// 关闭
map.pm.Draw.Cut.disable()

// 切换
map.pm.Draw.Cut.toggle();

// 监听切割事件
layer.on("pm:cut", e =>{
     console.log(e, "切割");
})

let latlngs = [
        [40.0214690112063, 116.50239229202272],
        [40.019694293123855, 116.50224208831787],
        [40.01979288978388, 116.50580406188966],
        [40.021436146476105, 116.50601863861085],
        [40.02253710631967, 116.50316476821901]
      ];
 this.drawObj = L.polygon(latlngs, { color: "red" }).addTo(this.map);
 this.drawObj.bindTooltip('this is 个多边形');
// color：线段颜色
// weight：线段宽度
// opacity：线段透明度
// dashArray：虚线间隔
// fill：是否填充内部(true/false)
// fillColor:内部填充颜色，如不设置，默认为color颜色
// fillOpacity：内部填充透明度
 this.drawRadius = L.circle([40.0224690112063, 116.51339229202272], {
        radius: 200
      }).addTo(this.map);

this.drawObj.pm.enable({
    allowSelfIntersection: false
});
this.drawRadius.pm.enable({
    allowSelfIntersection: false
});

this.drawObj.on("pm:edit", obj => {
    obj.target.setStyle({ color: "orange" });
    console.log(obj.target._latlngs[0]);
});

this.drawRadius.on("pm:edit", obj => {
    obj.target.setStyle({ color: "orange" });
    console.log(obj.target._latlng);
});

this.drawObj.on("keydown", e=>{
    alert("我是矩形点击事件")
});
this.drawRadius.on("click", e=>{
    alert("我是圆形点击事件")
});
/*
click: 点击事件
dblclick：双击	
mousedown：按下鼠标按钮
mouseup：释放鼠标按钮
mouseover：鼠标进入
mouseout：鼠标离开
mousemove：鼠标移入
contextmenu：鼠标右键
preclick：点击之前
*/

this.drawObj.off("click")
this.drawRadius.off("click")

    changePplygon() {
      this.drawRadius.bringToBack(); // 置为顶层
      //   this.drawObj.bringToFront(); // 置为底层
    },

this.drawObj.setLatLngs([
    [40.0214690112063, 116.50239229202272],
    [40.019694293123855, 116.50224208831787],
    [40.01979288978388, 116.50580406188966],
    [40.021436146476105, 116.50601863861085],
    [40.02253710631967, 116.50316476821901]
]);
this.drawObj.setStyle({ color: "red" });
this.drawObj.pm.disable();

this.drawObj.getLatLngs()