基于 React hooks + Typescript + Cesium 实现编辑线

最新推荐文章于 2024-05-06 09:09:50 发布
最新推荐文章于 2024-05-06 09:09:50 发布
阅读量288 收藏
点赞数
分类专栏： webgis 文章标签： cesium编辑线 typescript 三维可视化 webgis react hooks
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cj9551/article/details/113659465
版权
这篇博客介绍了如何结合React Hooks、Typescript和Cesium库来实现三维可视化的线编辑功能。内容包括效果截图、实现思路和详细步骤，如鼠标事件判断、增加鼠标提示等。此外，还展示了其他如模型数据加载、空间查询、属性查询、粒子特效等一系列高级功能的实现。
摘要由CSDN通过智能技术生成

文章目录

效果截图

先上截图：在这里插入图片描述

  1. 图层管理（√）
  2. dom 点扩散（√）
  3. 轨迹回放（√）
  4. 测量（√）
  5. 坐标拾取（√）
  6. 加载模型数据，拾取三维模型（√）
  7. geoserver 结合实现属性查询（√）
  8. geoserver 结合实现空间查询（√）
  9. 地下模式（√）
  10. 单体化 / 倾斜模型分户单体化（√）
  11. 缓冲区分析（√）
  12. 粒子特效
  13. 视频融合（√）
  14. Cesium 点聚合（√）
  15. 点线面编辑
  16. 多视角轨迹回放（√）
  17. 可视域分析（√）
  18. 开挖分析（√）
  19. 双屏对比（两个 cesium 窗体&#x
