Vue结合百度地图(vue-baidu-map)：多边形绘制实战指南

一、技术选型与组件介绍

在WebGIS开发中，百度地图JavaScript API凭借其丰富的功能接口和稳定的性能成为热门选择。vue-baidu-map作为官方推荐的Vue组件封装库，将原生API深度集成到Vue生态中，开发者可通过声明式语法快速构建地图应用。

1.1 核心优势

Vue响应式集成：组件状态与Vue数据模型双向绑定
简化API调用：将复杂的原生方法封装为组件属性
类型安全：提供完整的TypeScript类型定义
生态兼容：与Vue Router、Vuex等工具无缝协作

1.2 版本兼容性

vue-baidu-map版本	Vue版本	百度地图JS API版本
0.21.x	2.x	3.0+
1.0.0+	3.x	3.0+

建议使用最新稳定版（撰写时为1.0.12），可通过npm install vue-baidu-map@latest安装。

二、基础环境搭建

2.1 申请百度地图AK

登录百度地图开放平台
创建应用并选择”浏览器端”类型
获取访问密钥（AK），注意启用JavaScript API服务

2.2 项目初始化

vue create map-polygon-demo
cd map-polygon-demo
npm install vue-baidu-map

2.3 全局配置（推荐）

在main.js中配置：

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '您的AK' // 实际开发建议通过环境变量管理
})

三、多边形绘制实现

3.1 基础地图组件

<template>
  <baidu-map 
    class="map-container"
    :center="center"
    :zoom="zoom"
    @ready="handleMapReady"
  >
    <!-- 多边形将在这里添加 -->
  </baidu-map>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      map: null
    }
  },
  methods: {
    handleMapReady({ BMap, map }) {
      this.map = map
      // 后续操作在此进行
    }
  }
}
</script>
<style>
.map-container {
  width: 100%;
  height: 600px;
}
</style>

3.2 静态多边形绘制

使用bm-polygon组件：

<baidu-map ...>
  <bm-polygon
    :path="polygonPath"
    :stroke-color="strokeColor"
    :fill-color="fillColor"
    :stroke-opacity="0.8"
    :fill-opacity="0.4"
    :stroke-weight="2"
    @click="handlePolygonClick"
  />
</baidu-map>
<script>
export default {
  data() {
    return {
      polygonPath: [
        { lng: 116.403765, lat: 39.920883 },
        { lng: 116.410703, lat: 39.897555 },
        { lng: 116.402292, lat: 39.892353 },
        { lng: 116.389846, lat: 39.888013 }
      ],
      strokeColor: '#3388ff',
      fillColor: '#3388ff'
    }
  },
  methods: {
    handlePolygonClick(e) {
      console.log('多边形点击坐标:', e.point)
    }
  }
}
</script>

3.3 动态绘制实现

完整动态绘制示例：

<template>
  <div>
    <button @click="startDrawing">开始绘制</button>
    <button @click="clearDrawing" :disabled="!isDrawing">清除</button>
    <baidu-map ...>
      <bm-polygon
        v-if="polygonPath.length > 2"
        :path="polygonPath"
        stroke-color="#ff0000"
        fill-color="#ff000033"
      />
      <bm-marker
        v-for="(point, index) in polygonPath"
        :key="index"
        :position="point"
        @click="removePoint(index)"
      />
    </baidu-map>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDrawing: false,
      polygonPath: [],
      drawingOverlay: null
    }
  },
  methods: {
    startDrawing() {
      this.isDrawing = true
      this.polygonPath = []
      // 创建鼠标绘制工具
      const drawingManager = new BMapLib.DrawingManager(this.map, {
        isOpen: true,
        enableDrawingTool: false,
        drawingMode: BMAP_DRAWING_POLYGON
      })
      drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)
      drawingManager.addEventListener('polygoncomplete', (polygon) => {
        this.polygonPath = polygon.getPath().map(p => ({
          lng: p.lng,
          lat: p.lat
        }))
        this.isDrawing = false
        this.map.removeControl(drawingManager)
      })
    },
    // 替代方案：纯前端实现
    initManualDrawing() {
      this.map.addEventListener('click', (e) => {
        if (!this.isDrawing) return
        this.polygonPath.push({
          lng: e.point.lng,
          lat: e.point.lat
        })
        // 绘制临时线（需要额外实现）
        this.updateTemporaryLine()
        // 闭合多边形
        if (this.polygonPath.length > 2 && e.overlay) {
          this.completePolygon()
        }
      })
    },
    removePoint(index) {
      this.polygonPath.splice(index, 1)
    },
    clearDrawing() {
      this.polygonPath = []
      this.isDrawing = false
    }
  }
}
</script>

