先附上cesium包下载地址,想换别的直接改版本号
https://github.com/CesiumGS/cesium/tree/1.83
1.压缩包调用
取出压缩包里的Cesium文件夹,路径Build==》Cesium文件夹
在static文件夹里面创建一个文件夹,把Cesium文件夹放进去
2.页面调用
ps:移动版–天地图的地图服务的token不能使用pc的
<template>
<view class="content">
<view id="container"></view>
</view>
</template>
<script module="Cesium" lang="renderjs">
export default {
data() {
return {
cViewer: null,
}
},
mounted() {
// 动态引入css文件
const linkDom = document.createElement('link')
linkDom.rel = "stylesheet"
linkDom.href = "./static/lib/Cesium/Widgets/widgets.css"
document.head.appendChild(linkDom)
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = './static/lib/Cesium/Cesium.js'
script.onload = this.init.bind(this)
document.head.appendChild(script);
},
methods: {
init() {
Cesium.Ion.defaultAccessToken ='TOKEN';
this.cViewer = new Cesium.Viewer('container', {
timeline: false, // 隐藏正下方时间线
homeButton: false, // 隐藏界面右上角初始化地球位置按钮
fullscreenButton: false, // 隐藏界面右下角全屏按钮
infoBox: false, // 点击地球后的信息框
animation: false, // 隐藏界面左下角控制动画的面板
geocoder: false, //右上角 搜索
sceneModePicker: false, // 右上角 2D/3D切换
baseLayerPicker: false, // 隐藏界面左上角地图底图的切换按钮
navigationHelpButton: false, //右上角 Help
shouldAnimate: true,
selectionIndicator: false, //隐藏双击entity时候的聚焦框
skyAtmosphere: false, //去除地球外侧光圈
})
}
}
}
</script>
<style>
#container {
width: 100%;
height: 500px;
/* background: #0ff; */
}
</style>
3.报错 ‘texImage2D‘问题
我也遇到了这个问题
寻到一位博主解决了这个办法
https://blog.csdn.net/FFFKKC/article/details/123260850
方法二,修改cesium源码
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行
4.运行到模拟器
ps:真机测试也能正常加载
5. 关于打包问题
请使用原生工程打包 !
请使用原生工程打包 !!
请使用原生工程打包 !!!