vue项目引入百度地图BMapGL鼠标绘制工具

<template>
  <div class="map">
    <div id="container" style="width: 100%; height: 100%;"></div>
    <ul class="drawing-panel">
      <!-- <li class="bmap-btn bmap-polyline" id="polyline" @click="draw('polyline')"></li> -->
      <li class="bmap-btn bmap-rectangle" id="rectangle" @click="draw('rectangle')"></li>
      <li class="bmap-btn bmap-polygon" id="polygon" @click="draw('polygon')"></li>
      <li class="bmap-btn bmap-circle" id="circle" @click="draw('circle')"></li>
    </ul>
  </div>
</template>

<script>
import "./utils/drawingmanagermin.js"
export default {
  data() {
    return {
      styleOptions: {
        strokeColor: "#5E87DB", // 边线颜色
        fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2, // 边线宽度，以像素为单位
        strokeOpacity: 1, // 边线透明度，取值范围0-1
        fillOpacity: 0.2, // 填充透明度，取值范围0-1
      },
      labelOptions: {
        borderRadius: "2px",
        background: "#FFFBCC",
        border: "1px solid #E1E1E1",
        color: "#703A04",
        fontSize: "12px",
        letterSpacing: "0",
        padding: "5px",
      },
      drawingManager: null,
      drawingType:'',
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      var map = new window.BMapGL.Map("container", { enableMapClick: false });    // 创建Map实例
      //初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(new BMapGL.Point(113.53048914548623, 22.132325057549032), 15)
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);

      var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
      map.addControl(navi3DCtrl);

      var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
      map.addControl(scaleCtrl);

      var zoomCtrl = new BMapGL.ZoomControl();   // 添加缩放控件
      map.addControl(zoomCtrl);
      // 此项设置为初始化地图倾斜角度，不设置该项初始化时地图为2d
      map.setTilt(50)

      map.setMapStyleV2({ styleJson: stylejson });

      this.drawingManager = new BMapGLLib.DrawingManager(map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true, // 是否开启边界吸附功能
        sorptiondistance: 20, // 边界吸附距离
        circleOptions: this.styleOptions, // 圆的样式
        polylineOptions: this.styleOptions, // 线的样式
        polygonOptions: this.styleOptions, // 多边形的样式
        rectangleOptions: this.styleOptions, // 矩形的样式
        labelOptions: this.labelOptions, // label样式
      });
    },
    draw(str) {
      var arr = document.getElementsByClassName("bmap-btn");
      for (var i = 0; i < arr.length; i++) {
        arr[i].style.backgroundPositionY = "0";
      }
      document.getElementById(str).style.backgroundPositionY = "-52px";
      // 进行绘制
      if ( this.drawingManager._isOpen && this.drawingManager.getDrawingMode() === str ) {
        this.drawingManager.close();
      } else {
        this.drawingManager.setDrawingMode(str);
        this.drawingManager.open();
      }
    }
  }
}

</script>
<style lang="scss" scoped>
@import url('./utils/DrawingManager.min.css');
#map_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.map {
  width: 100%;
  height: 100%;
}

.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}

.BMap_mask {
  z-index: 999;
}



/* ```` */
ul li {
  list-style: none;
}

.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: 0.75rem 1.25rem;
  margin-left: 1.25rem;
  position: fixed;
  top: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.drawing-panel {
  z-index: 999;
  position: fixed;
  right: 3.5rem;
  top: 2.5rem;
  // margin-left: 2.5rem;
  padding-left: 0;
  border-radius: 0.25rem;
  height: 47px;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.bmap-btn {
  border-right: 1px solid #d2d2d2;
  float: left;
  width: 64px;
  height: 100%;
  background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
  cursor: pointer;
}


.drawing-panel .bmap-rectangle {
  background-position: -325px 0;
}

.drawing-panel .bmap-polygon {
  background-position: -260px 0;
}

.drawing-panel .bmap-circle {
  background-position: -130px 0;
}
</style>

这个地方需要引入两个源码文件，自己去全选复制后放到对应文件内就行了。

http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css

http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js