百度地图的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">完美解决。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值