vue 中使用leaflet和leaflet.pm自由绘制

leaflet.pm仓库：
https://github.com/geoman-io/leaflet-geoman

安装

npm install leaflet
npm install leaflet.pm

在main.js中引入

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

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'),
})

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

初始化地图

this.map = L.map("mapDiv", {
            crs: L.CRS.EPSG4326,  // 要使用的坐标参考系
            center: [29.84, 121.61],  // 地图的初始地理中心
            zoom: 12,  // 初始地图缩放级别
            layers: [imgMap],  // 最初将添加到地图的图层数组
            zoomControl: false,  // 缩放控件是否显示 
            attributionControl: false,  // 右下角的leaflet标志是否显示
 });

地图事件监听

      // 地图点击事件
      this.map.on("click", (e) => {
        // console.log("点击---", e);
      });
      // 监听地图大小变化
      this.map.on(
        "resize",
        debounce(() => {
          this.map.removeLayer(this.baseWMSLayer);  // 移除就瓦片图层
          this.addWmsLayer();  // 添加新瓦片屠屏
        }, 500)
      );

添加一个比例尺

      L.control
        .scale({ maxWidth: 200, metric: true, imperial: false })
        .addTo(this.map);

加载图层

加载图层--腾讯地图--作为底图

      // 加载腾讯地图
      const option = {
        subdomains: "0123",
        tms: true,
      };
      L.tileLayer(
        "http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0",
        option
      ).addTo(this.map);

加载图层--瓦片图层

官方文档：https://leafletjs.com/reference-1.6.0.html#tilelayer-wms

      this.baseWMSLayer = L.tileLayer.wms(
        瓦片服务的url,
        {
          ...所需参数
        }
      );
      this.map.addLayer(this.baseWMSLayer);

使用leaflet.pm进行自由绘制所需，控件和方法监听

官方文档：https://github.com/geoman-io/leaflet-geoman

// 添加绘制工具
      this.map.pm.setLang("zh");
      this.map.pm.addControls({
        position: "topleft",
        drawPolygon: true, //绘制多边形
        drawMarker: false, //绘制标记点
        drawCircleMarker: false, //绘制圆形标记
        drawPolyline: false, //绘制线条
        drawRectangle: false, //绘制矩形
        drawCircle: false, //绘制圆圈
        editMode: true, //编辑多边形
        dragMode: true, //拖动多边形
        cutPolygon: false, //添加⼀个按钮以删除多边形⾥⾯的部分内容
        removalMode: true, //清除多边形
      });
// 全局设置绘制样式
      this.map.pm.setPathOptions({
        color: "orange",
        fillColor: "green",
        fillOpacity: 0.4,
      });

// 或者单独设置绘制样式
      var options = {
        // 连接线标记之间的线
        templineStyle: {
          color: "red",
        },
        // 提⽰线从最后⼀个标记到⿏标光标的线
        hintlineStyle: {
          color: "red",
          dashArray: [5, 5],
        },
        // 绘制完成的样式
        pathOptions: {
          color: "orange",
          fillColor: "green",
        },
      };

      // 激活绘制多边形功能-1、单独设置某个模式的样式
      this.map.pm.enableDraw("Polygon", options);


      // 启用绘制--多边形功能
      this.map.pm.enableDraw("Polygon", {
        snappable: true, //启⽤捕捉到其他绘制图形的顶点
        snapDistance: 20, //顶点捕捉距离
      });

      // 关闭绘制--注意也可以关闭其他模式的绘制功能
      this.map.pm.disableDraw("Polygon");

// 绘制事件监听
      this.map.on("pm:drawstart", (e) => {
        console.log(e, "绘制开始第一个点");
      });
      this.map.on("pm:drawend", (e) => {
        console.log(e, "禁⽌绘制、绘制结束");
      });
      this.map.on("pm:create", (e) => {
        console.log(e, "绘制完成时调⽤");
        if (e.shape == "Circle") {
          console.log(e.layer._latlng, e.layer._radius, "绘制坐标");
        } else {
          console.log(e.layer._latlngs[0], "绘制坐标");
        }
      
      });

      this.map.on("pm:globalremovalmodetoggled", (e) => {
        console.log(e, "清除图层时调用");
      });

其他参考文章