Cesium 50个实例集合，讲解、分析(内附源码)

Posted 2023-03-10

参考技术A 为方便快速测试 Cesium Demo使用，添加了一些演示demo并且提供了webpack打包的示例。目前整理了20个demo，后面会对demo进行讲解。

详情源码连接：

Cesium 50个实例集合，讲解、分析(内附源码)

示例概要说明：

1.Draw.js 动态绘制 点、线、面

2.Scanning.js 一个简单的扫描功能

3.Spline.js 样条插值

4.HeightProperty.js 一个类似淹没分析的效果

5.VectorTile.js 矢量切片加载

6.Ellipsoids.js 圆特效

7.Sensor.js 传感器，可设置角度，位置等

8.PolylineArrow.js 动态线效果

9.VolumesCZML.js 加载czml文件 支持传感器等动画特效

10.VolumesApi.js VolumesApi 调用效果

11.Fly.js 绕点飞行

12.Radar.js 气象雷达动态图

13.VisibleAnalysis.js 通视分析

14.EagleEye.js 鹰眼地图

15.Measure.js 测量

16.Translucency.js 地球半透明，可做地下管线、矿山项目

17.Interior.js 地球内部，结合VectorTile.js会出很牛的效果

18.3dtiles加载

19.可视域分析_3DTiles

20.站心坐标转WGS84

操作说明：

1.npm初始化第三方库

npm install

2.在根目录创建文件夹，文件夹名称为“ThirdParty” 。

3.将根目录下“node_modules\cesium\Build\Cesium”拷贝到“ThirdParty” 下。

4.编译

npm run build

5.运行

npm run start

注：可以不要“2”、“3”步骤的，只是为了初学者能更快的找到源码位置。

​

          

​

cesium常用方法汇集（工具篇）

参考技术A 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)将缓冲区坐标转成世界坐标