vue-baidu-map 绘制多边形

一、效果图

二、安装百度地图

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: '*******'
})

四、代码

<template>
  <div class="draw-map">
    <baidu-map
      :center="center"
      :zoom="zoom"
      :map-click="false"
      @mousemove="syncPolygon"
      @ready="handler"
      style="height:500px"
      @click="paintPolygon"
      @rightclick="newPolygon"
      :scroll-wheel-zoom="true"
    >
      <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 {
      center: {
        lng: 117.233486,
        lat: 31.826972,
      },

      zoom: 13,
      polygonPath: {
        editing: false,
        paths: [], // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
      },
    };
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      //map.disableDoubleClickZoom(); //禁止双击地图放大
      //禁止双指缩放disablePinchToZoom()
    },
    // 开启多边形绘制
    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);
      console.log(this.polygonPath);
    },
    alertpath(e) {
      console.log(e.currentTarget.so);
      console.log(this.polygonPath.paths[0]);
    },
    updatePolygonPath(e) {
      //编辑覆盖物时触发，获取坐标点集合
      this.polygonPath.paths[0] = e.target.getPath();
      console.log(this.polygonPath);
    },
  },
};
</script>
<style lang="scss" scoped>
.draw-map {
  width: 100%;
  height: 500px;
}
</style>