解决qiankun微前端加载腾讯地图JSONP跨域问题

qiankun微前端框架加载腾讯地图会报jsonp请求跨域的问题,官网给的解决方案如下图所示：

然而并不能解决实际项目遇到的场景，qiankun框架加载腾讯地图api，腾讯地图本身会动态加载一些JSONP请求的js，从而导致JSONP跨域错误，加载不了地图，就很麻烦，算是qiankun框架的天生bug吧？于是我使用了曲线救国的方法来解决这个问题。

新建了一个腾讯地图的项目，使用iframe嵌套腾讯地图，使用postMessage互相通信。

这个子应用我是使用vue3来开发的，该子应用和iframe的通信方式如下：

因为使用到腾讯地图WebService API 的关键词输入提示的接口，需要使用jsonp请求来获取数据，这里使用vue-jsonp来发送jsonp请求。

涉及到的知识点有：

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

ECharts (Enterprise Charts 商业产品图表库)

提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

找到两个前端就能解决的方法，最后因为各种原因采用了方法二。

        方法一：

                找到地图上的全部点，然后在canvas上面重绘一次。

html2canvas(this$refstarget, {

useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题

})then((canvas) => {

let cans = canvasgetContext("2d");

//批量地图重新打点 加载

documentquerySelectorAll("#mapView_layers image")forEach((item) => {

var obj = item;

var x = itemgetAttribute("x");

var y = itemgetAttribute("y");

var itemWidth = itemgetAttribute("width");

var itemHeight = itemgetAttribute("height");

consolelog("item", item, x, y);

if (width == 8) {

cansdrawImage(obj, x, y, itemWidth, itemHeight);

} else {

cansdrawImage(

obj,

x ,

y - 1 - itemHeight / 2 ,

itemWidth,

itemHeight

);

}

});

//下面是截图代码

})

登录后复制

因为本身目标dom的position定位问题，最后打的点可能会出现偏移。

所以还要给html2canvas加几个属性： x , y , scrollX , scrollY。保险起见，再加上两个参数 width 和 height 。

本人是后面chrome测着没问题，但是给小伙伴测试的时候，他用的360浏览器还有个xx浏览器有点问题。干脆参数全加上。

screenShot() {

let canvasBox = this$refstarget;

//获取目标div位置;

var tPosition = canvasBoxgetBoundingClientRect();

consolelog("size", tPosition);

// 获取父级的宽高

const width = parseInt(windowgetComputedStyle(canvasBox)width);

const height = parseInt(windowgetComputedStyle(canvasBox)height);

html2canvas(this$refstarget, {

width: width,

height: height,

x: 0,

y: 0,

scrollY: -tPositiony,

scrollX: -tPositionx,

useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题

})then((canvas) => {

})

}

登录后复制

要是项目的地图是不可移动的，基本到这里就可以了。

但是地图只要一挪动。。一个新的bug出现了。。。。。整个地图画线打点层的偏移量和截图之前不一样。。。。 截图后，画线层偏的比原地图还要远，打点却还在原位没动过。。

这个问题需要修正svg的偏移，然后这个标注点绘制的时候也要加上一个偏移量。

地图偏移的bug后面再讲。

         方法二：（最后采用）

                把svg中所有的<image>的href路径转换为base64编码格式。简单方便，不用考虑位置什么的问题，就是有些浏览器里面加载慢。。。setTimeout有时候要设置大一点。。

screenShot() {

let canvasBox = this$refstarget;

//获取目标div位置;

var tPosition = canvasBoxgetBoundingClientRect();

consolelog("size", tPosition);

// 获取父级的宽高

const width = parseInt(windowgetComputedStyle(canvasBox)width);

const height = parseInt(windowgetComputedStyle(canvasBox)height);

//---------------------

//解决svg 内部image加载不了的问题,把image改为base64,配合setTimeout html2canvas使用

documentquerySelectorAll("#mapView_layers image")forEach((item) => {

consolelog("item", item);

var img = itemgetAttribute("xlink:href");

consolelog("href", img);

var image = new Image();

imagecrossOrigin = "";

imagesrc = img;

imageonload = () => {

var base64 = getBase64Image(image);

itemsetAttribute("xlink:href", base64); //更改href属性

};

});

//地址转为base64编码

function getBase64Image(img) {

var canvas = documentcreateElement("canvas");

canvaswidth = imgwidth;

canvasheight = imgheight;

var ctx = canvasgetContext("2d");

ctxdrawImage(img, 0, 0, imgwidth, imgheight);

var ext = imgsrcsubstring(imgsrclastIndexOf("") + 1)toLowerCase();

var dataURL = canvastoDataURL("image/" + ext);

return dataURL;

}

setTimeout(() => {

html2canvas(this$refstarget, {

width: width,

height: height,

x: 0,

y: 0,

scrollY: -tPositiony,

scrollX: -tPositionx,

useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题

})then((canvas) => {

})

}, 200);

}

登录后复制

 故事的开头是这样的，前端根据经纬度 获取 附近的 服务区 （我用es 做的 geo point 很简单），还有就是根据省份 获取 获取对应的 疫情信息，我说你既然能获取金纬度 调用一下 百度 api 就行了 还能节约服务器带宽，他说 不会 你还是给我写个接口吧， 内心（哈哈哈 折磨简单 都不会弄，接口都给他找好了），他说有点麻烦，呵呵呵，我当然反手 几分钟 就给他写了一个接口。所以说 后台就是吊，哎 没意思。

>

以上就是关于解决qiankun微前端加载腾讯地图JSONP跨域问题全部的内容，包括:解决qiankun微前端加载腾讯地图JSONP跨域问题、我用的echarts中国地图怎么获取到当前选中的区域id或者名称、gis多个图层地图用htmlcanvas截图获取不到等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！