【vue】通过百度地图实现鼠标绘制多边形打点功能

前言

今天接到这么一个需求：打开地图后，地图上显示提前预设好的区域。
实现方法：
1，通过高德或百度地图的鼠标绘制功能可以实现
2，先在地图上将区域选好并保存，显示时可以根据保存的区域来渲染。
3，但百度地图的鼠标绘制功能更强大完善，使用起来也简单一些，所以最后决定使用百度地图

将代码原封不动的复制到你的项目之后可实现的功能：
1，保存选中多边形的经纬度，多个多边形以二位数组形式保存；
2，清除上一个编辑完成的多边形；
3，清除所有多边形。

一、封装loadBaiDuDrawMap

1，新建一个loadBMap.js文件，将以下代码粘贴进去，将xxx修改为你申请的key

const ak = "xxx"; // 百度的地图密钥

// 异步加载百度地图
function loadBaiDuMap() {
  return new Promise(function (resolve, reject) {
    try {
      resolve(BMapGL);
    } catch (err) {
      window.init = function () {
        resolve(BMapGL);
      };
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`;
      script.onerror = reject;
      document.body.appendChild(script);
    }
  });
}
export { loadBaiDuMap };

// 异步加载百度地图及绘制工具
function loadBaiDuDrawMap() {
  return loadBaiDuMap().then((BMapGL) => {
    let loaded = false;
    try {
      loaded = BMapGLLib && BMapGLLib.DrawingManager;
    } catch (err) {
      loaded = false;
    }
    if (!loaded) {
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js";
      document.body.appendChild(script);
      let link = document.createElement("link");
      link.rel = "stylesheet";
      link.href =
        "http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css";
      document.body.appendChild(link);
    }
    return BMapGL;
  });
}
export { loadBaiDuDrawMap };

二、在页面中调用loadBaiDuDrawMap

<template>
  <div class="home">
    <!-- 地图容器 -->
    <div id="container"></div>

    <div class="btns">
      <button @click="draw">开始绘制多边形</button>
      <button @click="clear">清空所有多边形</button>
      <button @click="clearLast" :disabled="isDisable">清空上一个多边形</button>
    </div>
  </div>
</template>

<script>
import { loadBaiDuDrawMap } from "@/utils/loadBMap.js";
export default {
  name: "Home",
  data() {
    return {
      isDisable: true,
      map: null,
      // 多边形样式
      styleOptions: {
        strokeColor: "#5E87DB", // 边线颜色
        fillColor: "#5E87DB", // 填充颜色
        strokeWeight: 2, // 边线宽度
        strokeOpacity: 1, // 边线透明度
        fillOpacity: 0.2, // 填充透明度
      },
      polygons: [], // 所有多边形
      polygonPaths: [], // 所有坐标
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      loadBaiDuDrawMap().then((BMapGL) => {
        this.map = new BMapGL.Map("container");
        const point = new BMapGL.Point(114.031761, 22.542826);
        // 初始化地图，设置中心点坐标和地图级别
        this.map.centerAndZoom(point, 19);
        //开启鼠标滚轮缩放
        this.map.enableScrollWheelZoom(true);
      });
    },
    draw() {
      const drawingManager = new BMapGLLib.DrawingManager(this.map, {
        rectangleOptions: this.styleOptions,
      });
      drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
      drawingManager.open();

      drawingManager.addEventListener("polygoncomplete", (e) => {
        this.polygons.push(e);
        this.polygonPaths.push(e.getPath());

        if (this.polygons.length > 1) {
          this.isDisable = false;
        }
      });
    },

    clear() {
      this.map.clearOverlays();
      this.polygons = [];
      this.polygonPaths = [];
    },

    clearLast() {
      const overlays = this.map.getOverlays();
      let length = overlays.length;
      const lastOverlay = overlays[length - 1];

      this.map.removeOverlay(lastOverlay);
      if (length <= 2) {
        this.isDisable = true;
      }
    },
  },
};
</script>

<style scoped>
#container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.btns {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}
</style>

总结

loadBaiDuDrawMap中的代码没有特殊需求的话只需要将key值改为你的key值就行。页面中可根据自己需求随意修改扩展