原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處
官方文檔
借鑒文章

• 配置方式查看這篇文章
• 子組件

<template>
  <div class="content">
    <div class="amap-wrapper">
      <!-- <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
      ></el-amap-search-box>-->
      <el-amap
        class="amap-box"
        ref="map"
        :zoom="zoom"
        :center="center"
        :events="events"
        :mapStyle="mapStyle"
      >
        <el-amap-polygon
          v-for="(polygon, index) in polygons"
          :key="index"
          :vid="index"
          :ref="`polygon_${index}`"
          :path="polygon.path"
          editable="true"
          strokeStyle="dashed"
          strokeColor="#FF0000"
          strokeWeight="2"
          strokeOpacity="0.8"
          fillOpacity="0.3"
          fillColor="#1791fc"
          :events="polygon.events"
        ></el-amap-polygon>
      </el-amap>
    </div>

    <div style="width: 360px;position: absolute; top: 100px;left:40px">
      <el-card class="box-card">
        <el-table :data="polygons" border size="mini" style="width: 100%">
          <el-table-column align="center" label="名稱">
            <template>
              <div>{{name}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.$index)"
                v-if="scope.row.path.length>0"
                type="text"
                size="small"
              >編輯</el-button>
              <el-button @click="draw(scope.$index)" v-else type="text" size="small">繪制</el-button>
              <el-button @click="del(scope.$index)" type="text" size="small">刪除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="Y-text-align-right Y-avg-1" style="margin-top:10px">
      <el-button type="primary" @click="addArea">添加行政區(qū)域</el-button>
      <!-- <el-button type="primary" v-if="isEdit" @click="end">結(jié)束編輯</el-button>
      <el-button type="primary" v-if="isDraw" @click="endDraw">結(jié)束繪制</el-button>-->
      <el-button type="primary" @click="sure">確定</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    path: {
      type: Array,
      default: function () {
        return [];
      },
    },
    name: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  data() {
    let _this = this;
    return {
      center: [117.120098, 36.6512], //地圖中心點(diǎn)坐標(biāo) 濟(jì)南市
      zoom: 12, //初始化地圖顯示層級(jí)
      mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //設(shè)置地圖樣式
      // searchOption: {
      //   city: "濟(jì)南",
      //   citylimit: true,
      // },
      isEdit: false,
      pIdx: 0,
      zoom: 14,
      events: {
        init: (o) => {},
        click: (e) => {
          let { lng, lat } = e.lnglat;
          if (_this.isDraw) {
            let arr = [e.lnglat.lng, e.lnglat.lat];
            _this.polygons[_this.pIdx].path.push(arr);
          }
        }
      },
      polygons: [
        // {
        //   path: [],
        //   events: {
        //     click(e) {
        //       _this.clickEdit(_this, this);
        //     },
        //   },
        // },
      ],
      polygonEditor: null,
      isDraw: false,
    };
  },
  watch: {
  },
  mounted() {
    let _this = this;
    setTimeout(function () {
      this.polygons = [];
      let path = _this.path;
      if (path.length > 0) {
        for (let i = 0; i < path.length; i++) {
          const element = path[i];
          let arr = [];
          if (element.aroundLocations.length > 0) {
            for (let j = 0; j < element.aroundLocations.length; j++) {
              const item = element.aroundLocations[j];
              arr.push([item.lng, item.lat]);
            }
          }
          element.path = arr;
          element.events = {
            click(e) {
              _this.clickEdit(_this, this);
            }
          };
          delete element.aroundLocations;
        }
        _this.polygons = path;
      }
    }, 500);
  },
  methods: {
    // onSearchResult(pois) {
    //   let latSum = 0;
    //   let lngSum = 0;
    //   if (pois.length > 0) {
    //     let center = pois[0];
    //     this.lng = center.lng;
    //     this.lat = center.lat;
    //     this.address = center.name;
    //     this.center = [center.lng, center.lat];
    //     this.markers = [[center.lng, center.lat]];
    //   }
    // },
    // 添加多邊形區(qū)域
    addArea() {
      let _this = this
      if (this.isDraw) {
        this.endDraw();
      }
      if (this.isEdit) {
        this.end();
      }
      let obj = {
        path: [],
        events: {
          click(e) {
            _this.clickEdit(_this, this);
          },
        },
      };
      this.polygons.push(obj);
      if (this.polygons.length > 0) {
        this.draw(this.polygons.length - 1);
      }
    },

    // 繪制多邊形
    draw(idx) {
      if (this.isEdit) {
        this.end();
      }
      this.pIdx = idx;
      this.isDraw = true;
    },
    // 刪除多邊形區(qū)域
    del(idx) {
      this.polygons.splice(idx, 1);
    },

    clickEdit(vm, polygon) {
      if (vm.isDraw) {
        vm.endDraw();
      }
      if (vm.polygonEditor) {
        vm.end();
      }
      vm.isEdit = true;
      let map = vm.$refs.map.$$getInstance();
      //構(gòu)造折線編輯對(duì)象侥蒙，并開啟折線的編輯狀態(tài)
      let polygonEditor = new AMap.PolyEditor(map, polygon);
      vm.polygonEditor = polygonEditor;
      polygonEditor.open();
      //關(guān)閉多邊形編輯polygonEditor.close()觸發(fā)該方法搓彻；
      polygonEditor.on("end", function (event) {});
    },

    // 編輯多邊形區(qū)域
    edit(idx) {
      if (this.isDraw) {
        this.endDraw();
      }
      if (this.polygonEditor) {
        this.end();
      }
      this.isEdit = true;
      let pStr = "polygon_" + idx;
      let vm = this;
      let map = vm.$refs.map.$$getInstance();
      let polygon = vm.$refs["polygon_" + idx][0].$$getInstance();
      // 縮放地圖到合適的視野級(jí)別
      // map.setFitView([polygon]);
      //構(gòu)造折線編輯對(duì)象赖阻，并開啟折線的編輯狀態(tài)
      let polygonEditor = new AMap.PolyEditor(map, polygon);
      vm.polygonEditor = polygonEditor;
      polygonEditor.open();
      //關(guān)閉多邊形編輯polygonEditor.close()觸發(fā)該方法旁趟；
      polygonEditor.on("end", function (event) {
        // event.target 即為編輯后的多邊形對(duì)象,event.target.getPath()得到編輯完成后的點(diǎn)數(shù)組
        let pointArr = event.target.getPath();
        vm.polygons[idx].path = pointArr;
      });
    },
    // 結(jié)束編輯
    end() {
      this.polygonEditor.close();
      this.isEdit = false;
    },
    // 結(jié)束繪制
    endDraw() {
      this.isDraw = false;
    },
    // 確定 傳數(shù)據(jù)給父組件
    sure() {
      if (this.isDraw) {
        this.endDraw();
      }
      if (this.isEdit) {
        this.end();
      }
      let polygons = this.polygons;
      this.$emit("update", polygons);
    },
  },
};
</script>
<style scoped lang="scss">
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-wrapper {
  width: 100%;
  height: 500px;
  position: relative;
}
</style>

• 父組件調(diào)用

<map-area @update="update" :name="areaName" :path="pathArea"></map-area>
 update(arr) {
      let _this = this;
      let around = [];
      for (let i = 0; i < arr.length; i++) {
        let o = {};
        const element = arr[i];
        element.aroundLocations = element.path;

        let aroundLocations = [];
        for (let j = 0; j < element.path.length; j++) {
          const item = element.path[j];
          let obj = {};
          if (item instanceof Array) {
            obj = {
              lng: item[0],
              lat: item[1],
            };
          } else {
            obj = {
              lng: item.lng,
              lat: item.lat,
            };
          }

          aroundLocations.push(obj);
        }
        o.aroundLocations = aroundLocations;

        around.push(o);
      }
      if (around.length > 0) {
        _this
          .$confirm("是否修改?", "提示", {
            confirmButtonText: "確定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            let data = {
              groupId: _this.groupId,
              around: around,
            };
            addAroundListFun(data).then((res) => {
              _this.$message.success("添加成功");
              _this.dialogVisible = false;
            });
          })
          .catch(() => {
            _this.$message.success("已取消");
          });
      } else {
        this.$message.error("未劃分區(qū)域");
        return
      }
    },

最后附上效果圖：

效果圖