uni-app引入Cesium报错,Failed to execute ‘texImage2D‘ on ‘WebGLRenderingContext‘

Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded

uni-app引入cesium,在vue页面的视图层引入cesium后,在h5端正常显示cesium地图,在app端或者手机模拟器端不显示地图,无法加载地图,报Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’,显示其中有图片跨域所以无法加载。

解决办法一

版本不符合问题

  1. 使用cesium1.83版本测试下;
  2. 安卓版本或者手机webview不符合;

解决办法二

直接修改cesium源码,添加r.crossOrigin = “anonymous”。

function loadImageElement(e, t, i) {
var r = new Image;
r.crossOrigin = "anonymous"; // 添加这行代码
r.onload = function () {
i.resolve(r)
}, r.onerror = function (e) {
i.reject(e)
}, t && (TrustedServers.contains(e) ? r.crossOrigin = "use-credentials" : r.crossOrigin = ""), r.src = e
}
// 差不多3026行
  • 10
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 26
    评论
UniApp 是一种基于 Vue.js 的跨平台应用开发框架,它可以让你用一套代码同时构建 Web、iOS、Android 等多个平台的应用。Cesium 是一款强大的开源 3D 地图引擎,常用于创建高度交互式的地球空间可视化应用程序。 要将 Cesium 引入UniApp 中,你需要按照以下步骤操作: 1. 安装依赖:首先,确保你的 UniApp 项目已经安装了 Vue CLI。然后,在 `npm` 或 `yarn` 包管理器中安装 Cesium 的 Vue 组件库,例如官方的 Cesium for Vue(如果有的话)或第三方封装的组件。命令可能类似这样: ```bash npm install @czml-viewer/czml-vue --save ``` 2. 引入库文件:在你的 Vue 文件(如 `main.vue` 或组件内)中,导入 Cesium 组件: ```html <template> <div id="app"> <czml-viewer ref="cesiumViewer"></czml-viewer> </div> </template> <script> import CesiumViewer from '@czml-viewer/czml-vue'; export default { components: { CesiumViewer }, // ... } </script> ``` 3. 初始化和配置:在 Vue 实例的 `mounted` 生命周期钩子中,初始化 Cesium Viewer,并配置地图和视图: ```js mounted() { this.$refs.cesiumViewer.initialize({ scene: { imageryProvider: new Cesium.CesiumIonImageryProvider({ url: 'https://assets.cesium.com/ceylon-blue/{z}/{x}/{y}.jpg' }), baseLayerPicker: false }, pickingOptions: { pickType: Cesium.PickType.POINT } }); }, ``` 4. 使用 CZML 格式的数据:Cesium支持 CZML (ColladaZ Markup Language) 格式来加载3D模型。你可以从后端获取 CZML 数据并在需要的地方展示。
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值