【vue+amap】高德地图绘制多边形区域

参考文档：
高德地图参考手册
高德地图示例代码

1、高德地图控制台创建应用，获取权限ak

高德地图控制台

Ps.本项目里按钮等基础控件使用的是element-ui版本控件

2、项目内全局引入

index.html内引入高德地图代码：

<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "你的安全密钥"
    };
  </script>
  <script
    type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.6&key=你的key"
  ></script>
  <script
    type="text/javascript"
    src="http://webapi.amap.com/maps?v=1.4.6&key=你的key&plugin=AMap.PolyEditor&plugin=AMap.MouseTool"
  ></script>

3、完整项目代码

template：

<template>
  <div class="map-wrap">
    <div>
      <h1>{{ msg }}</h1>
      <div class="flex">
        <div class="button-wrap">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="handleDraw"
            >绘制</el-button
          >
          <el-button size="small" icon="el-icon-add" @click="handelFinishDraw"
            >完成</el-button
          >
          <el-button
            size="small"
            icon="el-icon-refresh-left"
            @click="handleClearDraw"
            >重置</el-button
          >
        </div>
        <div class="picker-color" v-if="isediting">
          <div class="text">选择颜色</div>
          <span
            @click="handleChangeColor(item)"
            v-for="item in colors"
            :key="item.code"
            :class="[
              'color' + item.code,
              drawColor == item.value ? 'active' : '',
            ]"
          >
            <i v-if="drawColor == item.value" class="el-icon-check"></i>
            <i v-else>&nbsp;</i>
          </span>
        </div>
      </div>
    </div>
    <div style="width: 1200px; height: 500px; padding-left: calc(50% - 600px)">
      <div id="container"></div>
    </div>
  </div>
</template>

js:

<script>
export default {
  name: "Map",
  data() {
    return {
      msg: "地图绘制展示页",
      map: null,
      poly: null,
      drawColor: "#2A8DFF",
      colors: [
        { code: 1, value: "#FF6B36" },
        { code: 2, value: "#FFAD29" },
        { code: 3, value: "#FFDA21" },
        { code: 4, value: "#29E98F" },
        { code: 5, value: "#1EEDE6" },
        { code: 6, value: "#2A8DFF" },
        { code: 7, value: "#CC16EF" },
        { code: 8, value: "#F53ABD" },
      ],
      paths: [
        [111.683736, 40.818554],
        [111.684444, 40.816971],
        [111.689036, 40.818172],
        [111.688264, 40.819788],
      ],
      mouseOverEvent: true,
      isediting: false,
      tool: null,
    };
  },

  created() {
    this.$nextTick(() => {
      this.createMap();
    });
  },
  methods: {
    createMap() {
      // 地图创建
      var map = new AMap.Map("container", {
        zoom: 11, //级别
        center: [111.688264, 40.818205], //兴泰御都国际
        viewMode: "3D", //使用3D视图
      });
      // 添加一个标记点
      var marker = new AMap.LabelMarker({
        icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [111.687931, 40.818392],
        offset: new AMap.Pixel(-10, -30),
        text: {
          content: "东方国信",
          direction: "right",
          style: {
            fontSize: 15,
            fillColor: "#fff",
            strokeColor: "rgba(255,255,0,0.5)",
            strokeWidth: 2,
            padding: [3, 10],
            backgroundColor: "blue",
            borderColor: "#ccc",
            borderWidth: 3,
          },
        },
      });
      var labelsLayer = new AMap.LabelsLayer({
        collision: true,
      });
      labelsLayer.add(marker);// 将 LabelMarker 实例添加到 LabelsLayer 上
      map.add(labelsLayer);// 将 LabelsLayer 添加到地图上
      // 创建默认区域
      var polygon = new AMap.Polygon({
        path: this.paths,
        strokeColor: "#fff",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: this.drawColor,
        zIndex: 50,
      });
      map.add(polygon);
      map.setFitView([polygon]); // 缩放地图到合适的视野级别
      this.map = map;
      // 如果后期想修改默认区域：修改this.poly即可
      // var polyEditor = new AMap.PolyEditor(map, polygon);
      // this.poly = polyEditor;
    },
    /* 操作按钮 */
    // 编辑
    handleDraw() {
      // this.poly.open();
      this.isediting = true;
      var mouseTool = new AMap.MouseTool(this.map);
      this.tool = mouseTool;
      mouseTool.polygon({
        strokeColor: "#FFF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: this.drawColor,
        fillOpacity: 0.4,
        strokeStyle: "solid",
      });
      mouseTool.on("draw", function (event) {
      	console.log("覆盖物对象绘制完成:", event.obj);// event.obj 为绘制出来的覆盖物对象
      });
    },
    handelFinishDraw() {
      this.isediting = false;
      this.tool.close();
    },
    //重置
    handleClearDraw() {
      this.isediting = false;
      this.tool.close(true);
    },
    //切换颜色
    handleChangeColor(item) {
      this.drawColor = item.value;
      this.tool.polygon({
        strokeColor: "#FFF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: this.drawColor,
        fillOpacity: 0.4,
        strokeStyle: "solid",
      });
    },
  },
};
</script>

css:

<style scoped>
h1 {
  font-weight: normal;
}
#container {
  width: 100%;
  height: 100%;
}
.map-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.map-wrap .flex {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  line-height: 50px;
  width: 1200px;
  padding-left: calc(50% - 600px);
}
.allmap {
  width: 100%;
  height: calc(100% - 50px);
  position: absolute;
}
ul {
  list-style: none;
}
.picker-color {
  text-align: right;
  padding-right: 30px;
}
.text {
  display: inline-block;
  padding: 0 10px;
  float: left;
}
span {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 20px;
  border-radius: 4px;
  border-width: 2px;
  border-style: solid;
  margin-left: 8px;
  overflow: hidden;
  text-align: center;
  margin-top: 10px;
  float: left;
}
span i {
  font-weight: 600;
}
.color1 {
  border-color: #ff6b36;
  background: rgba(255, 107, 54, 0.3);
  color: #ff6b36;
}
.color2 {
  border-color: #ffad29;
  background: rgba(255, 173, 41, 0.3);
  color: #ffad29;
}
.color3 {
  border-color: #ffda21;
  background: rgba(255, 218, 33, 0.3);
  color: #ffda21;
}
.color4 {
  border-color: #29e98f;
  background: rgba(41, 233, 143, 0.3);
  color: #29e98f;
}
.color5 {
  border-color: #1eede6;
  background: rgba(30, 237, 230, 0.3);
  color: #1eede6;
}
.color6 {
  border-color: #2a8dff;
  background: rgba(42, 141, 255, 0.3);
  color: #2a8dff;
}
.color7 {
  border-color: #cc16ef;
  background: rgba(204, 22, 239, 0.3);
  color: #cc16ef;
}
.color8 {
  border-color: #f53abd;
  background: rgba(245, 58, 189, 0.3);
  color: #f53abd;
}
</style>