背景
当需要绘制圆形、矩形等围栏需求的时候,就需要鼠标绘制管理类。下面谈谈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">
完美解决。