目录
一、介绍
二、创建和基础配置
2.1 使用vite创建vue3项目
2.2 安装所需依赖
2.3 修改配置文件vite.config.js
2.4 配置路由文件
2.5 使用路由文件
三、使用cesium原本的进行渲染
3.1 渲染效果
3.2 代码实现
3.2.1 默认效果代码
3.2.2 空白地图效果代码
3.2.3 修改默认视角代码
3.2.4 解决控制台报错
四、使用天地图进行渲染
4.1 渲染效果
4.2 代码实现
4.2.1 天地图矢量底图效果代码
4.2.2 天地图矢量底图叠加矢量注记效果代码
4.2.3 天地图影像底图效果代码
4.2.4 天地图影像底图叠加影像注记效果代码
五、使用OSM地图进行渲染
5.1 渲染效果
5.2 代码实现
5.2.1 HOT瓦片效果代码
5.2.2 标准 OpenStreetMap 瓦片效果代码
六、使用高德地图进行渲染
6.1 渲染效果
6.2 代码实现
6.2.1 矢量底图效果代码
6.2.2 影像底图叠加影像注记效果代码
一、介绍
CesiumJS 是一个开源 JavaScript 库，用于创建具有最佳性能、精度、视觉质量和易用性的世界级 3D 地球仪和地图。从航空航天到智慧城市再到无人机，各行各业的开发人员都使用 CesiumJS 创建交互式 Web 应用程序来共享动态地理空间数据。
CesiumJS 基于开放格式构建，旨在为海量数据集提供强大的互操作性和扩展能力。
- 从 Cesium ion 或其他来源以 3D 平铺和其他标准格式流式传输
- 在高精度 WGS84 地球上进行可视化和分析
- 与桌面或移动设备上的用户共享
✨ 相关网址：
官网文档：Cesium: The Platform for 3D Geospatial
中文文档：Cesium中文api文档 | Index - Cesium Documentation
✨ 官网上提供的一些示例：
Hello World - Cesium Sandcastle
https://sandcastle.cesium.com/
二、创建和基础配置
在vue3中进行渲染的时候需要使用cesium中提供的Token，所以使用之前需要先自行注册。
获取地址：Access Tokens | Cesium ion
2.1 使用vite创建vue3项目
yarn create vite cesium-basic --template vue2.2 安装所需依赖
# 先进入到项目的根目录，然后再进行相关依赖的安装
cd cesium-basicyarnyarn add sass vue-router -Dyarn add cesium vite-plugin-cesium -D2.3 修改配置文件vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入cesium插件
import cesium from 'vite-plugin-cesium'// https://vite.dev/config/
export default defineConfig({plugins: [vue(), cesium()],// 配置路径别名resolve: {alias: {'@': '/src'}}
})
2.4 配置路由文件
在src文件夹下创建router文件夹，在其下创建index.js路由配置文件，配置内容如下：
// 引入需要的模块
import { createRouter, createWebHistory } from 'vue-router'// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [{path: '/',component: () => import('@/pages/Cesium/index.vue'),},{path: '/tianditu/vector',component: () => import('@/pages/Tianditu/Vector.vue'),},{path: '/tianditu/screenage',component: () => import('@/pages/Tianditu/Screenage.vue'),},{path: '/google',component: () => import('@/pages/Google/index.vue'),},{path: '/osm',component: () => import('@/pages/OSM/index.vue'),}
]// 创建路由
const router = createRouter({history: createWebHistory(),routes
})// 导出路由
export default router2.5 使用路由文件
在入口文件main.js中引入路由文件并使用：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')
三、使用cesium原本的进行渲染
3.1 渲染效果
3.2 代码实现
3.2.1 默认效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'onMounted(() => {Cesium.Ion.defaultAccessToken = "替换为你的token"// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer')})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}
</style>3.2.2 空白地图效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'onMounted(() => {Cesium.Ion.defaultAccessToken = "替换为你的token"// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer'，{geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>3.2.3 修改默认视角代码
// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)3.2.4 解决控制台报错
const viewer = new Cesium.Viewer('cesiumContainer',{/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})四、使用天地图进行渲染
天地图官网：国家地理信息公共服务平台 天地图 (tianditu.gov.cn)
使用天地图的话需要先申请成为开发者，然后创建应用得到应用的key，因为后续的代码需要用到这个key。
4.1 渲染效果
4.2 代码实现
Cesium中WebMapTileServiceImageryProvider配置项的说明：
属性 类型 默认值 描述 url Resource | String WMTS GetTile操作的基本URL（用于KVP编码的请求）或tile-URL模板（用于RESTful请求）。tile-URL模板应包含以下变量：{style}，{TileMatrixSet}，{TileMatrix}，{TileRow}，{TileCol}。如果实际值是硬编码的，或者服务器不想需要，则前两个是可选的。{s}关键字可用于指定子域。
layer String WMTS请求层名称 style String WMTS请求的样式名称 format String ‘image/jpeg’ 【可选】从服务器检索图像的MIME类型 tileMatrixSetID
String 用于WMTS请求的TileMatrixSet的标识符 show Boolean true 控制图层在初始化时隐藏 更多属性可参考：Resource - Cesium Documentation
4.2.1 天地图矢量底图效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'// 天地图的应用key
const webKey = "修改为自己的key"onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "修改为自己的token"// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})// 矢量底图viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({// url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + webKey,url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=" + webKey,layer: "tdtVecBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: false}));
})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>4.2.2 天地图矢量底图叠加矢量注记效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'// 天地图的应用key
const webKey = "修改为自己的key"onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "修改为自己的token"// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})// 矢量底图viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({// url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + webKey,url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=" + webKey,layer: "tdtVecBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: false}));//矢量注记viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + webKey,// url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=image%2Fjpeg&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=" + webKey,layer: "tdtAnnoLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible"}));
})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>4.2.3 天地图影像底图效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'// 天地图的应用key
const webKey = "修改为自己的key"onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "修改为自己的token"// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})//影像底图viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({// url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + webKey,url: "http://t0.tianditu.gov.cn/img_w/wmts" + webKey,layer: "tdtBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: false}));})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>4.2.4 天地图影像底图叠加影像注记效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'// 天地图的应用key
const webKey = "修改为自己的key"onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "修改为自己的token"// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})//影像底图viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({// url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + webKey,url: "http://t0.tianditu.gov.cn/img_w/wmts" + webKey,layer: "tdtBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: false}));
//影像注记viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({// url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + webKey,url: "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + webKey,layer: "tdtAnnoLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: false}));})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>五、使用OSM地图进行渲染
5.1 渲染效果
5.2 代码实现
5.2.1 HOT瓦片效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "替换成自己的token"// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})// OSM地图viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: 'https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png',subdomains: ["a", "b", "c", "d"],}));
})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>5.2.2 标准 OpenStreetMap 瓦片效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "修改为自己的token"// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})// OSM地图viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",subdomains: ["a", "b", "c", "d"],}));
})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>六、使用高德地图进行渲染
6.1 渲染效果
6.2 代码实现
6.2.1 矢量底图效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "替换成自己的token"// 设置cesium默认视角，设置到中国Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})// 高德矢量地图viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",subdomains: ["1", "2", "3", "4"],}))
})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>6.2.2 影像底图叠加影像注记效果代码
<template><div id="cesiumContainer"></div>
</template><script setup>
// 导入cesium
import { onMounted } from 'vue'
import * as Cesium from 'cesium'onMounted(() => {// 设置Cesium的Token// https://ion.cesium.com/tokens?page=1Cesium.Ion.defaultAccessToken = "设置为自己的token"// 设置cesium默认视角，设置到济南Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5,// 西边经度20.0,// 南边纬度110.4,// 东边经度61.2 // 北边纬度)// 初始化cesiumconst viewer = new Cesium.Viewer('cesiumContainer',{terrain: Cesium.Terrain.fromWorldTerrain(),//用于启用全球地形数据/* 由于信息框是使用iframe实现的控制台会一直报错，关闭之后即可解决该报错Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow - scripts' permission is not set.*/infoBox: false,// 是否显示信息提示窗口geocoder: false,// 是否显示搜索框homeButton: false,// 是否显示home键fullscreenButton: false, // 是否显示全屏按钮animation: false,// 动画控件sceneModePicker: false,// 场景模式选择器,就是控制二三维的那个timeline: false,// 时间轴navigationHelpButton: false,// 导航帮助提示按钮baseLayerPicker: false,// 地图选择器})// 高德影像底图viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",subdomains: ["1", "2", "3", "4"],}))// 高德影像注记viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({url: "https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",subdomains: ["1", "2", "3", "4"],}))
})
</script><style lang="scss" scoped>
#cesiumContainer {width: 100%;height: 100vh;
}/* 隐藏底部logo部分 */
::v-deep(.cesium-widget-credits) {display: none !important;
}
</style>文章中如有不足之处，还望各位大佬们批评指正！！！
如有更好的实现方式，欢迎评论分享！！！
