基于 React hooks + Typescript + Cesium 通过 dom 实现扩散点绘制并封装组件

本例子基于 react hooks + ts + Cesium 通过 dom 实现扩散点的绘制，并封装对应的组件。实现可以自定义文字、文字样式、点的样式以及位置等。

先上截图：

后续将分享一些下面的功能：

1. 图层管理（√）
2. dom 点扩散（√）
3. 轨迹回放
4. 测量
5. 坐标拾取
6. 加载模型数据，实现属性查询
7. 地下模式
8. 单体化
9. 粒子特效
10. 视频融合
    有其他需要实现的功能，大家可以评论哈

实现思路：
本例子是基于根据获取在更新或呈现场景之前将引发的事件：viewer.scene.preUpdate 方法来更新 dom 位置，这个函数相当于每帧刷新之前都会调用此函数。然后根据点的位置通过 Cesium.SceneTransforms.wgs84ToWindowCoordinates 方法来将 WGS84 坐标中的位置转换为窗口坐标，从而绘制 dom 元素。

1. 获取需要绘制点的经纬度坐标，将点处理为笛卡尔坐标系并传入到 PointSpread 组件；
2. PointSpread 组件添加 preUpdate 事件监听渲染，并将坐标转换为屏幕坐标进行渲染；

Cesium渲染过程分析

在场景组件 Scene 的 render 方法中提供了 preUpdate、postUpdate、preRender、postRender 四个事件对

本文地址：https://blog.csdn.net/cj9551/article/details/110232033