关键词：

文章目录

• 前言
• Cesium是什么
• Cesium核心类
• • Viewer
  • Scene
  • Entity
  • DataSourceCollection
• 创建第一个Cesium应用
• • 工程搭建
  • Cesium版 hello world
• 总结

---

前言

工作大半年来主要的技术栈是mapbox-gl 和 threejs，但是作为一名GIS专业毕业生，一直对Cesium充满兴趣。Cesium不仅保持了 threejs 的三维绘制能力，而且内置大量渲染地理数据的API于算法，相较于 mapbox “制作世界上最漂亮的地图”的定位，Cesium无疑是重gis项目或业务的首选框架 。据说Cesium与Vue结合更加简便，本文介绍Cesium中的核心类，并使用 Vite + Vue 搭建Cesium应用。

---

Cesium是什么

官网地址： cesium官网
github：cesium-github

它是一款面向三维地球和地图的，世界级的 JavaScript 开源产品。它提供了基于 JavaScript 语言的开发包，方便用户快速搭建一款零插件的虚拟地球 Web 应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。Cesium 支持3D,2D,2.5D 形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和 mobile。Cesium的知识体系包括GIS理论、Web前端开发 和 webgl(图形学)

• 支持3d tiles格式流式加载各种不同的3d数据：倾斜摄影模型、三维建筑物、CAD、BIM、点云数据，支持样式配置和用户交互操作。
• 全球高精度地形数据可视化，支持地形夸张、等高线和坡度分析。
• 支持多种资源的图像图层，包括WMS，TMS，WMTS以及时序图像。图像支持透明度叠加、亮度、对比度、GAMMA、色调、饱和度都可以动态调整。
• 支持标准的矢量格式KML、GeoJSON、TopoJSON、以及矢量的贴地效果。
• 三维模型支持gltf2.0标准的PRB材质、动画、蒙皮和变形、贴地以及高亮效果。
• 使用CZML支持动态时序数据的展示。
• 支持各种几何体：点、线、面、标注、公告牌、立方体、球体、椭圆体、圆柱体、走廊、管径、墙体。
• 可视化效果包括：基于太阳位置的阴影、自身阴影、柔和阴影。
• 支持大气、雾、太阳、阳光、月亮、星星、水面。
• 粒子特效：烟、火、火花。
• 地形、模型、3d tiles模型的面裁剪。
• 对象点选和地形点选。
• 支持鼠标和触摸操作的缩放、渲染、惯性平移、飞行、任意视角、地形碰撞检测。
• 支持3d地球、2d地图、2.5d哥伦布模式。三维视图可以使用透视和正视两种投影方式。

const drawRef = useRef<Draw>();
useEffect(() => 
    if (!map) return;
);

Cesium核心类

Viewer

Viewer 用来创建场景展示的可视化窗口，Viewer创建语句为：

new Cesium.Viewer(cesium.Container,options);

其中，cesiumContainer是地图主窗口div的ID，options指Cesium.Viewer可选设置参数，包含图层、地形、时间系统等参数，种类多样：

new Cesium.Viewer('cesiumContainer', 
		animation: false, // 是否创建动画小控件，默认true
		baseLayerPicker: false,// 是否开启图层选择器，默认true
		fullscreenButton: false, // 是否显示全屏按钮，默认true
        geocoder: false,   // 是否显示右上角位置查询按钮，默认true
       	homeButton: false, // 是否显示视角返回初始位置按钮，默认true
       	infoBox : false,//是否显示信息框，默认true
       	sceneModePicker : false, //是否显示3D/2D选择器，默认true
       	selectionIndicator : false, //是否显示选取指示器，默认true
        timeline: false, // 是否显示底部时间轴，默认true
        navigationHelpButton: false, //是否显示右上导航帮助按钮，默认true
        scene3DOnly : true,// 是否所有几何图形以3D模式绘制,节约GPU资源，默认false
		
		clock : new Cesium.Clock(), //用于控制当前时间的时钟对象
		
		// 设置底图图层，仅baseLayerPicker设为false有意义
        imageryProvider: new Cesium.OpenStreetMapImageryProvider(
            url:'xxx'
        ),
		// 设置地形图层，仅baseLayerPicker设为false有意义
		terrainProvider : new Cesium.EllipsoidTerrainProvider(),
        // 星空渲染对象
        scene.skyBox = new Cesium.SkyBox(
 		 sources : 
    		positiveX : 'skybox_px.png',
   			negativeX : 'skybox_nx.png',
    		positiveY : 'skybox_py.png',
    		negativeY : 'skybox_ny.png',
    		positiveZ : 'skybox_pz.png',
    		negativeZ : 'skybox_nz.png'
  			
		)
		 
		fullscreenElement : document.body, //全屏时渲染的HTML元素,
        useDefaultRenderLoop : true, //如果需要控制渲染循环，则设为true
        targetFrameRate : undefined, //使用默认render loop时的帧率
        showRenderLoopErrors : false, //如果设为true，将在显示错误信息
        automaticallyTrackDataSourceClocks : true, //自动追踪最近添加的数据源的时钟设置
        contextOptions : undefined, //传递给Scene对象的上下文参数（scene.options）
        sceneMode : Cesium.SceneMode.SCENE3D, //初始场景模式
        mapProjection : new Cesium.WebMercatorProjection(), //地图投影体系
        dataSources : new Cesium.DataSourceCollection() //需要进行可视化的数据源的集合
        
    );

