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'

完成截图:

代码截图:

代码:

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、总体设置地形

代码截图:

相关推荐
细节控菜鸡3 天前
【2025最新】ArcGIS 点聚合功能实现全教程(进阶版)
arcgis
细节控菜鸡3 天前
【2025最新】ArcGIS for JS点聚合功能实现
开发语言·javascript·arcgis
你是一个铁憨憨11 天前
ArcGIS定向影像(1)——非传统影像轻量级解决方案
arcgis·gis·影像·定向影像
QQ35967734511 天前
ArcGIS Pro实现基于 Excel 表格批量创建标准地理数据库(GDB)——高效数据库建库解决方案
数据库·arcgis·excel
阿智@1113 天前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
GIS思维13 天前
ArcGIS(Pro)在线地图服务被禁?提示感叹号?应急方案来了——重新正常显示
arcgis·arcgispro
bug总结13 天前
多楼层室内定位可视化 Demo(A*路径避障)
arcgis
草木红14 天前
express 框架基础和 EJS 模板
arcgis·node.js·express
wanzhong233315 天前
ArcGIS学习-17 实战-密度分析
学习·arcgis
树谷-胡老师16 天前
公元前3400年至公元2024年全球国家地理边界演变数据集
数据库·arcgis·信息可视化