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

接着上篇的继续介绍leaflet.pm的使用

1、知道经纬度绘制出形状或者线段或者园等几个的方式基本上都是一样的

 const latlngs=[

            [39.2675561,110.1201936],

            [39.2675560,110.1201936],

            [39.2675560,110.1201936],

            // [39.2675560,110.1201937],

            // [39.2675558,110.1201940],

            [39.2675557,110.1201939],

            [39.2675557,110.1201941],

            [39.2626659 ,110.1253095] ];

根据上面的经纬度数据画形状

this.polygon= L.polygon(latlngs, { color: "red" }).addTo(map);

this.polygon.bindTooltip('this is 个多边形');

上面这样的就画好了，下面的是去改变一些对应的颜色宽度等的一些属性

// color：线段颜色 // weight：线段宽度 // opacity：线段透明度 // dashArray：虚线间隔 // fill：是否填充内部(true/false) // fillColor:内部填充颜色，如不设置，默认为color颜色 // fillOpacity：内部填充透明度

const circle= [39.2675561,110.1201936]

根据上面的数据画圆 ，radius这个是代表的半径

this.circle= L.circle(circle, { radius: 200 }).addTo(this.map);

2、上面绘制的这些的开启编辑功能

this.polygon.pm.enable({
    allowSelfIntersection: false
});
this.circle.pm.enable({
    allowSelfIntersection: false
});

3、当然了绘制完了还有对应的操作方法

图层的编辑

this.polygon.on("pm:edit", obj => {
    obj.target.setStyle({ color: "orange" });
    console.log(obj.target._latlngs[0]);//这个可能就是你需要的经纬度呦
});

图层的点击双击或者键盘方法

this.polygon.on("click", e=>{ alert("点击事件") });

/*
click: 点击事件
dblclick：双击	
mousedown：按下鼠标按钮
mouseup：释放鼠标按钮
mouseover：鼠标进入
mouseout：鼠标离开
mousemove：鼠标移入
contextmenu：鼠标右键
preclick：点击之前
*/

单机过程需要双击的会引起事件冲突，解决办法就在下边了

L.polygon(latlngs, { color: "red" }).addTo(map).on('click',e=>{

timer=setTimeout(()=>{

在这里面执行你的单机需要执行的操作

})

}).on('dblclick',e=>{

  在这里面加你双击需要做的操作

  clearTimeout(timer)

})

4、加了点击方法有的时候还是需要移除你加的方法

polygon.off("click")

5、需要将你的图层置为顶层或者底层

this.polygon.bringToBack(); // 置为顶层
this.polygon.bringToFront(); // 置为底层

6、修改过程中不想要你的修改了就可以重置

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

7、获取图层的边界值

this.polygon.getLatLngs()