Scene

Scene是构建场景的类。是Csium中非常重要的类。Cesium开发大多基于Scene类，其主要包含四部分内容：

1. 第一部分是基础地理环境设置，如地球参数（globe）、光照（light）、雾（fog）、大气（skyAtmosphere）

2. 第二部分是基础图层设置，包含地图图层、地形图层等，需要注意在Viewer类中设置图层等价于在Scene中设置图层，console.log(viewer.imageryLayers==viewer. scene.imageryLayers)显示 true ，意味着 Viewer 和 Scene 中 imageryLayers 属性相同。

3. 第三部分是场景数据，Cesium底层空间数据绘制方式是依赖Primitive。Primitive API功能强大面且非常灵活, 为程序员绘制高级图形提供很大自由度、开发者可根据图形学原理自定义高级图形。技术难度较大，对于初学者较为困难，相比较面言Entity封装程度高，构造简单，使用便捷，目前不支持自定义。3D Tiles 是Primitive的非常重要部分，可以实现大数据量加载。

4. 第四部分则是场景交互函数，如pick（鼠标事件）、camera（相机事件）。需要注意的是，conole.log（viewer.camera==viewer.scene.camera）显示 true，表示Viewer和Scene中camera属性相同。

Entity

Entity 是由 Primitive 封装而来，但是 Entity 并不属于Scene。Entity API是对高层次抽象对象的一致性的设计，这些对象将相关的可视化和信息整合成统一的数据结构，称之为Entity，使得开发者专注于数据的呈现，而不必关心底层的可视化机制。它还提供了用于构建复杂的、时间动态可视化的结构，与静态数据自然地结在一起。 虽然Entity API底层上使用了Primitive API实现，但这是一个实现细节，几乎不必关心。Entity API能够提供灵活的、高性能的可视化，同时提供一致性的、 易于学习的、易于使用的接口。由于Entity易学易用，而且功能丰富。在简单场景开发过程中，Entity的使用频率要高于Primitive。

DataSourceCollection

DataSoureCollection 是 Cesium中加载矢量数据的主要方式之一，最大特点是支持加载矢量数据集与外部文件的调用，主要分为CzmlDataSource、KmlDataSource、GeoJsonDataSource三种，分别对应加载CZML、KML和 GeoJSON 格式数据。GIS开发中加载矢量数据是必不可少的功能，将矢量数据转换为以上任意一种方式，便可在Cesium中实现矢量数据的加载和存取。

创建第一个Cesium应用

工程搭建

创建Vue项目

Vite文档：https://cn.vitejs.dev/

npm init @vitejs/app

安装Cesium

启动Cesium官网：https://cesium.com/downloads/ 给出两种方法，使用npm或者下载Cesium包，由于我们创建了Vite项目，所以使用npm下载

npm install cesium

引入Cesium依赖

import * as Cesium from "cesium";
import "../Widgets/widgets.css";

Cesium版 hello world

<template>
  <div  id="cesium"/>
</template>
<script setup>

import * as Cesium from "cesium";
import "../Widgets/widgets.css";
import  onMounted  from "vue";

// cesium静态资源路径,不设置的话无法访问
window.CESIUM_BASE_URL = "/";


onMounted(() => 
  var viewer = new Cesium.Viewer("cesium", 
    infoBox: false,
  );

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
);
</script>
<style>
* 
  margin: 0;
  padding: 0;

#cesium 
  width: 100vw;
  height: 100vh;

</style>

总结

• Cesium是什么
• Cesium核心类： Viewer、Scene、Entity、DataSourceCollection
• 创建第一个Cesium应用

cesium01-初始化(代码片段)

...　　npminstall　　npmstart或者nodeserver.js启动web服务器四、HelloWorld讲解　　script标签内加入Cesium.js。这定义了Cesium对象，它包含了我们所需要的一切。　　<scriptsrc="../Build/Cesium/Cesium.js">　　为了使用CesiumViewer小部件，我们需要... 查看详情

cmake入门实践多文件构建(代码片段)

在上一节中,我们讲了怎么通过cmake构建一个最简单的HelloWorld项目,但是在实际上面,我们平时遇到的项目都是文件非常多的.这里应该怎么处理呢?这一部分重点解决实际上这个最常见的多个文件构建系统的问题.一.单目录,多文件这... 查看详情

系统综合实践_5(代码片段)

...he-dir-ihttps://pypi.tuna.tsinghua.edu.cn/simple-rrequirements.txtCOPYcode/helloworld.py/usr/src/app/VOLUME/usr/src/appENTRYPOINT["python"]CMD["helloworld.py"]requirement.txtPyMySQLopencv-python构建镜像dockerbuild-tmy_py.2、部署程序helloworld程序代码print(‘hellowor... 查看详情

