记录 vue -amap 开发 高德地图 调用原生sdk 多边形得新增和编辑

记录 vue -amap 开发 高德地图 调用原生sdk 多边形得新增和编辑

import VueAMap from "vue-amap";
 Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德的key
  key: "859c0d27c83bc725a37fe2b7b2b4f3c2",
  // 插件集合
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor",
    "AMap.Geocoder",
    "AMap.MouseTool",
  ],
  // 高德 sdk 版本，默认为 1.4.4
  v: "1.4.4",
});

父组件代码：

<TestAmap
      :visible.sync="diglogVisibleDraw"
      @sendMsg="sendMsg"
      :amapCompData="amapCompData"
    />

edit(row) {
      this.amapCompData.editRow = row;
      this.amapCompData.type = "edit";
      this.diglogVisibleDraw = true;
    },
    sendMsg(msg) {
      this.mapObj = {
        state: true,
        name: "配送区域",
        business_start_time_string: this.serveTime[0]
          ? this.serveTime[0]
          : "08:00",
        business_end_time_string: this.serveTime[1]
          ? this.serveTime[1]
          : "22:00",
        delivery_extend_time_int: 1,
        fee: 0,
        path: msg,
      };
      this.polygons.push(this.mapObj);
      this.mapData = this.polygons;
      this.diglogVisibleDraw = false;
    },

子组件代码

 <div class="map" v-show="visible">
   <div class="main">
     <div class="top">
        <div>
          <div v-if="amapCompData.type == 'add'">
            <el-button type="primary" @click="startDraw()" v-if="!flag"
              >开始绘制</el-button
            >
            <template v-else>
              <el-button type="primary" @click="addDrawMap()">添加</el-button>
              <el-button type="primary" @click="cancelDrawMap()"
                >取消</el-button
              >
            </template>
          </div>
          <div v-else>
            <el-button type="primary" @click="editDrawMap()">编辑</el-button>
            <el-button type="primary" @click="editDrawMapASave()"
              >编辑保存</el-button
            >
          </div>
        </div>
        <i class="el-icon-close digclose" @click="close"></i>
      </div>
      <div id="container"></div>
    </div>
  </div>

import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  props: ["visible", "amapCompData"],
  data() {
    return {
      map: {},
      mouseTool: {},
      polygon: [],
      flag: false,
      polyEditor: {},
      ployStyle: {
        fillColor: "#FF0000",
        strokeColor: "#FF0000",
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillOpacity: 0.5,
      },
    };
  },
  watch: {
    visible() {
      if (this.amapCompData.type == "add") {
        this.initMap();
      } else {
        this.initEdit();
      }
    },
  },
  mounted() {},
  methods: {
  
    initOption() {
      this.flag = false;
      this.polygon = [];
      this.map = {};
      this.mouseTool = {};
    },
  
    initMap() {
      this.initOption();
      let self = this;
      this.$nextTick(function() {
        lazyAMapApiLoaderInstance.load().then(() => {
          self.map = new AMap.Map("container", {
            center: this.amapCompData.center,
            zoom: 14,
          });
          var marker = new AMap.Marker({
            position: this.amapCompData.center,
            title: "门店位置",
          });
          self.map.add(marker);
        });
      });
    },

    initEdit() {
      this.flag = false;
      this.map.clearMap();
      this.polygon = [];
      let self = this;
      let path = this.amapCompData.editRow.path;
      let polygon = new AMap.Polygon({
        path,
        ...this.ployStyle,
      });
      this.map.add(polygon);
      this.map.setFitView();

      this.polyEditor = new AMap.PolyEditor(this.map, polygon);
      this.polyEditor.on("end", function(event) {
        self.polygon.push(event.target.getPath());
      });
    },
    editDrawMap() {
      this.polyEditor.open();
      this.flag = true;
    },
    editDrawMapASave() {
      this.polyEditor.close();
      this.$emit("update:visible", false);
    },
 
    startDraw() {
      let self = this;
      self.flag = true;
      self.mouseTool = new AMap.MouseTool(self.map);
      var distanceTool = new AMap.MouseTool(self.map);
      distanceTool.rule();
      self.mouseTool.on("draw", function(e) {
        if (self.polygon.length == 0) {
          self.polygon.push(e.obj.getPath());
        } else {
          self.clear();
          self.$message.error("每次只能添加一个,请重新绘制");
        }
      });
      this.mouseTool.polygon(this.ployStyle);
    },
    cancelDrawMap() {
      this.clear();
      this.flag = false;
    },
    clear() {
      this.map.clearMap();
      this.polygon = [];
    },
    addDrawMap() {
      if (this.polygon.length == 0) {
        this.$message.error("未添加区域");
      } else {
        sessionStorage.setItem("mapData", JSON.stringify(this.polygon));
        this.$emit("sendMsg", this.polygon);
      }
    },
    close() {
      this.$emit("update:visible", false);
    },
  },
};