高德地图实现多边形编辑器吸附功能

实现对地图的区域新建、编辑、样式修改、获取框选后点位合集，优化了官方案例的一些结构。

1. 效果

2. 安装插件 

npm i @amap/amap-jsapi-loader --save

3.代码

4. 样式修改

    initEditor() {
      polyEditor = new AMap.PolygonEditor(this.map);
      polyEditor._opt.createOptions = { // 创建区域的样式
        fillColor: "#FF8D8D",
        fillOpacity: 0.3,
        strokeWeight: 3,
        strokeColor: "#FF8D8D",
      };
      polyEditor._opt.editOptions = {// 编辑区域的样式
        fillColor: "#FF8D8D",
        fillOpacity: 0.3,
        strokeWeight: 3,
        strokeColor: "#FF8D8D",
      };
      polyEditor.midControlPoint = { // 点位样式
        fillColor: "#FF8D8D",
        fillOpacity: 1,
        strokeWeight: 2,
        strokeColor: "#FF8D8D",
        bubble: false,
        clickable: true,
        cursor: "pointer",
      };
      polyEditor.controlPoint = {// 点位样式
        fillOpacity: 1,
        strokeWeight: 2,
        strokeColor: "#FF8D8D",
        bubble: false,
        clickable: true,
        cursor: "pointer",
      };
      polyEditor.on("add", (data) => {
        var polygon = data.target;
        polyEditor.addAdsorbPolygons(polygon);
        polygon.on("dblclick", () => {
          // 双击图层进行编辑
          polyEditor.setTarget(polygon);
          polyEditor.open();
        });
      });
      polyEditor.on("end", (data) => {
        let obj = {
          key: data.target._opts.path,
          mapId: data.target._amap_id,
        };
        if (this.pathArr.length > 0) {
          // 判断是否有重复的点位，如果点位重复说明是修改之前的区域面积
          let isRepeat = this.pathArr.some((item, index) => {
            if (item.mapId === obj.mapId) {
              this.pathArr[index] = obj;
              return true;
            }
          });
          if (!isRepeat) {
            this.pathArr.push(obj);
          }
        } else {
          // 没有点位，直接添加
          this.pathArr.push(obj);
        }
        console.log(this.pathArr); // 最终的点位合集
      });
      polyEditor.open(); // 进入组件就可以编辑
      return polyEditor;
    },

5. 修改颜色后的效果