乾坤框架中子系统使用百度地图三维地图无法显示的问题

乾坤框架子系统调用百度地图，使用vue-baidu-map组件只有卫星和普通模式，没法实现三维地图，所以只能改为原始的加载百度地图的api，这里最好使用懒加载方式，创建一个BMPGL.js。

export function BMPGL(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        // eslint-disable-next-line
        resolve(BMapGL)
      }
    

      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
}

页面引用import { BMPGL } from "@/api/map/bmapGL.js";

方法调用

init3DMap(){
          const that = this
          this.tdMapBox=true;
          var my_BMPGL = BMPGL
          // 传入密钥获取地图回调。
          BMPGL(this.ak).then((BMapGL) => {
              // 创建地图实例
              let map = new BMapGL.Map("threeDMap");
              // 初始化地图，设置中心点坐标和地图级别
              map.centerAndZoom({lng:this.center.lng,lat:this.center.lat}, 19);
              //开启鼠标滚轮缩放
              map.enableScrollWheelZoom(true);
              //方向
              map.setHeading(64.5);
              //倾斜角度
              map.setTilt(73)
              //设置天空颜色
              map.setDisplayOptions({
                  skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']
              })
              //地图加载完成事件
              map.addEventListener('tilesloaded', function () {
                  console.log('地图加载完成！')
              });
              // 保存数据
              this.myMap = map;
          })
          .catch((err) => {
              console.log('加载三维地图错误',err);
          });
        },

如此在子应用中就能够正常显示百度三维地图。

但是发布后在系统中测试却看不到地图，一篇空白，调试发现<di id="threeDMap"></div>中竟然是空的，啥也没有。

网上查找说是系统中调用地图api时，BMPGL.js中window.init()的window已经不是子框架中的window了，网络中api虽然调用了，但返回的window对象中根本没有BMPGL对象。init3DMap也根本没有作用，连catch都进不去。

后来看到帖子说可以把主框架的window传到子框架中，在BMPGL.js中使用主框架的window来初始化，但看到传对象的步骤太过复杂，劝退了。

上一个帖子中百度编辑器中跨端处理的经验，可以借鉴。

这里先在主框架中调用BMPGL.js，然后在主框架main.js中初始化全局BMPGL

import { BMPGL } from "@/api/map/bmapGL"

 设置全局对象

window.BMPGL = BMPGL

在子框架中做判断这里在init3DMap方法就只拿部分代码修改如下

init3DMap(){
          const that = this
          this.tdMapBox=true;
          var my_BMPGL = BMPGL
          // 传入密钥获取地图回调。
          //判断是否在框架系统中
          if(window.__POWERED_BY_QIANKUN__){
            my_BMPGL = window.BMPGL;
          }
          else{
            my_BMPGL = BMPGL
          }
          my_BMPGL(this.ak).then((BMapGL) => {
            console.log('三维地图初始化ok');
            ///......这里跟上面一样......
          }
}

这样就能正常初始化出三维地图啦。