本文目录一览：

• 1、Cesium的扩展工具包-EarthSDK使用指南1
• 2、构建一个 Vite + Vue3 项目 开发Cesium
• 3、Cesium实战项目
• 4、cesium如何搭建dat.gui
• 5、cesium 怎样设置web服务器
• 6、cesium 地球 支持手机访问么

Cesium的扩展工具包-EarthSDK使用指南1

Cesium作为三维GIS和BIM应用的主力引擎，目前已经受到越来越多的开发者的青睐。这两年笔者也一直做Cesium相关的开发工作，真切地感受到Cesium的强大，其丰富的API、丰富的示例为开发三维GIS/BIM应用提供了极大的便利。

为了进一步丰富Cesium的开发生态，我们把之前在Cesium基础上开发的功能，以及大量的改良功能，封装成若干个独立的js包。这样也避免开发者重复造轮子。对于大屏展示、C端替代等直接本地部署Cesium的应用场景，可以直接免费使用我们封装的EarthSDK扩展包。

EarthSDK中主要包括XbsjEarth.js和XbsjCesium.js两个js包。

XbsjCesium.js用来扩展Cesium所不具备的三维可视化功能，例如视频融合、分析工具、模型压平等。

XbsjEarth.js则主要目标在于封装出更加易于使用的API接口，尽可能屏蔽掉前端开发工程师所不熟悉的图形学、GIS相关内容。会在Cesium的基础上封装好一些复杂的交互操作，并提供极其简单的API接口方便调用。

EarthSDK从前端开发者的角度考虑设计API，大部分类的属性都是响应式设计，通过简单操作即可监控相应的属性变化，通过bind方便可以实现属性的相互绑定。特别针对Vue的开发者，实现了和vue的响应式属性的无缝融合。具体可以参考这篇文章的介绍： 三维应用的响应式设计探索 。

之前使用过ECharts的同学可能对ECharts的操作简单印象深刻。ECharts相当于把大量的API转成配置式，真正使用时，只需要通过setOptions来进行一个大JSON对象的配置，即可完成图表的创建。

EarthSDK的API设计也是受ECharts的启发，会尽量减少不需要的API，减轻开发者的记忆负担。只需要通过一个大JSON配置，就可以完成整个场景的搭建。

而且，EarthSDK比ECharts更进一步，可以直接修改相应的属性，即可完成三维场景的动态变化。而ECharts则需要不停地调用setOption来进行配置。以后的文章中会详细说明此特性。

EarthSDK创建场景后，内置viewer和scene对象，用户可以通过viewer或者scene来向场景中添加Cesium的原生对象，和调用所有原生的Cesium API函数。

为了更易于理解EarthSDK的使用，我们开发了一个样例程序 XbsjEarthUI(这个程序也同时集成到了CesiumLab中)。此样例程序已经开源放在Github和Gitee上，基于MIT协议，用户可以任意修改。

XbsjEarthUI在github上的地址：

XbsjEarthUI在gitee上的地址：

EarthSDK可以加载百度地图、高德地图等三十多种地图数据，并可以做到实时纠偏。

交通安防领域需要用到的视频监控、视频融合功能。可以将视频映射到倾斜摄影、BIM模型上（3dtiles模型），视频会覆盖到非平面物体上，不会出现闪烁等现象。

针对模型位置、姿态进行编辑。方便进行多个模型数据组合使用。并且这里的模型位置编辑可以很方便的在全球任意位置拖放。

结合CesiumLab数据生产，使用EarthSDK调整数据后期亮度，可以做出较好的特效。方便进行大屏展示。

可以指定模型数据显示在某一个视口，方便进行方案对比等操作。

Cesium的地面本身不能做到透明显示，我们进行改进，使得透明度可以实时调节。

动态实现视域分析效果。

可以对路径进行编辑，编辑好的路径，可以用于控制相机的漫游，也可以控制物体的移动。

对原始Cesium的标签效果进行改进，并可以使用类似html5标签增加onClick属性，来自动执行自定义操作。

构建一个 Vite + Vue3 项目 开发Cesium

由于 Cesium 不是一个普通的 npm 包，需要依赖一些 css ，图片，json 啥的。我们要参考 Cesium 官方的 webpack 教程 来做一堆额外的工作。

值得庆幸的是现在 Vite 有了 vite-plugin-cesium 插件，来帮我们完成这些配置。

vite.config.js

App.vue

Cesium实战项目

本人所学GIS专业，毕业后一直从事Cesium相关的GIS开发工作，在业余时间将Ceium中常用的一些功能进行封装，形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目，紧贴业务特性，实用性强，能够在最大程度上帮助个人、团队、公司、企业提高工作效率，节省开发成本。

Cesium实战项目目前共111个实例（后面会继续增加），项目基于Cesium1.7.2+VUE 实现，现有实例如下：

基础底图

1.ArcGIS在线底图

2.谷歌在线底图

3.高德在线底图

4.天地图在线底图

5.本地单张图片

点状对象

6.Cesium点聚合1

7.Cesium点聚合2

8.Billboard加载Gif图片

9.Cesium 闪烁点

10.Primitives加载大量图标点

11.div文本点

12.动态效果点

13.图标点+文字(primitive方式)

单体化

14.倾斜模型分栋单体化 （基于geoserver）

15.倾斜模型分层单体化（基于geoserver）含教程

16.倾斜模型分户单体化（基于geoserver）含教程

编辑绘制

17.点线面绘制

18.点线面编辑

19.点线面绘制扩展

20.点线面编辑扩展

自定义信息框

