欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于 React hooks + Typescript + Cesium 实现要素绘制

程序员文章站 2022-03-15 11:35:11
本例子基于 react hooks + ts + Cesium 实现图层管理功能,并封装绘图工具条,增加获取实时坐标点以及最终绘制坐标点方法等。先上截图:实现思路绘制,首先需要用到 Cesium 的交互事件(鼠标动作处理器、事件)ScreenSpaceEventHandler 类;通过处理交互事件获取当前点击坐标点以及鼠标实时位置绘制结果以及绘制中的动态图。初始化绘图组件,添加监听鼠标事件;根据当前用户选择绘制的类型,进行绘制图形;以及绘制动态图;暴露绘制时获取的实时位置返回到组件外的 fu...

本例子基于 react hooks + ts + Cesium 实现图层管理功能,并封装绘图工具条,增加获取实时坐标点以及最终绘制坐标点方法等。

先上截图:

基于 React hooks + Typescript + Cesium 实现要素绘制

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

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

实现思路

绘制,首先需要用到 Cesium 的交互事件(鼠标动作处理器、事件)ScreenSpaceEventHandler 类;通过处理交互事件获取当前点击坐标点以及鼠标实时位置绘制结果以及绘制中的动态图。

  1. 初始化绘图组件,添加监听鼠标事件;
  2. 根据当前用户选择绘制的类型,进行绘制图形;以及绘制动态图;
  3. 暴露绘制时获取的实时位置返回到组件外的 func 以及返回最终绘制的数据 func。

creenSpaceEventHandler

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