vue+leaflet.pm(geoman)插件绘制、编辑、拖动、点击即清除图形（以矩形为例，只保留一个绘制图形）

引入leaflet.pm

1. npm install leaflet.pm（cnpm install leaflet.pm也可）
2. 在main.js中引入

import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'

页面功能

	绘制预测区域
	编辑已绘区域
	 拖拽移动
	 删除区域
 

【注意】可以使用自带的样式（若用如上样式，需要把组件display设为none）

方法

定义data变量

map: {},
rectangleGeoJson: {},
rectangleLayer: {},

初始化

	// 初始化绘制工具
      this.map.pm.setLang('zh');
      this.map.pm.addControls({
        position: "topleft",
        drawPolygon: false, // 绘制多边形
        drawMarker: false, //绘制标记点
        drawCircleMarker: false, //绘制圆形标记
        drawPolyline: false, //绘制线条
        drawRectangle: true,	//绘制矩形
        drawCircle: false, //绘制圆圈
        editMode: true, //编辑多边形
        dragMode: true, //拖动多边形
        cutPolygon: false, // 添加一个按钮以删除多边形里面的部分内容
        removalMode: true  // 清除多边形
      })
      // 监听创建图形
      this.map.on('pm:create', (e) => {
        // 记录当前绘制的图形
        this.rectangleGeoJson = e.layer.toGeoJSON()
        this.rectangleLayer = e.layer
      });

具体功能

drawRectangle() {
      // 删除已有图形
      this.deleteDrawRectangle()
      // 激活绘制多边形功能
      this.rectangleLayer = this.map.pm.enableDraw('Rectangle', {
        snappable: true,
        snapDistance: 20,
        allowSelfIntersection: false
      });
    },
    editDrawRectangle() {
      // 监听编辑
      this.rectangleLayer.on('pm:edit', function (e) {
        // 记录当前绘制的图形
        this.rectangleGeoJson = e.target.toGeoJSON()
      })
      this.map.pm.toggleGlobalEditMode()

    },
    dragDrawRectangle() {
      // 监听拖拽
      this.rectangleLayer.on('pm:dragend', function (e) {
        this.rectangleGeoJson = e.target.toGeoJSON()
      })
      this.map.pm.toggleGlobalDragMode()
    },
    deleteDrawRectangle() {
      this.map.removeLayer(this.rectangleLayer)
    }

设置图层填充样式

// 方法1. 绘制结束将面填充置为透明
this.map.pm.setPathOptions({
  fillOpacity: 0,
})
// 方法2. 需要时将面填充置为透明
this.rectangleLayer._path.attributes[7].value = 0

this.rectangleLayer._path.attributes

关键点

1. 保存了图形的geojson格式，便于后期使用
2. 将layer绑定在变量上，后期可用于直接删除