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

前言

之前做的高德地图多边形编辑器吸附功能，最近出现不能编辑。在修改的过程中顺便记录一下。

实现效果

安装

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

核心代码

<template>
  <div class="container">
    <div id="container"></div>
    <div class="input-card">
      <el-button @click="createPolygon()">新建</el-button>
      <el-button @click="polyEditor.open()">开始编辑</el-button>
      <el-button @click="editClose">结束编辑</el-button>
    </div>
  </div>
</template>
   
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
var polyEditor = "";
export default {
  name: "AreaMap",
  data() {
    return {
      map: null,
      // polyEditor: null,
      coordList: "",
      timer: "",
    };
  },
  props: ["pathList", "dataId"],
  mounted() {
    if (this.dataId) {
      this.start();
      console.log("修改");
    } else {
      this.echart();
      console.log("添加");
    }
  },
  methods: {
    start() {
      this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
    },
    async echart() {

      clearInterval(this.timer);
      console.log("接收参数", this.pathList);
      // console.log(typeof JSON.parse(this.pathList));
      await AMapLoader.load({
        key: "申请好的Web端开发者Keyxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.PolygonEditor",
          "AMap.PlaceSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [113.08, 34.94], //初始化地图中心点位置
          });
          this.map.setFitView();
        })
        .catch((e) => {
          console.log(e);
        });
      this.initEditor();

    },
    initEditor() {
      var path1 = []
      if (this.dataId) {
        path1 = JSON.parse(this.pathList) || [];

      }

      var polygon1 = new AMap.Polygon({
        path: path1,
      });
      this.map.add([polygon1]);
      polyEditor = new AMap.PolygonEditor(this.map);
      console.log(polyEditor);
      console.dir(polyEditor);
      polyEditor.on("add", (data) => {
        console.log(data);
        this.coordList = data.lnglat;
        var polygon = data.target;
        polygon.on("dblclick", () => {
          polyEditor.setTarget(polygon);
          polyEditor.open();
        });
      });
      polygon1.on("dblclick", () => {
        polyEditor.setTarget(polygon1);
        polyEditor.open();
      });

      return polyEditor;
    },
    createPolygon() {
      polyEditor.close();
      polyEditor.setTarget();
      polyEditor.open();
    },
    editClose() {
      // console.log("this", this);

      let that = this;
      polyEditor.on("end", function (event) {
        // event.target 即为编辑后的多边形对象
        //多边形的坐标
        this.coordList = event.target.getPath();
        // console.log("coordList", this.coordList);
        let mapList = [];
        this.coordList.forEach((v) => {
          console.log("v", v.lng, "--", v.lat);
          mapList.push([v.lng, v.lat]);
        });
        that.$emit("mapList", mapList);
      });
      polyEditor.close();
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
   
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 500px;
}

.container {
  position: relative;
  border: 1px solid rgb(204, 204, 204);

  .input-card {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
}
</style>

多边形坐标提交

点击结束编辑处理编辑的多边形坐标。如下
[[112.782253,35.045745],[112.916836,34.972633],[112.871517,34.875799],[112.665524,34.991761]]

editClose() {
      // console.log("this", this);

      let that = this;
      polyEditor.on("end", function (event) {
        // event.target 即为编辑后的多边形对象
        //多边形的坐标
        this.coordList = event.target.getPath();
        // console.log("coordList", this.coordList);
        let mapList = [];
        this.coordList.forEach((v) => {
          console.log("v", v.lng, "--", v.lat);
          mapList.push([v.lng, v.lat]);
        });
        that.$emit("mapList", mapList);
      });
      polyEditor.close();
    },

在编辑的时候回显出来

接收pathList参数，放到polygon1 进行展示。

总结

这方法用来单独封装，进行使用。根据父子传参进行数据的传输。最后保存到数据库中。