mockjs 导致cesium地图无法加载

 1.报错信息

mockjs 导致cesium地图无法加载_第1张图片

Uncaught (in promise) TypeError: Failed to execute 'createImageBitmap' on 'Window': The provided value is not of type '(Blob or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or ImageData or OffscreenCanvas or SVGImageElement or VideoFrame)'.

mockjs 导致cesium地图无法加载_第2张图片

3.问题分析 

搜索一番,没有发现类似问题 开始以为是cesium的key有问题,更换key,更换成高德的图层都无效 于是仔细研究报错信息,发现它说的是提供的数据格式不对,开F12查看请求数据

mockjs 导致cesium地图无法加载_第3张图片

发现请求数据http状态是304,而且是由mock.js发起的请求

3.问题解决

查了一下mock.js的工作原理,它直接替换了xhr请求,改成了自己的实现,如果路由没有匹配到,就进行跳转。这种实现方式对二进制流有较大的影响。 解决方案有两个,一个是去掉mock.js, 目前我们的项目阶段不允许。二是修改mock.js的源码。 代码路径:项目//node_modules/mockjs/dist/mock.js 大约在8360行:

mockjs 导致cesium地图无法加载_第4张图片

// 原生 XHR
                if (!this.match) {
                    this.custom.xhr.send(data)
                    return
                }

修改为

// 原生 XHR

                if (!this.match) {
                    this.custom.xhr.responseType = this.responseType
                    this.custom.xhr.send(data)
                    return
                }

当然这是一种比较偷懒的方式。修改完了以后要保存重新运行项目刷新。

解决方案来源于博客:

https://juejin.cn/post/7143579664424894472

vue2+cesium加载离线地图报错-CSDN博客 

 

你可能感兴趣的:(前端,javascript,数据库)