了解本专栏 订阅专栏 解锁全文 超级会员免费看
jiegiser#
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
Cesium 编辑功能
一路走一路学，总会不落后
03-17 749
Cesium 编辑功能 更多尽在 webgis.fun
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 1525
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
Cesium 动态绘制线和编辑
weixin_70875199的博客
11-01 2630
【代码】Cesium 动态绘制面和编辑。
cesium-添加点线面可以动可编辑
qq_45518803的博客
07-10 1519
【代码】cesium-添加点线面可以动可编辑。
Cesium点线面实体编辑功能
xt3d的博客
09-08 5409
Cesium点线面实体编辑功能 前言 编辑点效果 编辑线效果 编辑面面效果 关键代码
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
03-09
总之，这个基于React hooks、Typescript和Cesium的三维WebGIS实战教程，将帮助你提升WebGIS开发技能，理解如何在现代前端框架下集成复杂的3D可视化工具，为你的项目增添更多可能性。通过学习和实践，你将能够创建出...
基于 React hooks + Typescript + Cesium 实现通视分析
jiegiser博客
05-10 451
文章目录效果截图功能介绍实现思路实现步骤 效果截图 先上截图： 功能介绍 通视分析是指以某一点为观察点，研究某一区域通视情况的地形分析。用户在模型上选取任意两点之间是否可以互相可见的技术方法，主要用于判断任意两点之间能否通视； 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现空间查询（√） 地下模式（√） 单体化 / 倾斜模型分户单体化（√） 缓冲区分析（√） 粒
基于 React hooks + Typescript + Cesium 实现多视角轨迹回放
jiegiser博客
12-23 1421
文章目录效果截图功能介绍实现思路实现步骤绘制飞行数据设置动画起始时间以及播放速度创建运动物体以及飞行轨迹根据用户选择设置跟随视角第一视角设置控制飞行：开始、暂停、结束封装 FlyManager 组件FlyManager 组件使用 效果截图 先上截图： 功能介绍 本例子基于 React hooks + Typescript + Cesium 实现多视角轨迹回放；实现飞行管理可以选择飞行视角：第一人称、第三人称、上帝视角等，飞行路线可以自己进行绘制，然后进行轨迹回放；并通过开始、暂停、结束、清除等功能，管理轨
基于 React hooks + Typescript + Cesium 实现缓冲区分析
jiegiser博客
12-17 607
文章目录功能介绍实现思路实现步骤实现绘制图形方法根据图形类型生成缓冲区绘制缓冲区封装 BufferAnalysisComponent 组件使用 BufferAnalysisComponent 组件 功能介绍 本例子基于 基于 React hooks + Typescript + Cesium 实现缓冲区分析；通过设置缓冲范围半径，进行生成缓冲区；并封装对应缓冲区分析组件，以及暴露外部方法返回缓冲区分析结果。 先上截图： 后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√）
Cesium.js实现批量移动点、线
做GIS梦的人
08-17 1474
在前面的博文中实现了，将鼠标的位置实时赋值给点或模型即可。很多时候，可能需要其他的一些模型或者点、线的同步移动。实现批量的模型移动就需要用到平移向量来进行处理了。通过计算选中点初始位置和移动后位置相减或得平移向量，其他模型的初始位置加上平移向量，就可以获取应该平移的目标位置。...
Cesium|xt3d精灵线
xt3d的博客
08-30 540
Cesium|xt3d精灵线效果代码预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=
Cesium开发：精灵图的使用
地理信息技术杂谈 博客，欢迎技术交流
09-22 489
在mapbox-gl中能够使用精灵图，参见公众号文章mapbox-gl中精灵图的使用。 在Cesium的开发中，也能够使用精灵图，需要自己加载图片，写方法，获取精灵图中的图标信息。 参照mapbox-gl中的精灵图和json配置文件，按照此格式进行其中图标提取方法的实现。 1、借助html5的canvas元素，Cesium的图标文件能够支持加载canvas导出的图片格式； 2、预先加载精灵图图片文件和配置的json文件； 3、为了不用每次加载图片，可以把图片使用new Image()进行预先加载； 4、选取
ceisum 鼠标拖拽移动实体
12-20 1878
【代码】ceisum 鼠标拖拽移动实体。
Cesium 点线面绘制（适合刚入门的朋友学习）
资深三维GIS开发
10-18 3793
如题，没事儿用class写了个点线面的绘制。包括清除等。 下面我传的资源是最简单的资源，只是供大家学习的！ 真正在项目中使用的绘制，一般包括了绘制（支持手动点选绘制和输入坐标绘制）、编辑、单个删除、全部删除、属性设置、样式设置、绘制时提示、保存到本地或数据库、以及打开本地文件直接使用等。这才是一个完整的绘制工具类，并且不仅仅只有绘制点、线、面，还包括绘制军事箭头（态势标会）、文本标注、div...
Cesium 实战 - 标绘编辑功能系列之编辑线段对象（Linestring | Polyline）
最新发布
linzi19900517的博客
05-06 312
Cesium 实战 - 标绘编辑功能系列之编辑线段对象（Linestring | Polyline）。
【超图+CESIUM】【基础API使用示例】42、超图｜CESIUM - 绘制编辑线段｜读取kml文件绘制编辑｜导出kml线段数据
汪同学丶的博客
03-04 895
超图｜CESIUM - 绘制编辑线段｜读取kml文件绘制编辑｜导出kml线段数据
Cesium学习三：使用entity绘制polyline
小何又沐风的博客
09-21 7338
使用cesium绘制线polyline，并对显示参数逐一进行了图解
用react hooks+typescript结合antdesign二次封装表单组件，实现表单联动
04-25
好的，我了解了您的问题。对于这个问题，您需要使用 React Hooks 和 TypeScript 来结合 Ant Design 进行表单组件的二次封装和联动。 首先，您需要在 React 中定义一个表单组件，并使用 useState 钩子来处理输入值的状态。例如： ``` import React, { useState } from 'react'; import { Form, Input, Button } from 'antd'; interface MyFormProps { initialValues?: MyFormValues; onSubmit?: (values: MyFormValues) => void; } interface MyFormValues { name: string; age: number; email: string; } const MyForm: React.FC<MyFormProps> = ({ initialValues = {}, onSubmit }) => { const [name, setName] = useState<string>(initialValues.name ?? ''); const [age, setAge] = useState<number>(initialValues.age ?? 0); const [email, setEmail] = useState<string>(initialValues.email ?? ''); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); if (onSubmit) { onSubmit({ name, age, email }); } }; const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => { setName(event.target.value); }; const handleAgeChange = (event: React.ChangeEvent<HTMLInputElement>) => { setAge(parseInt(event.target.value, 10)); }; const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => { setEmail(event.target.value); }; return ( <Form layout="vertical" onSubmit={handleSubmit}> <Form.Item label="Name"> <Input value={name} onChange={handleNameChange} /> </Form.Item> <Form.Item label="Age"> <Input type="number" value={age} onChange={handleAgeChange} /> </Form.Item> <Form.Item label="Email"> <Input type="email" value={email} onChange={handleEmailChange} /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default MyForm; ``` 接下来，您需要在 Form.Item 组件中使用 getFieldDecorator 来封装每个表单项，并使用 onChange 钩子来处理联动事件。例如： ``` import React from 'react'; import { Form, Input, Button } from 'antd'; interface MyFormProps { initialValues?: MyFormValues; onSubmit?: (values: MyFormValues) => void; } interface MyFormValues { name: string; age: number; email: string; } const MyForm: React.FC<MyFormProps> = ({ initialValues = {}, onSubmit }) => { const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); if (onSubmit) { onSubmit(form.getFieldsValue()); } }; const form = Form.useForm()[0]; const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => { form.setFieldsValue({ name: event.target.value }); }; const handleAgeChange = (event: React.ChangeEvent<HTMLInputElement>) => { form.setFieldsValue({ age: parseInt(event.target.value, 10) }); }; const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => { form.setFieldsValue({ email: event.target.value }); }; return ( <Form layout="vertical" onSubmit={handleSubmit} form={form}> <Form.Item label="Name"> {form.getFieldDecorator('name', { initialValue: initialValues.name, })(<Input onChange={handleNameChange} />)} </Form.Item> <Form.Item label="Age"> {form.getFieldDecorator('age', { initialValue: initialValues.age, })(<Input type="number" onChange={handleAgeChange} />)} </Form.Item> <Form.Item label="Email"> {form.getFieldDecorator('email', { initialValue: initialValues.email, })(<Input type="email" onChange={handleEmailChange} />)} </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default MyForm; ``` 如上所示，您可以使用 getFieldDecorator 来封装每个表单项，并使用 initialValue 属性来设置初始值。在 onChange 钩子中，您可以使用 setFieldsValue 来联动更新其他表单项的值。 这就是使用 React Hooks 和 TypeScript 结合 Ant Design 进行表单组件的二次封装和联动的示例。希望对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiegiser#

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值