百度地图的DrawingManager使用

背景

当需要绘制圆形、矩形等围栏需求的时候，就需要鼠标绘制管理类。下面谈谈BMapLib.DrawingManager的使用以及遇到的问题。

类BMapLib.DrawingManager使用

参考地址
可以动态加载DrawingManager_min.js，以下是把该js下载到项目中修改使用。

应用

定义一个绘制模式文件

export const BMAP_DRAWING_MARKER = 'marker'
export const BMAP_DRAWING_POLYLINE = 'polyline'
export const BMAP_DRAWING_CIRCLE = 'circle'
export const BMAP_DRAWING_RECTANGLE = 'rectangle'
export const BMAP_DRAWING_POLYGON = 'polygon'

公用API文件

  drawingManager(map) {
    // 绘制框的样式设置
    // http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html
    let styleOptions = {
      strokeColor: #f00, // 边线颜色。
      fillColor: '#1989fa', // 填充颜色。当参数为空时，圆形将没有填充效果。
      strokeWeight: 2, // 边线的宽度，以像素为单位。
      // strokeOpacity: 0.8,     //边线透明度，取值范围0 - 1。
      fillOpacity: 0.2, // 填充的透明度，取值范围0 - 1。
      strokeStyle: 'solid' // 边线的样式，solid或dashed。
    }
    /* global BMapLib */
    return new BMapLib.DrawingManager(map, {
      isOpen: false, // 是否开启绘制模式
      enableDrawingTool: false, // 是否显示工具栏
      // drawingType: BMAP_DRAWING_CIRCLE,
      enableCalculate: false, // 绘制是否进行测距
      drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
        offset: new BMap.Size(5, 5), // 偏离值
        scale: 0.8, // 工具栏缩放比例
        drawingTypes: [
          BMAP_DRAWING_MARKER, // 画点
          BMAP_DRAWING_CIRCLE, // 画圆
          BMAP_DRAWING_POLYLINE, // 画线
          BMAP_DRAWING_POLYGON, // 画多边形
          BMAP_DRAWING_RECTANGLE // 画矩形
        ]
      },
      rectangleOptions: styleOptions, // 矩形的样式
      circleOptions: styleOptions, // 圆形的样式
      polygonOptions: styleOptions // 多边形的样式
    })
  },

遇到的坑

刚开始是动态加载DrawingManager_min.js，项目是https访问，由于该js内部引用了外部http协议的脚本，导致部分功能无法使用。所以将该js下载到本地修改源码再用。引用时需注意下面几个变量须在引用的地方声明，全局已没有这些变量。

如下可见该js内部引用了外部http协议的脚本

因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止。也可在文档中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解决。