如果你是基于cesiumjs做开发，不需要使用一些其他三方付费框架的话，本篇文章中的示例覆盖了一些常用场景和功能，可以作为参考示例去下载源码进行学习，资源下载地址本文末尾处。

       废话不多说直接先去看代码运行效果，演示地址：http://cesium.kevyme.top

一、功能介绍

       本示例使用cesiumjs开发（未依赖其他付费框架），基于原生cesiumjs + react的一些示例源码，包括标绘（几何体、基本形状、图片、模型等添加、属性修改、删除等）、三维测量（空间距离、投影距离、贴地距离、投影面积、贴地面积）、三维分析（直线通视、多点通视、点缓冲区、线缓冲区、三角测量、方位角、坡度坡向计算）、坐标（坐标拾取、坐标转换）、应用（等高线、贴地运动、路线追踪、淹没分析、echarts图表、模型动画、视点飞行、罗盘、热力图、天气、海量点、西安地铁、选址选线、西安路网）等示例。

二、示例

1.几何体标绘

1.1演示地址

        http://cesium.kevyme.top/plot/geometry

1.2功能描述

        本示例包括长方体、球体、圆柱、圆椎的在地图上的标绘，以及属性与颜色等动态设置，添加与删除等。

1.3效果

2.基本形状标绘

2.1演示地址

http://cesium.kevyme.top/plot/shape

2.2功能描述

        本示例包括常见矢量图形的标绘与属性编辑，包括多边形、矩形、三角形、圆形、扇形、细直箭头、曲线箭头、直箭头、进攻方向箭头、燕尾进攻方向箭头、分队战斗方向、燕尾分队战斗方向、突击方向、双箭头、自由线、自由面、曲线、椭圆、半月面等。

2.3效果

3.图片标绘

3.1演示地址

http://cesium.kevyme.top/plot/image

3.2功能描述

        主要是在地图上添加图片标绘，动态设置图片的属性，删除图片等操作。

3.3效果

4.模型标绘

4.1演示地址

http://cesium.kevyme.top/plot/model

4.2功能描述

        主要是在地图上标绘glb等格式模型，设置相关属性与删除操作等。

4.3效果

5.三维测量

5.1演示地址

http://cesium.kevyme.top/measure/index

5.2功能描述

        主要包括空间距离、投影距离、贴地距离、空间面积、投影面积、贴地面积的三维场景测量。

5.3效果

6.三维分析

6.1演示地址

http://cesium.kevyme.top/measure/analysis

6.2功能描述

        主要包括直线通视、多点通视、圆形通视、点缓冲区、线缓冲区、三角测量、方位角、坡度坡向的计算。

6.3效果

直线通视效果图如下：

多点通视效果图如下：

圆形通视效果图如下：

点缓冲区效果图如下：

线缓冲区如图：

三角测量效果图

方位角效果图

坡度坡向效果图

7.坐标拾取

7.1演示地址

http://cesium.kevyme.top/coordinate/pick

7.2功能描述

        主要根据鼠标移动显示当前笛卡尔坐标和经纬度坐标，视野高度等信息。

7.3效果

8坐标转换

8.1演示地址

http://cesium.kevyme.top/coordinate/transfer

8.2功能描述

        常见坐标系的转换，如GCJ02/BD09/WGS84，输入json或数组转换坐标。

8.3效果

9.应用-等高线

9.1演示地址

http://cesium.kevyme.top/app/contour

9.2功能描述

        绘制一个多边形区域，在区域内根据地形数据实时生成等高线。

9.3效果

10.贴地运动

10.1演示地址

http://cesium.kevyme.top/app/GroundMotion

10.2功能描述

        主要是模型在三维地图中贴地运动，包括运动与停止的控制，速度控制，环形运动，不同视角的切换等。

10.3效果

11.路线追踪

11.1演示地址

http://cesium.kevyme.top/app/roadtrace

11.2功能描述

        主要是模型在地表面和空中沿着同一线进行运动，路线的追踪跟随示例。

11.3效果

12.淹没分析

12.1演示地址

http://cesium.kevyme.top/app/inundateanalysis

12.2功能描述

        绘制一个区域，点击开始进行淹没动画的分析。

12.3效果

13.Echarts图表

13.1演示地址

http://cesium.kevyme.top/app/echarts

13.2功能描述

        主要是在地图上展示echarts图表能力，包括散点图、迁徙图等。

13.3效果

14.模型动画

14.1演示地址

http://cesium.kevyme.top/app/modelmotion

14.2功能描述

        主要是模型在地图上的动画，点击不通动作，模型会执行相应的动画。

14.3效果

15.视点飞行

15.1演示地址

http://cesium.kevyme.top/app/viewfly

15.2功能描述

        主要功能是不同预设点直接平滑过渡飞行效果。

15.3效果

16.罗盘

16.1演示地址

http://cesium.kevyme.top/app/compass

16.2功能描述

        主要是罗盘与地图的控制旋转等。

16.3效果

17.热力图

17.1演示地址

http://cesium.kevyme.top/app/heatmap

17.2功能描述

        主要功能是根据不同数据大小动态显示相应效果的热力图。

17.3效果

18.天气

18.1演示地址

http://cesium.kevyme.top/app/weather

18.2功能描述

        主要功能是显示不同天气效果，包括晴朗、下雨、下雪等效果。

18.3效果

19.海量点

19.1演示地址

http://cesium.kevyme.top/app/points

19.2功能描述

        主要是加载海量点，动态改变其位置效果。

19.3效果

20.西安地铁

20.1演示地址

http://cesium.kevyme.top/app/metro

20.2功能描述

        主要是西安地铁线路及站点信息的动态展示，发展历程动画，不同视角列车模型运动，正反向运动、拥挤度图展示等。

20.3效果

21.选址选线

21.1演示地址

http://cesium.kevyme.top/app/marksite

21.2功能描述

        选线：绘制一条路线，对节点移动、删除、新增等编辑操作；

        选址：绘制多边形区域，对各节点移动、删除、新增等编辑操作。

21.3效果

22西安路网

22.1演示地址

http://cesium.kevyme.top/app/road

22.2功能描述

        主要展示西安不同等级分类的道路，可勾选展示，有在地图上动态绘制线和绘多边形区域与编辑操作，有道路健康度分段不同色值的展示等。

22.3效果

路网图

健康度展示图

三、关于源码下载

1.源码下载链接

https://download.csdn.net/download/c5211314963/92731462

2.源码使用步骤

        下载的源码解压后，电脑上安装node18以上，进入解压根目录（有package.json文件的目录），执行以下命令

如果使用npm执行以下命令：

//1.安装依赖
npm install

//2.本地启动查看效果
npm run dev

//启动后浏览器访问http://localhost:8000


//3.打包
npm run build

//build后会生成dist文件夹，将其部署在nginx下即可。

如果使用yarn执行以下命令

//1.安装依赖
yarn install

//2.本地启动查看效果
yarn dev

//启动后浏览器访问http://localhost:8000


//3.打包
yarn build

//build后会生成dist文件夹，将其部署在nginx下即可。

注：本示例仅用于学习交流，你可以下载源码学习和自己基于该版本做升级优化。