uniapp + Cesium（uniapp集成Cesium）

Cesium版本：1.131

uniapp 集成 Cesium 用的是官方推荐的 renderjs 方法。（官网地址：https://uniapp.dcloud.net.cn/tutorial/renderjs.html）

本次没有测试APP，只是测试了H5。

一、创建 uniapp 项目

二、下载 Cesium 并复制到 项目中

1. 下载Cesium：https://cesium.com/downloads/
   

2. 下载完成后解压文件
   

3. 解压后，找到 Build 目录下的 Cesium 文件
   

4. 将第三步的 Cesium 文件，复制到 项目下的 static 目录下
   

三、加载Cesium

直接上全部代码了：

<template>
    <view class="content">
        <!-- #ifdef APP-PLUS || H5 -->
        <view id="container"></view>
        <!-- #endif -->
        <!-- #ifndef APP-PLUS || H5 -->
        <view>非 APP、H5 环境不支持</view>
        <!-- #endif -->
    </view>
</template>

<script module="Cesium" lang="renderjs">
	export default {
		data() {
			return {
				domlist: null, // 动态引入dom标签合集
				viewer: null  // 三维视窗
			}
		},
		mounted() {
			this.initResources()
		},
		methods: {
			// 初始化资源，加载后例化cesium
			initResources() {
				if (this.domlist) {
					this.removeResource()
				} else {
					// 动态引入css文件
					const linkDom = document.createElement('link')
					linkDom.rel = "stylesheet"
					linkDom.href = "static/Cesium/Widgets/widgets.css"
					document.head.appendChild(linkDom)

					// var datS = this.requireResources('script', 'static/dat.gui.js')
					var cesiumS = this.requireResources('script', 'static/Cesium/Cesium.js', this.initCesium)
					this.domlist = [linkDom, cesiumS]
				}
			},
			// 动态创建script引用第三方类库
			requireResources(dom, src, callback) {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement(dom)
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = src;
				document.head.appendChild(script);
				callback && (callback instanceof Function) && (script.onload = callback.bind(this));
				return script;
			},
			// 移除动态添加的标签，避免重复添加标签
			removeResource() {
				if (this.domlist)
					for (let i = 0; i < this.domlist.length; i++) {
						document.head.removeChild(this.domlist[i])
					}
			},
			// 初始化
			initCesium() {
				// 配置 Cesium Ion Token（去 https://ion.cesium.com/tokens 获取）
				Cesium.Ion.defaultAccessToken = '';

				this.viewer = new Cesium.Viewer('container', {
					terrain: Cesium.Terrain.fromWorldTerrain(), // 加载全球地形
                    infoBox: false, // 关闭默认信息框（避免 iframe 报错）
                    // 可按需关闭其他默认控件：homeButton、geocoder 等
                    animation: false, // 隐藏动画控件
                    baseLayerPicker: false, // 隐藏底图选择器
                    geocoder: false, // 隐藏地理编码器
                    homeButton: false, // 隐藏主页按钮
                    infoBox: false, // 隐藏信息框
                    sceneModePicker: false, // 隐藏场景模式选择器
                    selectionIndicator: false, // 隐藏选择指示器
                    timeline: false, // 隐藏时间轴
                    navigationHelpButton: false, // 隐藏导航帮助按钮
                    fullscreenButton: false, // 隐藏全屏按钮
                    creditContainer: document.createElement("div"), // 隐藏版权信息
				})
				// 深度检测
                this.viewer.scene.globe.depthTestAgainstTerrain = true;
				this.viewer.scene.debugShowFramesPerSecond = true; // 显示帧数
			},
		},
		beforeDestroy() {
			this.removeResource()
		}
	}
</script>

<style>
#container {
    width: 100%;
    height: 100vh;
}
</style>

效果图：

参考文章：
https://www.zhihu.com/column/c_1732380605038358528
https://blog.51cto.com/u_16099244/7236120