基于 React hooks + Typescript + Cesium 地形开挖分析

最新推荐文章于 2024-06-12 17:41:42 发布
最新推荐文章于 2024-06-12 17:41:42 发布
阅读量690 收藏 1
点赞数 2
分类专栏： webgis 文章标签： 地形开挖分析 cesium webgis typescript react hooks
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cj9551/article/details/111640400
版权

文章目录

效果截图

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

功能介绍

本例子基于 React hooks + Typescript + Cesium 地形开挖分析；通过自定义 hooks 实现绘图事件的封装；实现绘图各个声明周期：drawStart、drawEnd 等事件的监听；以及实现 TerrainClipPlan 地形裁剪的 hooks。

  1. 图层管理（√）
  2. dom 点扩散（√）
  3. 轨迹回放（√）
  4. 测量（√）
  5. 坐标拾取（√）
  6. 加载模型数据，拾取三维模型（√）
  7. geoserver 结合实现属性查询（√）
  8. geoserver 结合实现空间查询（√）
  9. 地下模式（√）
  10. 单体化 / 倾斜模型分户单体化（√）
  11. 缓冲区分析（√）
  12. 粒子特效
  13. 视频融合
  14. Cesium 点聚合（√）
  15. 点线面编辑
了解本专栏 订阅专栏 解锁全文 超级会员免费看
jiegiser#
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
订阅专栏
cesium学习记录01-基础功能和空间分析（功能目录）
木卯彳亍的博客
02-17 1340
cesium学习（功能的实现）
cesium3D gis开发框架，已经开发了gis基层功能模块
03-02
cesium3D gis开发框架，已经开发了gis基层功能模块
cesium 多边形加边框宽度 Polygon outlineWidth
最新发布
AllBluefm的专栏
06-12 519
cesium中用polygon添加多边形时，设置outlineWidth无效，常见做法是在添加polygon的同时加一个polyline，但是当多边形相邻两条边的角度比较小的情况下，这两个点的连接处有明显的交叉。第一步用turf的transformScale，当多边形的坐标比较相近的情况下，transformScale不是等比缩放的，导致多边形边框宽度不一致。第一步：通过turf的buffer方法计算出一个小一点的多边形，注意此时buffer第二个参数为复数才能得到小一点的多边形。
GIS数字地球-沟槽开挖设计
闲暇余客
02-24 242
cesium-地面裁剪(多个剪切面)
孙霸天的专栏
02-10 4287
cesium-地面裁剪(多个剪切面) 介绍 我之前的文章介绍过地面裁剪的实现，这里介绍一下裁剪多个面的方式。 Cesium自带的ClippingPlaneCollection只能实现单凸多边形挖除，为了实现多个面的裁切和简单凹多边形，这里我们需要修源码以提供支持。 在github中的问题讨论中已经有人实现了，实现方式需要重新打包源码 具体的详解 实现效果 源码打包 这里我使用的cesium源码版本为：1.79.1下载地址 打包工具使用的是webstorm node.js版本为14.17.5 替换
cesium 模型裁剪分析（模型内部裁剪和外部裁剪）
wangyong_h
11-09 4167
一、模型裁剪分析 对3D Tileset模型进行裁剪分析，可任意绘制多边形范围进行裁剪，具体效果如下 未裁剪模型局部范围效果图 外部裁剪效果图 内部裁剪效果图 二、完整代码 <template> <div id="geologyClipPlanDiv" v-if="geologyClipPlanIsShow"> <table style="text-align: right;"> <tr> ..
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
03-09
总之，这个基于React hooks、Typescript和Cesium的三维WebGIS实战教程，将帮助你提升WebGIS开发技能，理解如何在现代前端框架下集成复杂的3D可视化工具，为你的项目增添更多可能性。通过学习和实践，你将能够创建出...
React-Hooks-TypeScript:React Hooks + TypeScript
03-25
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒...
基于react+hooks+typescript的模仿boss直聘源码(含服务端+客户端).zip
12-29
1.项目代码均经过功能验证ok，确保稳定可靠运行。欢迎下载体验！下载完使用问题请私信沟通。 2.主要针对各个计算机相关专业，包括计算机科学、...基于react+hooks+typescript的模仿boss直聘源码(含服务端+客户端).zip
基于React17+Typescript开发的旅游电商平台系统源码.zip
12-20
基于React17+Typescript开发的旅游电商平台系统源码.zip基于React17+Typescript开发的旅游电商平台系统源码.zip基于React17+Typescript开发的旅游电商平台系统源码.zip基于React17+Typescript开发的旅游电商平台系统...
react-hooks-typescript-realworld:使用React Hooks + Typescript构建的示例现实世界应用程序
03-11
React Hooks + Typescript代码库包含遵循规范和API的真实示例（CRUD，auth，高级模式等）。 创建该代码库的目的是演示使用React Hooks和Typescript构建的完整的全栈应用程序，其中包括CRUD操作，身份验证，路由，...
坡度坡向分析.docx
01-06
坡度坡向分析.docx
嵌入式编程系统
09-06
嵌入式书籍，外国经典书籍，嵌入式必看,欢迎下载
cesium地形处理工具
05-17
本工具集主要解决Cesium中地形相关数据的下载和生成。
cesium-react-demo:基于webpack、react、cesium实现的一个简单脚手架，内置demo
04-27
cesium-react-demo 基于webpack、react、cesium实现的一个简单脚手架，内置demo 安装 npm install 启动 npm start
Cesium(三)在Terrain动态绘制线和面
HPUGIS的博客
06-02 3092
在绘制线和面在Ceisum中GitHub中以有轮子（drawhelper），该轮子仅能绘制在2D层次，在Terrain上则不能绘制。在Terrain上绘制线和面，是进行淹没分析和剖面分析的第一步，在这里在展示如何在Terrain上绘制线和面（主要来源于官方demo） 效果： demo示例： <!DOCTYPE html> <html> <head> ...
用cesium怎么实现地形剖切功能
weixin_42608318的博客
12-29 417
可以使用 Cesium 的 Cesium.Scene. terrainExaggeration 属性来实现地形剖切功能。这个属性可以控制地形图像的立体效果，可以让你在 Cesium 场景中增强或削弱地形的高度。 你可以在初始化场景时设置这个属性，例如： var viewer = new Cesium.Viewer('cesiumContainer', { terrainExaggeration...
cesium实际开发案例视频案例教程
06-14
本课程可以快速掌握并强化cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息系统开发的认识，为您的学习与开发工作节约大量宝贵的时间。
cesium项目实战：前言
挣钱花388的博客
09-19 1035
就是Vue前端技术+Cesium开发基础和实例，vue版本2.6.14，cesium版本1.92，逐步搭建做成项目工程，满满全是源码，复制粘贴直接跑起来，既加快学习进度，又节省时间成本。不停的更新中...
用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 进行表单组件的二次封装和联动的示例。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

jiegiser#

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

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

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

打赏作者

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

抵扣说明：

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

余额充值