cesium入门

已于 2025-06-15 05:35:39 修改
阅读量378 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： cesium 文章标签： arcgis
于 2025-06-14 23:05:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Seven_Ting/article/details/148659618

一、打造第一个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、总体设置地形

代码截图：

Cesium 入门
虎康的博客
06-23 3020
Viewer：主要窗口Cesium 展示三维要素内容的主要窗口，包含三维地球的视窗，还包含了一些基础控价const viewer = new Cesium.Viewer('div的ID',{ options可选参数 }，包括图层)options可选参数animation: false, 隐藏动画效果timeline:false, 隐藏时间轴等等Scene：场景类，隐藏地球图层Entity：实体类。
Cesium入门教程
qq_58978006的博客
08-28 5455
本章将从Cesium的基本使用入手，了解它的常见对象并介绍相应属性及方法。包括：Cesium的初始化、Scene场景、Camera相机、Clock时钟、Entity实体以及Invalid access token的获取问题等等。
Cesium 入门案例 Cesium 入门案例
05-29
Cesium 入门案例 Cesium 入门案例
Cesium（可直接用）
08-14
Cesium 是通过 Web 浏览器创建 3D 地球和 2D 地图的 JavaScript 库，无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化；跨平台、跨浏览器；并且针对动态数据进行可视化。
【Cesium】一、cesium简介
最新发布
fruge365的博客
12-31 1681
【Cesium】一、cesium简介,什么是Cesium，能做什么
Cesium简介
floating_heart的博客
06-26 3万+
Cesium框架简介，尚未全部完成
Cesium入门
kudouranaaa的博客
12-18 2900
Cesium是一款开源的基于JavaScript的3D地图框架，即一个地图可视化框架，用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。
cesium入门(一)
wxljmy的专栏
09-14 1343
cesium入门(一) ygpGoogle 2020-09-22 19:21:17 697 收藏 4 分类专栏： gis 文章标签： nodejs gis 版权 gis 专栏收录该内容 2 篇文章0 订阅 订阅专栏 什么是cesium？ Cesium是一款开源的基于JavaScript的3D地图框架。其实他就是一个地图可视化框架 CesiumJS 是一款用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。目前尽力提升平台的性能、准确率、虚拟化能力、易用性以及平台的各..
Cesium Language (CZML)入门--(一)
08-29
Cesium Language(CZML)的第一部分Structure部分
【Cesium入门教程】第四篇：Cesium 图元(Primitive)与高级特性
GIS前端嘉欣的博客
08-27 1877
最后，使用viewer.scene.primitives.add(primitive)将创建的几何体添加到Cesium Viewer的场景中，viewer是一个已经配置好的Cesium Viewer实例。例如，为了表示飞机的损坏，技术艺术家可以使用粒子系统来表示飞机引擎上的爆炸，然后渲染不同的粒子系统，表示飞机坠毁时的烟雾轨迹。创建一个Cesium.Primitive对象，将矩形和椭球几何实例作为其geometryInstances，并且定义外观，允许为每个几何实例设置独立的颜色。
【Cesium入门教程】第四课：Cesium 图元(Primitive)与高级特性
GIS前端嘉欣的博客
04-28 5094
geometryInstances属性接受一个Cesium.GeometryInstance对象，这个对象包含几何体的具体信息。geometry属性是一个Cesium.EllipseGeometry对象，它定义了一个椭圆的几何形状。center属性定义了椭圆的中心点，这里使用Cesium.Cartesian3.fromDegrees方法，接受经度和纬度，创建了一个三维笛卡尔坐标点。semiMinorAxis属性定义了椭圆的半短轴长度，数值为500,000.0。
Cesium实践（1）—— Hello World
qq_37987033的博客
03-22 1694
工作大半年来主要的技术栈是mapbox-gl 和 threejs，但是作为一名GIS专业毕业生，一直对Cesium充满兴趣。Cesium不仅保持了 threejs 的三维绘制能力，而且内置大量渲染地理数据的API于算法，相较于 mapbox “制作世界上最漂亮的地图”的定位，Cesium无疑是重gis项目或业务的首选框架。据说Cesium与Vue结合更加简便，本文介绍Cesium中的核心类，并使用 Vite + Vue 搭建Cesium应用。
Cesium速成教程：一小时入门Cesium
GIS前端嘉欣的博客
01-15 947
Cesium是使⽤JavaScript开发的基于WebGL的，实现三维地球和地图可视化的JS库。Cesium⽀持海量的三维模型数据，影像数据，地形⾼程数据，⽮量数据等丰富的地理数据的加载。在交通，规划，城市管理，地形仿真等领域有⾮常⼴泛的应⽤。Cesium为三维的GIS提供了⼀个⾼效的数据可视化平台。
cesium编程入门 (一) cesium简介
wish_way的博客
04-28 5755
cesium是什么 Cesium是一个跨平台、跨刘览器的展示三维地球和地图的javascript库. Cesium使用webGL来进行硬件加速图形,使用时不需要任何插件支持,但是浏览器必须支持WebGL; Cesium是基于Apache2.0许可的开源程序,它可以免费的用于商业和非商业用途。 cesium官方网站：https://cesium.com/platform/cesiumjs/ cesium能做什么 支持20D,25D,3D形式的地图局示, 可以绘制各种几何图形、高亮区域,支持导入图片
开源全球地理空间数据可视化框架——Cesium学习（2023.8.21）
热门推荐
I have a dream, here my dreams come true!
08-21 3万+
Cesium简介，便于后续学习及交流！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值