高德地图绘制自定义区域

Vue 结合高德地图实现多边形区域绘制与编辑功能

本文档详细描述了如何使用 Vue.js 框架结合高德地图 JavaScript API，实现一个可自定义绘制和编辑多边形区域的地图组件。该组件可以返回用户绘制的区域的面积以及各个顶点的坐标，并支持重置和清空多边形区域。

组件特性

• 支持在地图上自定义绘制多边形区域
• 支持对已绘制的多边形区域进行编辑
• 绘制完成后可以计算多边形的面积
• 提供重置当前绘制以及清空所有多边形的功能
• 支持动态更改多边形的颜色

准备工作

1. 引入高德地图 JavaScript API。

在 HTML 文件中引入高德地图 API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_KEY"></script>

请替换 YOUR_AMAP_KEY 为你申请的高德地图开发者密钥。

2. 在项目中引入 Element UI 库。

组件方法与逻辑

1. 创建地图实例

首先，在 created 钩子函数里执行 createMap 方法创建地图实例。

created() {
  this.$nextTick(() => {
    this.createMap();
  });
}

2. 实现 createMap 方法

createMap() {
  var AMap = window.AMap;
  var map = new AMap.Map("container", {
    zoom: 11,
    center: [111.688264, 40.818205],
    viewMode: "3D",
  });

  var polygon = new AMap.Polygon({
    path: this.paths,
    strokeColor: "#fff",
    // 其余的样式属性...
  });
  map.add(polygon);
  map.setFitView([polygon]);
  this.map = map;
}

3. 绘制多边形区域

handleDraw 方法中，使用 AMap.MouseTool 创建一个绘制工具，开启多边形绘制模式，并监听 draw 事件以获取绘制的多边形对象。

handleDraw() {
  this.isediting = true;

  AMap.plugin(["AMap.MouseTool"], () => {
    var mouseTool = new AMap.MouseTool(this.map);
    // 配置绘制样式...
    mouseTool.polygon(/* styles */);
    mouseTool.on("draw", (event) => {
      this.polygon = event.obj;
      this.polygonEditor = new AMap.PolyEditor(this.map, this.polygon);
      this.polygonEditor.open();
      this.polygons.push(this.polygon);
    });
  });
}

4. 完成绘制并计算面积

handelFinishDraw 方法中，关闭绘制工具和多边形编辑器，并计算多边形的面积。

handelFinishDraw() {
  this.isediting = false;
  this.tool.close();
  this.polygonEditor.close();
  var path = this.polygon.getPath();
  // 计算面积...
}

5. 重置与清空多边形

handleClearDraw 方法重置当前绘制，handleClearAll 方法清空所有绘制的多边形。

handleClearDraw() {
  this.isediting = false;
  this.tool.close(true);
}
handleClearAll() {
  this.polygons.forEach(/* ... */);
  this.polygons = [];
}

6. 修改绘制颜色

handleChangeColor 方法根据用户的选择更改多边形的颜色。

handleChangeColor(item) {
  this.drawColor = item.value;
  // 设置新的绘制样式...
}

样式定义

设定地图容器、控制按钮和颜色选择器的样式。

<style scoped>
// 样式代码...
</style>

使用组件

将该地图组件集成到 Vue 页面中后，可通过上述按钮和颜色选择器与地图进行交互，实现多边形的绘制、编辑、面积计算及重置功能。

结语

结合高德地图 API 和 Vue 的强大功能，此地图组件为用户提供了丰富的交互方式，能够方便地在 web 应用中集成，并可用于多种场景，如地产规划、区域管理等领域。