百度地图 js踩坑

鼠标绘制库 bmap-draw 避坑

1. 距离测量工具无法修改单位为 米

根据官方文档 ：距离测量类

unit string 测量所用单位制，默认为千米'kilometers'，另外可接受米'metric'

无法对其进行修改

 this.distance = new DistanceMeasure(scene, {
        unit: "metric",
        isSeries, // 不连续测量
        ...mergegOpts,
      });

解决：
1.定位错误信息抛出位置

2.找到有效单位

3.修改为米级

unit: "meters",

2.百度地图使用 html2canvas 无法截图

直接使用html2canvas 截图，会存在canvas白屏

解决：

      //解决百度地图截图后空白问题
      HTMLCanvasElement.prototype.getContext = (function (origFn) {
        return function (type, attributes) {
          if (type === "webgl") {
            attributes = Object.assign({}, attributes, {
              preserveDrawingBuffer: true,
            });
          }
          return origFn.call(this, type, attributes);
        };
      })(HTMLCanvasElement.prototype.getContext);

拓展：

html2canvas 对 canvas 绘制的背景图截图白屏

原因：img
解决：图片获取过程开启 cors

img.crossOrigin = "*";

3.百度地图使用 setOptions 修改绘制物样式配置

问题描述：使用百度绘制库 BMap Draw ，绘制圆 添加默认配置后 使用setOptions 边线不能设置

解决：strokeOpacity不能设置为0 ,否则边线设置无效

4. 点击覆盖物，获取不到选中的覆盖物

根据官方文档提供的选中覆盖物方法，进行点选，选中的覆盖物为空

解决：

 //开启选择
    openSelet() {
      this.select.open();
      this.scene.addEventListener(OperateEventType.COMPLETE, (e) => {
        switch (e.target.from) {
          //完成绘制
          case ActionStatus.DRAW_ON_MAP:
		  //添加选中
            e.target.overlay.addEventListener("click", (e) => {
              this.selectedOverlay = [e.target];
              this.setActiveOverlay(e.target);
            });
            break;
			//todo...