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代码

html 复制代码

<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设置就可以去掉提示了

代码截图：

代码：

javascript 复制代码

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

完成截图：

2、去掉页面cesium的logo

代码截图：

代码：

javascript 复制代码

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

完成截图：

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

当前默认视角：

代码截图：

代码：

javascript 复制代码

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

完成截图：

三、详讲viewer查看器

1、是否显示信息窗口

代码截图：

代码：

javascript 复制代码

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

2、是否显示搜索框

代码截图

代码：

javascript 复制代码

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

完成截图：

3、是否显示home按钮

代码截图：

代码：

javascript 复制代码

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

4、控制查看器显示模式

代码截图：

代码：

javascript 复制代码

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

5、是否显示图层选择器

代码截图：

代码：

javascript 复制代码

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

6、是否显示帮助按钮

代码截图：

代码：

javascript 复制代码

  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、是否播放动画

代码截图：

代码：

javascript 复制代码

  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、是否显示时间轴

代码截图：

代码：

javascript 复制代码

  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、是否显示全屏按钮

代码截图：

代码：

javascript 复制代码

  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、代码引入盒子图

代码截图：

代码：

javascript 复制代码

  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、引入天地图单个

代码截图：

代码：

javascript 复制代码

  // 天地图影像图层
  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、引入天地图叠加

代码截图：

代码：

javascript 复制代码

  // 天地图影像图层
  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、总体设置地形

代码截图：

一、打造第一个cesium应用

1、 cesium官网地址

2、安装cesium

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

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

5、App.vue代码

6、运行结果截图

二、Cesium基础设置

1、去掉底部的提示

代码截图：

代码：

完成截图：

2、去掉页面cesium的logo

代码截图：

代码：

完成截图：

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

当前默认视角：

代码截图：

代码：

完成截图：

三、详讲viewer查看器

1、是否显示信息窗口

代码截图：

代码：

2、是否显示搜索框

代码截图

代码：

完成截图：

3、是否显示home按钮

代码截图：

代码：

4、控制查看器显示模式

代码截图：

代码：

5、是否显示图层选择器

代码截图：

代码：

6、是否显示帮助按钮

代码截图：

代码：

7、是否播放动画

代码截图：

代码：

8、是否显示时间轴

代码截图：

代码：

9、是否显示全屏按钮

代码截图：

代码：

10、完成截图

四、cesium天空盒

1、原始截图

2、准备天空盒子的图

3、代码引入盒子图

代码截图：

代码：

4、完成截图

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

1、加载自定义地图

2、引入天地图单个

代码截图：

代码：

完成截图：

3、 引入天地图叠加

代码截图：

代码：

完成截图：

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

1、总体设置地形

3、引入天地图叠加