vue结合百度地图（vue-baidu-map）绘制多边形，支持编辑

ゞ浴缸里的玫瑰 2022-11-21 09:59 371阅读 0赞

一、安装百度地图

npm install vue-baidu-map --save
    // 或者
    yarn install vue-baidu-map

二、在main.js中引用

import BMap from 'vue-baidu-map'
    
    Vue.use(BaiduMap, {
      // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
      ak: 'YOUR_APP_KEY'
    })

三、看一下具体代码吧

<template>
      <div class="mapbox">
        <baidu-map
          :center="center"
          :zoom="zoom"
          :map-click="false"
          @mousemove="syncPolygon"
          @ready="handler"
          style="height:800px"
          @click="paintPolygon"
          @rightclick="newPolygon"
        >
          <bm-polygon
            :path="path"
            v-for="path of polygonPath.paths"
            :key="path.toString()"
            stroke-color="blue"
            fill-color="red"
            :fill-opacity="0.8"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            @click="alertpath"
            :editing="true"  //覆盖物可编辑
            @lineupdate="updatePolygonPath"  //为了监测编辑覆盖物事件
          />
          <bm-control>
            <button @click="toggle('polygonPath')">{
       { polygonPath.editing ? '停止绘制' : '开始绘制' }}</button>
          </bm-control>
        </baidu-map>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Polygon',
      data () {
        return {
          haha: '百度地图',
          center: { lng: 116.412732, lat: 39.911707 },
          zoom: 13,
          polygonPath: {
            editing: false,
            paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
          }
        }
      },
      mounted: function () {
      },
      methods: {
        handler ({ BMap, map }) {
          console.log(BMap, map)
          map.enableScrollWheelZoom(true)
          // map.centerAndZoom('青岛市', 13)
        },
        getClickInfo (e) {
          console.log(e.point.lng)
          console.log(e.point.lat)
        },
        // 开启多边形绘制
        toggle (name) {
          this[name].editing = !this[name].editing
          // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
          if (this.polygonPath.paths && this.polygonPath.editing) {
            this.polygonPath.paths = []
          }
        },
        // 鼠标移动时
        syncPolygon (e) {
          if (!this.polygonPath.editing) {
            return
          }
          const { paths } = this.polygonPath
          if (!paths.length) {
            return
          }
          const path = paths[paths.length - 1]
          if (!path.length) {
            return
          }
          if (path.length === 1) {
            path.push(e.point)
          }
          this.$set(path, path.length - 1, e.point)
        },
        // 鼠标右键点击时往路径里push一个面
        newPolygon (e) {
          if (!this.polygonPath.editing) {
            return
          }
          // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
          this['polygonPath'].editing = !this['polygonPath'].editing
          const { paths } = this.polygonPath
          if (!paths.length) {
            paths.push([])
          }
          const path = paths[paths.length - 1]
          path.pop()
          if (path.length) {
            paths.push([])
          }
        },
        // 鼠标左键多边形绘制
        paintPolygon (e) {
          if (!this.polygonPath.editing) {
            return
          }
          const { paths } = this.polygonPath
          !paths.length && paths.push([])
          paths[paths.length - 1].push(e.point)
        },
        alertpath (e) {
          console.log(e.currentTarget.so)
          console.log(this.polygonPath.paths[0])
        },
    	updatePolygonPath(e) {
    		//编辑覆盖物时触发，获取坐标点集合	
    	   this.polygonPath.paths[0] = e.target.getPath()
    	}
      }
    }

如何取得多边形编辑之后的坐标点集合？

被这个问题困扰了住了，先在网上找了好多资料都没找到，在百度地图api文档，发现getPath()方法可以获得，但是找不到多边形的原型，最后在vue-baidu-map官网发现lineupdate事件可以监听到

![20201031182423852.png][]

地图可编辑状态

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

参考博客：[https://www.cnblogs.com/caoxen/p/11352488.html][https_www.cnblogs.com_caoxen_p_11352488.html]

[20201031182423852.png]: /images/20221120/1a9b59e3bf5f435faf50a1f9f819e989.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221120/8b0aec5fa5754686ab45ed7e1916b6bd.png
[https_www.cnblogs.com_caoxen_p_11352488.html]: https://www.cnblogs.com/caoxen/p/11352488.html