乾坤框架子系统调用百度地图,使用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');
///......这里跟上面一样......
}
}
这样就能正常初始化出三维地图啦。