leaflet 多边形框选组件 leaflet-editable

npm install leaflet-editable@1.2.0 因为新版本的babel不兼容会报错

 initMap() {
      this.map = L.map("leaflet", {
        center: this.center, //中心坐标
        zoom: 17, //缩放级别
        minZoom: 13,
        maxZoom: 18,
        zoomControl: true, //缩放组件
        scrollWheelZoom: true, // 禁用滚轮缩放
        doubleClickZoom: false, // 禁用双击缩放
        attributionControl: false, //去掉右下角logo
        editable: true,//必须要加这个
      });
      L.tileLayer(
        "http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        // "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        {
          subdomains: ["1", "2", "3", "4"],
          minZoom: 13,
          maxZoom: 18,
        }
      ).addTo(this.map);
      // 启用地图的编辑功能
      this.polygon = this.map.editTools.startPolygon(null, {
        color: "red", // 边框颜色设为红色
        weight: 3, // 边框宽度
        fillColor: "red", // 填充颜色设为红色
        fillOpacity: 0.3, // 填充透明度
      }); // 启动多边形绘制工具
      // 监听多边形 end 事件
      //   this.map.on("editable:drawing:end", this.onPolygonEdit); 
    },
    // 编辑完成后的回调
    onPolygonEdit() {
      if (this.polygon) {
        console.log("多边形已编辑:", this.polygon.getLatLngs());
      }
    },

    // 清除多边形
    clearPolygon() {
      if (this.polygon) {
        this.map.removeLayer(this.polygon);
        this.polygon = null;
      }
    },