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
  });

  // 将图层添加到Viewer
  view.imageryLayers.addImageryProvider(tdtImageryProvider);
  view.imageryLayers.addImageryProvider(tdtAnnotationProvider);

完成截图：

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

---

1、总体设置地形

代码截图：