【百度 JavaScript API v3.0】BMapLib.DrawingManager 鼠标绘制

地图上鼠标绘制

需求

使用工具new BMapLib.DrawingManager 在地图上绘制点线面

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

实现

第一步：在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>
<script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"  type="text/javascript"></script>
<link href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"  rel="stylesheet" />

第二步：组件中使用

<template>
  <div>
    <div id="map"></div>
    <div id="result">
      <el-button @click="clear()">清除覆盖物</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
	  drawingManager: null,
	  overlays: []
    };
  },
  mounted() {
    this.map = new BMap.Map("map");
    this.map.centerAndZoom(new BMap.Point(117.06 ,36.67), 17);
    this.map.enableScrollWheelZoom();
    this.map.enableMapClick = false; // 底图不可以点击
      
    //实例化鼠标绘制工具
    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    this.drawingManager = new BMapLib.DrawingManager(this.map, {
      isOpen: false, //是否开启绘制模式
      enableDrawingTool: true, //是否显示工具栏
      drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
        drawingModes : [ BMAP_DRAWING_CIRCLE, BMAP_DRAWING_POLYGON] // 可见的操作选项
      },
      circleOptions: styleOptions, //圆的样式
      polylineOptions: styleOptions, //线的样式
      polygonOptions: styleOptions, //多边形的样式
      rectangleOptions: styleOptions //矩形的样式
    });

    //添加鼠标绘制工具监听事件，用于获取绘制结果
    this.drawingManager.addEventListener('overlaycomplete', this.complete);  
  },
  methods: {
    // 绘制完成
    complete(e) {
      this.overlays.push(e.overlay);
    },

    // 清除所有覆盖物
    clear() {
      // var overLayers = this.map.getOverlays();
      for(var i = 0; i < this.overlays.length; i++){
        this.map.removeOverlay(this.overlays[i]);
      }  
    }
  }
}
</script>

<style lang="less">
#map {
  width: 300px;
  height: 300px;
  margin-top: 50px;
}
</style>

解析

鼠标绘制图形样式

var styleOptions = {
  strokeColor:"red",    //边线颜色。
  fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
  strokeWeight: 3,       //边线的宽度，以像素为单位。
  strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
  fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
  strokeStyle: 'solid' //边线的样式，solid或dashed。
}

鼠标绘制工具 

this.drawingManager = new BMapLib.DrawingManager(this.map, {
  isOpen: false, //是否开启绘制模式
  circleOptions: styleOptions, //圆的样式
});

鼠标绘制完成

this.drawingManager.addEventListener('overlaycomplete', this.complete);

// 绘制完成
complete(e) {
  this.overlays.push(e.overlay);
},

清除覆盖物

<div id="result">
  <el-button @click="clear()">清除覆盖物</el-button>
</div>

clear() {
  // var overLayers = this.map.getOverlays();
  for(var i = 0; i < this.overlays.length; i++){
    this.map.removeOverlay(this.overlays[i]);
  }  
}