cesium中级2-图层(代码片段)

...节，直接编写代码来添加一些图像层。在Sandcastle中打开HelloWorld示例。此示例创建一个Viewer组件，默认情况下，该组件呈现BingMaps图层。我们可以通过向Viewer构造函数提供附加参数来指定不同的基础图层。让我们使用来自EsriArcGISM... 查看详情

cmake入门实践：复杂的helloworld项目(代码片段)

...in目录下面二.完整实践这节全部的代码：LearningCMake/5.HelloWorld5/第一步首先我们先把要建立的的整个目录结构先弄好，比如我这里项目目录为HelloWorld5，因此我在该项目目录下面建立了4个目录，分别是bin（最终... 查看详情

async/await用法实践(代码片段)

...代码的执行。写一个async函数asyncfunctiontimeout()　　return‘helloworld‘;　　 语法很简单，就是在函数前面加上async 关键字，来表示它是异步的，那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用它，... 查看详情

cesium(模型)(代码片段)

本文示列模型的添加、删除。//添加模型（方法一）varposition=Cesium.Cartesian3.fromDegrees(108,34,500);varheading=Cesium.Math.toRadians(90);varpitch=Cesium.Math.toRadians(-30);varroll=Cesium.Math.toRadians(0);varhpRoll=newCes 查看详情

cesiumforunity最新实践流程2-20221208(代码片段)

目录CesiumForUnity最新实践流程2-202212081、项目初始化2、添加数据3、添加自己的本地或在线三维数据4、打包5、运行上一篇 CesiumForUnity3d最新实践流程-2022-12-01 讲了如何使用CesiumForUntiy发布的项目进行，本篇将讲述如何通过新... 查看详情

cesium(相机)(代码片段)

本文示列相机的几种方式，及区别。 //创建viewervarviewer=newCesium.Viewer(‘cesiumContainer‘); //第一种：viewer.zoomTo viewer.zoomTo(greenCorridor,heading:Cesium.Math.toRadians(0),pitch:Cesium.Math.toRadians(- 查看详情

第5次系统综合实践(代码片段)

...com/simple#修改源并安装依赖ENTRYPOINT["python"]CMD["helloworld.py"]#默认打开文件3.requirements编写PyMySQLopencv-python二、helloworldvimhelloworld.pyprint("helloworld")三、日历编写vimdate.pyimportcalendar#输入指定年月yy=int(input("输... 查看详情

cesium物体显示(代码片段)

viewer.zoomTo(entity1);viewer.zoomTo(viewer.entities);viewer.camera.flyTo(destination:Cesium.Cartesian3.fromDegrees(-122.19,46.25,5000.0),orientation:heading:Cesium.Math.toRadians(175.0),pitch:Cesiu 查看详情

cesium(实体)(代码片段)

本文示列实体的添加、删除、获取//创建viewervarviewer=newCesium.Viewer(‘cesiumContainer‘);//添加实体varredBox=viewer.entities.add(id:‘Box‘,position:Cesium.Cartesian3.fromDegrees(108,34,0),box:dimensions:newCesium.Cartesia 查看详情

cesium部署(代码片段)

使用Cesium开源库搭建三维WebGIS，首先对Cesium做本地部署，我使用的是vs1、进入其官网http://cesiumjs.org，下载Cesium，并在本地解压，文件路径如下所示：2、到node.js官网，下载最新版本的node.js并进行安装，安装完后在cmd可以用node--ve... 查看详情

cesium(鼠标事件)(代码片段)

本文示列cesium鼠标添加事件、及删除事件。创建viewervarviewer=newCesium.Viewer(‘cesiumContainer‘);鼠标事件varhandler=newCesium.ScreenSpaceEventHandler(viewer.scene.canvas); //1、左键单击事件handler.setInputAction(function(click 查看详情

cesium三维漫游飞行效果实现(代码片段)

详细的实现过程见：这里本篇实现cesium三维漫游飞行效果，效果图如下：  查看详情

cesium高度解析(代码片段)

varviewer=newCesium.Viewer(‘cesiumContainer‘,shadows:true);//为true时，球体会有高程遮挡效果（在没有地形时候也会有高程遮挡效果）viewer.scene.globe.depthTestAgainstTerrain=true;varviewModel=height:0;Cesium.knockout.track(viewMode 查看详情

cesium获取entity的坐标及高程(代码片段)

1varcartographic=Cesium.Cartographic.fromCartesian(entity.position.getValue());2varlon=Cesium.Math.toDegrees(cartographic.longitude);3varlat=Cesium.Math.toDegrees(cartographic.latitude);4varelev=viewe 查看详情

cesium中级1-空间数据可视化(代码片段)

[CesiumJS]Cesium中级1-空间数据可视化（一）Cesium中文网：http://cesiumcn.org/|国内快速访问：http://cesium.coinidea.com/本教程将教读者如何使用Cesium的实体（Entity）API绘制空间数据，如点、标记、标签、线、模型、形状和物体。不需要Cesium... 查看详情