基于 React hooks + Typescript + Cesium 通过 dom 实现扩散点绘制并封装组件
程序员文章站
2022-03-14 21:20:58
本例子基于 react hooks + ts + Cesium 通过 dom 实现扩散点的绘制,并封装对应的组件。实现可以自定义文字、文字样式、点的样式以及位置等。先上截图:实现思路:本例子是基于根据获取在更新或呈现场景之前将引发的事件:viewer.scene.preUpdate 方法来更新 dom 位置,这个函数相当于每帧刷新之前都会调用此函数。然后根据点的位置通过 Cesium.SceneTransforms.wgs84ToWindowCoordinates 方法来将 WGS84 坐标中的位置...
本例子基于 react hooks + ts + Cesium 通过 dom 实现扩散点的绘制,并封装对应的组件。实现可以自定义文字、文字样式、点的样式以及位置等。
先上截图:
后续将分享一些下面的功能:
- 图层管理(√)
- dom 点扩散(√)
- 轨迹回放
- 测量
- 坐标拾取
- 加载模型数据,实现属性查询
- 地下模式
- 单体化
- 粒子特效
- 视频融合
有其他需要实现的功能,大家可以评论哈
实现思路:
本例子是基于根据获取在更新或呈现场景之前将引发的事件:viewer.scene.preUpdate 方法来更新 dom 位置,这个函数相当于每帧刷新之前都会调用此函数。然后根据点的位置通过 Cesium.SceneTransforms.wgs84ToWindowCoordinates 方法来将 WGS84 坐标中的位置转换为窗口坐标,从而绘制 dom 元素。
- 获取需要绘制点的经纬度坐标,将点处理为笛卡尔坐标系并传入到 PointSpread 组件;
- PointSpread 组件添加 preUpdate 事件监听渲染,并将坐标转换为屏幕坐标进行渲染;
Cesium渲染过程分析
在场景组件 Scene 的 render 方法中提供了 preUpdate、postUpdate、preRender、postRender 四个事件对
本文地址:https://blog.csdn.net/cj9551/article/details/110232033
上一篇: UserAccessList 集合的功能(VBA)
下一篇: 解决传教士与野人问题