21.多字段自适应信息框

22.气泡窗口样式1

23.气泡窗口样式2

标注标绘

24.自定义html标注图层

25.军事标绘

26.军事标绘编辑

27.gltf 标绘绘制

28.gltf 标绘编辑

29.行政区标注

30.体对象绘制编辑

轨迹漫游

31.轨迹回放

32.跟随视角漫游

33.第一人称漫游

34.上帝视角漫游

分析

35.Cesium 2维点转3维点

36.Cesium 空间线段等分

37.地表透明（地下模式）

38.通视分析

39.可视域分析

40.缓冲区分析

41.地表开挖（材质贴图）

42.地形开挖（材质贴图）

43.模型裁剪（Planes）

44.矿区岩层效果

45.双屏对比

46.二三维联动（基于openlayers)

场景

47.场景出图（导出图片）

48.自定义天空盒

49.位置信息状态栏控件

50.雨雪雾天气效果

51.限定视角范围

52.绘制反选遮罩

53.自定义空间背景

54.宏观数字地球

55.鹰眼地图（基于openlayers）

56.导航控件

57.云层

58.Tooltip鼠标移入信息

59.书签管理

60.旋转的地球

61.绕点旋转

62.场景泛光

工具

63.场景测量工具

64.鼠标位置拾取工具

特效

65.动态线、流动线

66.流向动态线

67.动态水面效果

68.动态扩散圆

69.动态立体墙

70.粒子系统

71.圆形波纹效果

72.矢量白膜自定义shader（不改源码）

73.光晕线

74.动态立体墙（升级）

75.圆形、规则多边形动态围墙

76.围墙扩散动画

77.光柱椎体

78.数字工厂

79.六边形扩散扫描

80.圆形扩散扫描

81.模型热力图

82.动态传输线

83.扫描线

行业应用

84.雷达扫描效果

85.雷达追踪圆锥体

86.雷达追踪四棱锥体

87.雷达遮罩扫描

88.相控阵雷达范围

89.雷达放射波

90.卫星视椎体（四棱锥体）

91.视频贴图参数调整

92.视频融合

93.目标跟踪

94.动态目标检测

95.视频窗口（普通视频）

96.视频窗口（rtmp视频）

97.视频墙（含编辑）

98.动态水域

99.水闸放水效果

Echarts可视化支持

100.Echarts 迁徙图1

101.Echarts 迁徙图2

102.Echarts 散点图

103.Echarts 流入线

104.Echarts 流出线

MapV可视化支持

105.MapV 迁徙图

106.MapV 大迁徙图

107.MapV 热力图

108.MapV 强边界图

其他

109.3dtiles高度调整

110.文字贴图

111.热力图（基于heatmap.js插件）

在线预览地址   在线预览地址  用户名cesium 密码cesium@sz

cesium如何搭建dat.gui

先引入dat.giu.min.js(压缩版)

script src="js/dat.gui.min.js"/script

在js中初始化配置

var viewModel = {emissionRate : 5.0,gravity : 0.0,miniParticleLife : 1.0,maxiParticleLife : 1.0,fly:true}window.onload = function() {gui = new dat.GUI();gui.add(viewModel, 'emissionRate',0,100);gui.add(viewModel, 'particleSize',2 ,60);gui.add(viewModel, 'miniParticleLife',0.1,29.1);gui.add(viewModel, 'maxiParticleLife',0.1,29.1);//复选框按钮gui.add(viewModel, 'fly')}

当数值变化时赋值给对象属性onchange 事件会在域的内容改变时发生

window.onload = function() {var gui = new dat.GUI();gui.add(viewModel, 'emissionRate',0,100).onChange(function (val) {//操作_this.particleSystem.emissionRate = parseFloat(val);});gui.add(viewModel, 'particleSize',2 ,60).onChange(function (val) {_this.particleSystem.particleSize = parseFloat(val);});gui.add(viewModel, 'miniParticleLife',0.1,29.1 ).onChange(function (val) {_this.particleSystem.miniParticleLife = parseFloat(val);});gui.add(viewModel, 'maxiParticleLife',0.1,29.1 ).onChange(function (val) {_this.particleSystem.maxiParticleLife = parseFloat(val);});}

这里就可以完成了。

cesium 怎样设置web服务器

1.安装node.js

双击运行安装包，安装路径可以自定义，或者默认都可以，安装完成后，打开命令行，输入node -v，如果结果为版本号，表明安装成功。如下图所示。

如果结果为版本号，表明安装成功

2.开启电脑自带的IIS服务

     打开控制面板（直接搜索即可）

     点击程序

选择 启用或关闭Windows功能

在对话框中根据自己需求选择功能，不知道怎么选择可以全选，来防止因为忘记选择某一个功能而报错！

等待下载完成，进度条走完就行了。到此，IIS已开启。

3.配置cesium到IIS。

右击 此电脑 ，选择管理

按照下图，依次展开，然后在网站上右键，选择添加网站。

在这个框中设定网站名称，在物理路径处，选择cesium的安装路径即可。选择一个IP地址即可，选择自己所连wifi的某个地址就行。然后确定即可。配置完成。

在浏览器中输入自己刚配置的IP地址，弹出cesium的页面，就说明环境搭建完成。

cesium 地球 支持手机访问么

ml5就可以运行。甚至部分手机浏览器都可以运行 。 首先，对Cesium进行本地的部署（可以用nodejs,tomcat,vs2010,iiseclipse等IDE进行部署，我选用的是最简单的vs）： （1）下载Cesium 进入其官cesium 地球 支持手机访问么