cesium入门

一、打造第一个cesium应用

---

1、 cesium官网地址

Cesium: The Platform for 3D Geospatialhttps://cesium.com/

2、安装cesium

npm install cesium

3、将node_modules中cesium的4个文件夹复制到public文件中

 4、见Widgets文件放到src目录下

5、App.vue代码

<template><div id="sesiumContioner" ref="sesiumContioner"></div>
</template><script setup>
import * as Cesium from 'cesium';//引入cesium
import "./Widgets/widgets.css";//引入cesium的css
import { onMounted } from 'vue';window.CESIUM_BASE_URL = '/';onMounted(() => {var view = new Cesium.Viewer('sesiumContioner')
})
</script><style lang="scss">
* {padding: 0;margin: 0;
}#sesiumContioner {width: 100vw;height: 100vh;
}
</style>

6、运行结果截图

 

二、Cesium基础设置 

---

1、去掉底部的提示

 注意：去官网注册后获取到token设置就可以去掉提示了

代码截图：

代码：

Cesium.Ion.defaultAccessToken = '自己的token'

完成截图：

2、去掉页面cesium的logo

代码截图：

 

代码：

onMounted(() => {var view = new Cesium.Viewer('sesiumContioner');view.cesiumWidget.creditContainer.style.display = 'none';
})

 完成截图：

3、设置默认看见的是中国视角

 当前默认视角：

代码截图：

代码：

Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(//西边的经度86.5,//南边的维度20.4,//东边的经度110.4,//北边的维度61.2
)

完成截图：

三、详讲viewer查看器

---

1、是否显示信息窗口

代码截图：

代码：

var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true});

2、是否显示搜索框

代码截图

 

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder:false,});

完成截图：

3、是否显示home按钮

代码截图：

 

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder:false,//是否显示home按钮，true显示，false不显示homeButton:false,});

4、控制查看器显示模式

代码截图：

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder: false,//是否显示home按钮，true显示，false不显示homeButton: false,//控制查看器显示模式 ，true显示，false不显示sceneModePicker: false});

5、是否显示图层选择器

代码截图：

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder: false,//是否显示home按钮，true显示，false不显示homeButton: false,//控制查看器显示模式 ，true显示，false不显示sceneModePicker: false,//是否显示图层选择器 ，true显示，false不显示baseLayerPicker: false,});

6、是否显示帮助按钮

代码截图：

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder: false,//是否显示home按钮，true显示，false不显示homeButton: false,//控制查看器显示模式 ，true显示，false不显示sceneModePicker: false,//是否显示图层选择器 ，true显示，false不显示baseLayerPicker: false,//是否显示帮助按钮 ，true显示，false不显示navigationHelpButton: false});

7、是否播放动画

代码截图：

 

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder: false,//是否显示home按钮，true显示，false不显示homeButton: false,//控制查看器显示模式 ，true显示，false不显示sceneModePicker: false,//是否显示图层选择器 ，true显示，false不显示baseLayerPicker: false,//是否显示帮助按钮 ，true显示，false不显示navigationHelpButton: false,//是否播放动画 ，true显示，false不显示animation: false});

8、是否显示时间轴

代码截图：

 

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder: false,//是否显示home按钮，true显示，false不显示homeButton: false,//控制查看器显示模式 ，true显示，false不显示sceneModePicker: false,//是否显示图层选择器 ，true显示，false不显示baseLayerPicker: false,//是否显示帮助按钮 ，true显示，false不显示navigationHelpButton: false,//是否播放动画 ，true显示，false不显示animation: false,//是否显示时间轴 ，true显示，false不显示timeline: false});

9、是否显示全屏按钮

代码截图：

 代码：

  var view = new Cesium.Viewer('sesiumContioner', {//是否显示信息窗口infoBox: true,//是否显示搜索框geocoder: false,//是否显示home按钮，true显示，false不显示homeButton: false,//控制查看器显示模式 ，true显示，false不显示sceneModePicker: false,//是否显示图层选择器 ，true显示，false不显示baseLayerPicker: false,//是否显示帮助按钮 ，true显示，false不显示navigationHelpButton: false,//是否播放动画 ，true显示，false不显示animation: false,//是否显示时间轴 ，true显示，false不显示timeline: false,//是否显示全屏按钮 ，true显示，false不显示fullscreenButton: false});

10、完成截图

四、cesium天空盒 

---

1、原始截图

2、准备天空盒子的图

注意：盒子图放入public文件中

 

3、代码引入盒子图

 代码截图：

代码：

  var view = new Cesium.Viewer('sesiumContioner', {//设置天空盒子skyBox:new Cesium.SkyBox({sources:{positiveX:'./texture/sky/sky_px.jpg',negativeX:'./texture/sky/sky_nx.jpg',positiveY:'./texture/sky/sky_ny.jpg',negativeY:'./texture/sky/sky_py.jpg',positiveZ:'./texture/sky/sky_pz.jpg',negativeZ:'./texture/sky/sky_nz.jpg'}})});

4、完成截图

五、Cesium自定义地图与地图叠加 

---

1、加载自定义地图

 去申请地图的key，例如天地图

天地图APIhttp://lbs.tianditu.gov.cn/home.html

2、引入天地图单个

代码截图：

代码：

  // 天地图影像图层const tdtImageryProvider = new Cesium.WebMapTileServiceImageryProvider({url: 'https://t{s}.tianditu.gov.cn/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=天地图的key',subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],layer: 'tdtImgLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'w',maximumLevel: 18});view.imageryLayers.addImageryProvider(tdtImageryProvider);

完成截图：

3、 引入天地图叠加

代码截图：

代码：

// 天地图影像图层const tdtImageryProvider = new Cesium.WebMapTileServiceImageryProvider({url: 'https://t{s}.tianditu.gov.cn/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=天地图key',subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],layer: 'tdtImgLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'w',maximumLevel: 18});// 天地图注记图层const tdtAnnotationProvider = new Cesium.WebMapTileServiceImageryProvider({url: 'https://t{s}.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=天地图key',subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],layer: 'tdtAnnoLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'w',maximumLevel: 18});// 将图层添加到Viewerview.imageryLayers.addImageryProvider(tdtImageryProvider);view.imageryLayers.addImageryProvider(tdtAnnotationProvider);

 完成截图：

 六、添加地形与添加自定义地形

---

1、总体设置地形

代码截图：