高德地图绘制工具全解析：线路、矩形、圆形、多边形绘制与编辑指南 🗺️✏️

引言 🌟

在现代WebGIS开发中，地图绘制功能是许多应用的核心需求。本文将基于Vue和高德地图(AMap)API，详细解析四种常见图形（线路、矩形、圆形、多边形）的绘制与编辑实现方案，并加入丰富的可视化元素，帮助开发者快速掌握地图绘制技术。

一、线路绘制与编辑 🛣️

1. 线路绘制实现

核心代码：

drawPolyline() {
  this.mouseTool.polyline({
    strokeColor: '#3366FF',
    strokeOpacity: 1,
    strokeWeight: 6,
    strokeStyle: 'solid',
    strokeDasharray: [10, 5]
  });
}

实现要点：

1. 🖱️ 使用AMap.MouseTool的polyline方法
2. 🎨 可配置线条颜色、透明度、宽度等样式
3. ➖ 支持虚线样式（通过strokeDasharray）

计算长度：

// 📏 计算线路总长度
const path = overlay.getPath();
let distance = 0;
for (let i = 0; i < path.length - 1; i++) {
  distance += path[i].distance(path[i + 1]);
}

2. 线路编辑功能

编辑实现：

javascript

if (this.currentOverlay instanceof AMap.Polyline) {
  this.currentEditor = new AMap.PolyEditor(this.map, this.currentOverlay);
  this.currentEditor.open();
  // ✨ 提示用户进入编辑模式
  this.$message.success('已进入线路编辑模式，可拖动节点调整');
}

编辑特性：

• 🔴 可拖动节点调整线路形状
• ➕ 可在线段上添加新节点
• 🔄 实时更新线路长度计算

二、矩形绘制与编辑 🟦

1. 矩形绘制实现

核心代码：

drawRectangle() {
  this.mouseTool.rectangle({
    strokeColor: '#FF33FF',
    strokeOpacity: 1,
    strokeWeight: 4,
    fillColor: '#1791fc',
    fillOpacity: 0.4,
    strokeStyle: 'solid'
  });
}

实现要点：

1. ↔️ 通过拖拽确定矩形对角点
2. 🎨 可自定义边框和填充样式
3. 📊 自动计算面积和周长

几何计算：

// 📐 计算矩形几何属性
const bounds = overlay.getBounds();
const sw = bounds.getSouthWest();
const ne = bounds.getNorthEast();
const width = sw.distance(new AMap.LngLat(ne.lng, sw.lat));
const height = sw.distance(new AMap.LngLat(sw.lng, ne.lat));
const area = width * height;  // 面积
const perimeter = (width + height) * 2;  // 周长

2. 矩形编辑功能

编辑实现：

if (this.currentOverlay instanceof AMap.Rectangle) {
  this.currentEditor = new AMap.RectangleEditor(this.map, this.currentOverlay);
  this.currentEditor.open();
  // 🔄 监听编辑事件
  this.currentEditor.on('adjust', this.updateRectangleInfo);
}

编辑特性：

• ↕️ 拖动边线调整矩形大小
• ⏹️ 拖动角点同时调整宽度和高度
• 📈 实时更新面积和周长计算

三、圆形绘制与编辑 ⭕

1. 圆形绘制实现

核心代码：

drawCircle() {
  this.mouseTool.circle({
    strokeColor: '#FF33FF',
    strokeOpacity: 1,
    strokeWeight: 4,
    fillColor: '#1791fc',
    fillOpacity: 0.4,
    strokeStyle: 'solid'
  });
}

实现要点：

1. 🎯 点击确定圆心，拖拽确定半径
2. 🌈 支持自定义边框和填充样式
3. 🔢 自动计算半径、面积和周长

几何计算：

// 🔵 圆形几何计算
const radius = overlay.getRadius();
const area = Math.PI * radius * radius;  // 面积
const perimeter = 2 * Math.PI * radius;  // 周长

2. 圆形编辑功能

编辑实现：

if (this.currentOverlay instanceof AMap.Circle) {
  this.currentEditor = new AMap.CircleEditor(this.map, this.currentOverlay);
  this.currentEditor.open();
  // 🎛️ 添加编辑控制点
  this.addEditControlPoints();
}

编辑特性：

• 🔘 拖动边缘控制点调整半径
• 🏗️ 拖动圆心改变位置
• 📏 实时更新几何属性计算

四、多边形绘制与编辑 🔷

1. 多边形绘制实现

核心代码：

drawPolygon() {
  this.mouseTool.polygon({
    strokeColor: '#FF33FF',
    strokeOpacity: 1,
    strokeWeight: 4,
    fillColor: '#1791fc',
    fillOpacity: 0.4,
    strokeStyle: 'solid'
  });
}

实现要点：

1. ✏️ 连续点击添加顶点，双击结束绘制
2. 🧩 支持复杂多边形绘制
3. 📐 自动计算面积和周长

几何计算：

// 📏 多边形几何计算
const area = overlay.getArea();  // 内置面积计算方法
const path = overlay.getPath();
let perimeter = 0;
for (let i = 0; i < path.length; i++) {
  const j = (i + 1) % path.length;
  perimeter += path[i].distance(path[j]);  // 计算周长
}

2. 多边形编辑功能

编辑实现：

if (this.currentOverlay instanceof AMap.Polygon) {
  this.currentEditor = new AMap.PolyEditor(this.map, this.currentOverlay);
  this.currentEditor.open();
  // 🖇️ 添加顶点编辑事件
  this.setupVertexEvents();
}

编辑特性：

• 🔘 可拖动现有顶点调整形状
• ➕ 可在边上添加新顶点
• ❌ 支持删除顶点
• 🔄 实时更新几何属性计算

五、通用功能实现 ⚙️

1. 图形选择与删除

enableDelete() {
  if (this.currentOverlay) {
    this.map.remove(this.currentOverlay);
    // 🗑️ 从数组中移除...
    this.currentOverlay = null;
    this.$message.warning('图形已删除', { icon: '🗑️' });
  }
}

2. 图形信息展示

calculateOverlayInfo(overlay) {
  const info = { type: '未知' };
  // 📊 根据不同类型计算...
  this.overlayInfo = info;
  // 💬 显示信息面板
  this.showInfoPanel = true;

六、常见问题解决 ❓

• 问题1：绘制时出现卡顿

  • 🔧 解决方案：检查是否有频繁的状态更新操作

• 问题2：编辑时图形闪烁

  • 🔧 解决方案：确保编辑器实例正确管理

结语 🎯

本文详细解析了四种常见地图图形的绘制与编辑实现方案，并加入了丰富的可视化元素。掌握这些技术后，开发者可以轻松实现各种地图标注、区域划分和路径规划功能。高德地图API提供了丰富的接口，结合Vue的响应式特性，能够构建出功能强大且用户体验良好的地图应用。

完整代码示例