四、高级功能实现

4.1 编辑现有多边形

// 创建可编辑多边形
const polygon = new BMap.Polygon(this.polygonPath, {
  strokeColor: '#3388ff',
  fillColor: '#3388ff33'
})
this.map.addOverlay(polygon)
// 启用编辑
const editor = new BMapLib.PolygonEditor(this.map, polygon)
editor.open()
// 监听编辑事件
editor.addEventListener('adjust', (e) => {
  this.polygonPath = e.currentPolygon.getPath().map(p => ({
    lng: p.lng,
    lat: p.lat
  }))
})

4.2 样式定制方案

属性	类型	说明	示例值
strokeColor	String	边框颜色	‘#ff0000’
fillColor	String	填充颜色	‘#ff000033’
strokeWeight	Number	边框宽度	2
strokeOpacity	Number	边框透明度	0.8
fillOpacity	Number	填充透明度	0.4
strokeStyle	String	边框样式	‘dashed’

4.3 性能优化策略

复杂多边形简化：使用BMap.Polygon.simplify()方法
分块渲染：超过1000个顶点时拆分多边形
事件节流：对移动端拖动事件进行节流处理
Web Worker：将坐标计算任务放到Worker线程

五、常见问题解决方案

5.1 跨域问题处理

确保AK启用了所有需要的服务
检查控制台是否有Invalid Key错误

本地开发时配置devServer代理：

// vue.config.js
module.exports = {
devServer: {
 proxy: {
   '/api': {
     target: 'https://api.map.baidu.com',
     changeOrigin: true,
     pathRewrite: { '^/api': '' }
   }
 }
}
}

5.2 移动端适配

/* 移动端样式优化 */
@media (max-width: 768px) {
  .map-container {
    height: 400px;
  }
  /* 禁用双击缩放 */
  .bm-view {
    touch-action: none;
  }
}

5.3 坐标系转换

百度地图使用BD-09坐标系，如需与其他系统交互：

// GCJ-02转BD-09
function convertGCJToBD(lng, lat) {
  const x_PI = 3.14159265358979324 * 3000.0 / 180.0
  const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI)
  const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI)
  const bdLng = z * Math.cos(theta) + 0.0065
  const bdLat = z * Math.sin(theta) + 0.006
  return { lng: bdLng, lat: bdLat }
}

六、最佳实践建议

组件拆分：将地图功能封装为独立组件
状态管理：复杂应用使用Vuex管理地图状态
错误处理：监听地图的tilesloaded和moveend事件
按需加载：使用动态import加载地图组件
测试策略：使用Cypress进行端到端测试

七、完整示例项目结构

src/
├── components/
│   ├── MapContainer.vue      # 基础地图组件
│   ├── DrawingTools.vue      # 绘制工具组件
│   └── PolygonEditor.vue     # 多边形编辑器
├── utils/
│   └── mapHelper.js          # 坐标转换等工具
├── store/
│   └── modules/
│       └── map.js            # Vuex状态管理
└── views/
    └── MapDemo.vue           # 主页面

通过本文的详细讲解，开发者可以全面掌握vue-baidu-map中多边形绘制的完整流程，从基础环境搭建到高级功能实现，覆盖了实际开发中的核心场景。建议结合官方文档和示例项目进行深入实践，不断提升地图应用开发能力。