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

面朝屏幕的图片

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FBillboards.html&label=Development

//链式返回，new Cesium.BillboardCollection() 生成一个对象，这个对象是另一个scene.primitives.add的参数

//position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)

//position 空间直角坐标系，由经纬度坐标转换而来；这里的经纬度省略了Z的参数

// 可以增加一句 var height = Cesium.defaultValue(444444)

// position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,height )

sizeInMeters : true, //图像的尺寸被指定成图像实际的尺寸，不随地图的缩放而变换大小

一次创建多个

//scaleByDistance 设置屏幕像素缩放比，150米的时候放大一倍，150000米的时候，缩放到0.5

//Cesium.NearFarScalar四个值，最近的距离，最远的距离，缩放比例范围

translucencyByDistance 改动透明度，地球缩放到很小时，透明度增大

pixelOffset : new Cesium.Cartesian2(0.0, -facilityHeight), //在原位置上偏移，防止叠在一起看不到了

pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.0), //随着距离改变偏移量

translucencyByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.1)//随着距离改变透明度

添加点的公告牌

增加marker的公告牌

在框架体系中增加广告牌，平移旋转缩放，全部围绕着billboards.modelMatrix

平移到某一点后，旋转X轴转到朝东，Y转到朝北，z轴转到正上方。

billboards.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)

特点：

始终面朝屏幕，即使旋转也面朝屏幕

注意创建的集群对象 Cesium.BillboardCollection

为什么不能创建单个Billboard？Entity来解决此问题

面朝屏幕的文字

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FLabels.html&label=Development

特点：

始终朝向屏幕

注意创建的是集群对象 Cesium.LabelCollection()

Label对象只能用在LabelCollection当中

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2FPointPrimitives.html&label=Development

1.Scene.prototype.pickPositionWorldCoordinates 根据屏幕坐标获取世界坐标

2，Scene.prototype.pickPosition  根据屏幕坐标获取世界坐标

3，Scene.prototype.drillPick 通过屏幕坐标拾取多个对象

4，Scene.prototype.pickFromRay 通过射线拾取第一个3d对象

5，Scene.prototype.drillPickFromRay 通过射线拾取多个3d对象

6，Scene.prototype.pickFromRayMostDetailed 异步拾取3d对象

7， Scene.prototype.drillPickFromRayMostDetailed  异步拾取多个3d对象

8，Scene.prototype.sampleHeight 根据当前弧度坐标获取3d高度

9，Scene.prototype.clampToHeight 根据当前世界坐标位置获取3d对象

10，Scene.prototype.sampleHeightMostDetailed异步获取当前位置的高度

11，Scene.prototype.clampToHeightMostDetailed 异步获取当前位置的3d对象

12，Scene.prototype.cartesianToCanvasCoordinates 世界坐标转canvas坐标

13，Camera.prototype.pickEllipsoid 根据屏幕坐标返回椭球体坐标或者2维地图上的坐标

14，Camera.prototype.getPickRay 以相机位置为起点，屏幕坐标位置为终点做一条射线

15,Scene.prototype.requestRender 手动场景渲染，每调一次手动触发一次渲染

16，Scene.prototype.forceRender 强制场景进行渲染

17，Scene.prototype.pick 通过屏幕坐标拾取3d对象

18，Camera.prototype.distanceToBoundingSphere 相机到椭球体的距离

19，Camera.prototype.viewBoundingSphere 将相机看向球体中心

20，Camera.prototype.flyToBoundingSphere 飞向球体中心

21，getRectangleCameraCoordinates 通过视图矩形获取相机位置

21，Camera.prototype.computeViewRectangle 返回相机在球体上的可视范围矩形

22，Cesium.Cartesian3.lerp 根据两个点和插值数量进行插值

23.Quaternion.fromAxisAngle 沿某个轴旋转角度之后，返回新的位置，是一个四元数

24，获取视图范围 varRectangle =this.viewer.camera.computeViewRectangle()

25，获取Zoom this.viewer.camera.moveEnd.addEventListener(this.onMoveendMap)//监听地图移动完成事件onMoveendMap = () =>{

const me =this//获取当前相机高度let height = Math.ceil(me.viewer.camera.positionCartographic.height)

let zoom = me.heightToZoom(height)

26，Globe.prototype.pick 返回地球上相交的点

27，Globe.prototype.pickWorldCoordinates 返回地球上相交点的坐标

28，Cesium.sampleTerrainMostDetailed(terrainProvider, positions)根据地形求地形上点的高度

29，Globe.prototype.getHeight（cartographic）根据经纬度获取地球上的高度

30,new Cesium.HeadingPitchRoll(Math.PI, Math.PI, Math.PI)设置欧拉角 弧度

31，HeadingPitchRoll.fromQuaternion = function (quaternion, result) 从四元数转成欧拉角

32，HeadingPitchRoll.fromDegrees = function (heading, pitch, roll, result) 用经纬度生成欧拉角

33.Plane.projectPointOntoPlane = function (plane, point, result)点到平面的投影

34.Plane.getPointDistance = function (plane, point)点到平面的距离

35.Transforms.eastNorthUpToFixedFrame 传入一个世界坐标，以地球东-北-上方向为参考系生成一个矩阵

36.Transforms.northEastDownToFixedFrame 传入一个世界坐标，以地球北-东-下方向为参考系生成一个矩阵

37.Transforms.headingPitchRollToFixedFrame(origin,headingPitchRoll) 传入一个坐标和欧拉角得到一个矩阵

38.Transforms.headingPitchRollQuaternion(origin,headingPitchRoll) 传入一个坐标和欧拉角得到一个四元数

39.Transforms.fixedFrameToHeadingPitchRoll 传入一个矩阵得到欧拉角

40.SceneTransforms.wgs84ToWindowCoordinates (scene, position, result) 将场景里的某个世界坐标位置转成屏幕坐标

41.SceneTransforms.wgs84ToDrawingBufferCoordinates(scene, position, result) 将场景里的某个世界坐标位置转成换图形缓冲区坐标

42.SceneTransforms.transformWindowToDrawingBuffer(scene,windowPosition,result)将屏幕坐标转换成图形缓冲区坐标

43.SceneTransforms.clipToGLWindowCoordinates(viewport,position,result)将裁剪坐标转成窗口坐标

44.SceneTransforms.drawingBufferToWgs84Coordinates(scene,drawingBufferPosition,depth,result)将缓冲区坐标转成世界坐标

---