在开始内容之前,你需要有qiankun框架和思极地图的知识。
项目背景:公司的一个VUE2老项目,在地图上显示各省份的标记内容,地图使用的是国网的思极地图,运行后地图的部分效果如下图,但是在迁移到qiankun框架中出现了一系列的问题:SGMap.DistrictTask函数未定义,证书错误,跨域请求拒绝等问题。
图1-效果
官网方法
由于我们的项目是vue项目,官网介绍的使用方式是web端使用方法JS-SDK,在引入maps.js后,maps.js会自动加载CSS资源和声明的插件。
官网中没有提到npm方式的使用方法。
qiankun方法
思极地图使用内部的initApiURI方法来加载CSS资源,但是在qiankun的微应用中此方法的逻辑出现跳脱,不能正常加载CSS资源,地图插件使用的get请求获取插件内容并通过new Function()方式注入到SGMap对象中,由于qiankun改变了请求的时机和逻辑,最终插件对象注入到了qiankun的未代理的window对象中,再使用SGMap.
DistrictTask这类组件是报函数未定义。
解决方案就是修改官网的代码,下载官网的maps.js文件,针对上面提到的内容修改,按下面的内容调整
图2-注入全局对象global
图3-添加思极地图的服务地址
图4-绑定global为插件的window对象
使用 在项目中的public目录中添加修改后的maps.js文件,在index.html中添加如下内容
<script type='text/javascript'>window.gisApiUrl="https://map.sgcc.com.cn"</script>
<script src="./maps.js"></script>