qiankun框架下思极地图的使用

0 阅读1分钟

在开始内容之前,你需要有qiankun框架和思极地图的知识。

项目背景:公司的一个VUE2老项目,在地图上显示各省份的标记内容,地图使用的是国网的思极地图,运行后地图的部分效果如下图,但是在迁移到qiankun框架中出现了一系列的问题:SGMap.DistrictTask函数未定义,证书错误,跨域请求拒绝等问题。

screen.png

图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文件,针对上面提到的内容修改,按下面的内容调整

image.png

图2-注入全局对象global

image.png

图3-添加思极地图的服务地址

image.png

图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>