vue[高德地图绘制多边形以及保存重绘操作]

最近有个需求，要求在高德地图上能够自由的绘制区块，然后这个区块能够自由的控制边框、透明度、背景色等，绘制完毕之后保存起来，然后在另一个页面进行重新绘制并且添加上对于的点击事件。
代码记录
本例中有两个vue组件代码，第一个组件仅保存相关操作，第二个组件用于操作地图。
index-map.vue用于保存操作

<template>
  <div class="index-map">
    <div class="func-line">
      <div>
        <p>绘制多边形操作</p>
        <p>
          <span>
            选择边框颜色：
            <el-color-picker v-model="polyType.borderColor" size="mini"></el-color-picker>
          </span>
          <span>
            选择背景颜色：
            <el-color-picker v-model="polyType.fillColor" size="mini"></el-color-picker>
          </span>
        </p>
        <p>
          <span>
            背景透明度：
            <el-slider
              v-model="polyType.fillOpacity"
              :step="10"
              show-stops
              size="mini"
              style="width:200px;display:inline-block;vertical-align: middle;"
            ></el-slider>
            <span>{{polyType.fillOpacity + '%'}}</span>
          </span>
        </p>

        <p>
          <el-button @click="drawPolygon">开始绘制</el-button>
          <el-button @click="clearPolygon">清空当前绘制</el-button>
          <el-button @click="closeDrawPolygon">结束绘制并保存</el-button>
          <span style="font-size:10px;">小提示：右键取消</span>
        </p>
      </div>
      <div>
        <p>用保存的数据重新绘制多边形并添加事件</p>
        <el-button @click="resetDraw">重新绘制</el-button>
      </div>
    </div>
    <div class="map-select-box">
      <SelectMap ref="SelectMap"></SelectMap>
    </div>
  </div>
</template>
<script>
import SelectMap from "./select-map";
export default {
  data() {
    return {
      // 多边形绘制颜色选择
      polyType: {
        borderColor: "",
        fillOpacity: 0,
        fillColor: ""
      }
    };
  },
  components: {
    SelectMap
  },
  methods: {
    // 绘制多边形
    drawPolygon() {
      this.$refs["SelectMap"].polyType = this.polyType;
      this.$refs["SelectMap"].drawPolygon();
    },
    // 清空绘制
    clearPolygon() {
      this.$refs["SelectMap"].clearPolygon();
    },
    // 结束绘制
    closeDrawPolygon() {
      this.$refs["SelectMap"].closeDrawPolygon();
    },
    // 重绘多边形内容并添加事件
    resetDraw(){
      this.$refs["SelectMap"].resetDraw();
    }
  }
};
</script>
<style lang="scss" scoped>
.index-map {
  width: 100%;
  overflow: hidden;
  padding: 0;
  .func-line {
    width: 100%;
    margin-bottom: 20px;
    > div {
      border: 1px solid #ebebeb;
      padding: 10px;
    }
  }
  .map-select-box {
    height: 520px;
    width: 100%;
  }
}
</style>

效果：

select-map.vue用于在地图绘制内容，并且添加相关事件

<template>
  <div class="select-map">
    <div id="select-map"></div>
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      map: {}, //保存地图对象
      mouseTool: {}, // 鼠标多边形绘制工具
      polyType: {
        borderColor: "",
        fillOpacity: 0.5,
        fillColor: ""
      },
      polygonList: [],
      savePolygon: []
    };
  },
  methods: {
    // 限制地图显示范围
    setLimit() {
      var bounds = this.map.getBounds();
      this.map.setLimitBounds(bounds);
    },
    // 绘制多边形
    drawPolygon() {
      let that = this;
      this.mouseTool = new AMap.MouseTool(this.map);
      this.mouseTool.polygon({
        strokeColor: this.polyType.borderColor,
        fillColor: this.polyType.fillColor,
        fillOpacity: parseFloat(this.polyType.fillOpacity / 100)
        //同Polygon的Option设置
      });
      //监听draw事件可获取画好的覆盖物
      this.polygonList = [];
      this.mouseTool.on("draw", function(e) {
        that.polygonList.push(e.obj);
        console.log("绘制的多边形", that.polygonList);
      });
    },
    // 清空地图上绘制的多边形
    clearPolygon() {
      this.map.remove(this.polygonList);
      this.polygonList = [];
    },
    // 结束绘制多边形
    closeDrawPolygon() {
      this.mouseTool.close();
      let savePolygon = [];
      for (let i = 0; i < this.polygonList.length; i++) {
        console.log(this.polygonList[i].getOptions());
        let op = this.polygonList[i].getOptions();
        let routePath = [];
        op.path.forEach(item => {
          routePath.push([item.lng, item.lat]);
        });
        let savearr = {
          path: routePath,
          strokeColor: op.strokeColor,
          strokeOpacity: op.strokeOpacity,
          fillOpacity: op.fillOpacity,
          fillColor: op.fillColor,
          zIndex: op.zIndex
        };
        this.savePolygon.push(savearr);
      }
      let save = JSON.stringify(this.savePolygon);
      console.log("savePolygon", save);
      sessionStorage.setItem("savePolygon", save);
    },
    // 创建地图
    createMap() {
      let that = this;
      this.$nextTick(() => {
        //地图加载
        that.map = new AMap.Map("select-map", {
          zooms: [14, 20],
          zoom: 14,
          layers: [new AMap.TileLayer.Satellite()],
          center: [118.771825, 32.215699]
        });
        // 地图上打印当前的鼠标点击点位
        that.map.on("click", function(e) {
          console.log(e.lnglat.getLng() + "," + e.lnglat.getLat());
        });
        // 限制地图使用范围
        this.setLimit();
      });
    },
    // 用保存的数据重新绘制多边形并添加事件
    resetDraw() {
      let that = this;
      let savePolygon = JSON.parse(sessionStorage.getItem("savePolygon"));
      console.log("重绘多边形数据", savePolygon);
      for (let i = 0; i < savePolygon.length; i++) {
        var polygon = new AMap.Polygon(savePolygon[i]);
        polygon.on("click", function(e) {
          console.log("点击了" + i + "个内容",e);
          that.dialogVisible = true;
        });
        this.map.add(polygon);
      }
    }
  },
  mounted() {
    this.createMap();
  }
};
</script>
<style lang="scss" scoped>
.select-map {
  width: 100%;
  height: 100%;
  #select-map {
    width: 100%;
    height: 100%;
  }
}
</style>

效果：


整个内容总共用到了高德地图的AMap.Map、AMap.MouseTool、mouseTool.polygon、AMap.Polygon
仅做个人代码记录便于以后参考使用