二维地图是使用leaflet，添加绘制功能的插件第一篇

这里介绍的是leaflet上使用leaflet.pm来绘制操作地图

简单的使用介绍

1、首先下载依赖

执行命令：npm install leaflet.pm

2、与上一篇的介绍第二条一样，可能你的地图在多个地方用也可能就在一个地方用可以选择性的在你的入口文件main.js或者你所需要的组件中局部引用

两种的引入方式是一样的

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

3、初始化组件，想使用可编辑的组件就true，不使用就false，就直接隐藏了

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

4、由于一些需求是进入页面就要启动绘制，绘制完可能会关闭绘制，所以给大家也做了例子，启动绘制和关闭绘制

具体方法如下

启动绘制

draw() {
//这个就是启动的形状的绘制，你要是想启动别的就可以自己设置就可以了呦
  this.map.pm.enableDraw("Polygon", { 
      snappable: false,
   });

关闭绘制

disDraw() {
//这个就是关闭绘制了，也是一样其他自己自行设置就可以
  this.map.pm.disableDraw("Polygon");
}

5、绘制过程中使用的方法介绍

绘制开始 可打印e中的数据查看里面的内容就会有你想要的东西呦，比如坐标经纬度

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], "绘制坐标")
  });

6、可以监听绘制完的图形或者其他的上的一些编辑方法事件

如下边方法上的每一个e都是一个图层，如果想检测这个图层该怎么办呢？

this.map.eachLayer(function(e){console.log(e)})

来介绍一下监听每一个图层

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

上面这样就是监听到了图层了呦！

7、开启和关闭编辑功能

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

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

8、启动编辑后，右键是删除点的功能，默认是开启的，你可以选择禁用

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

好了就先介绍到这，下篇接着给大家介绍使用呦！