基于 React hooks + Typescript + Cesium 实现模型单体化

最新推荐文章于 2024-08-04 20:03:14 发布
最新推荐文章于 2024-08-04 20:03:14 发布
阅读量1.3k 收藏 2
点赞数 3
分类专栏： webgis 文章标签： cesium react hooks webgis typescript 模型单体化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cj9551/article/details/111194926
版权
该博客介绍了如何利用React Hooks和Typescript结合Cesium库，实现在WebGIS中的3D模型单体化。文章详细阐述了实现思路，包括加载倾斜数据、使用ClassificationPrimitive添加矢量图元、添加鼠标事件、设置属性面板展示等步骤，并提供了部分关键代码。此外，还展示了已实现的多种功能，如图层管理、轨迹回放、测量等。
摘要由CSDN通过智能技术生成

文章目录

功能介绍

本例子基于 react hooks + ts + Cesium 实现实现模型单体化；首先需要知道单体化是什么，单体化核心思想是：每一个我们想要单独管理的对象，都是一个个单独的、可以被选中分离的实体对象，可以赋予属性，可以被查询统计等等。该例子主要是通过动态单体化实现的；通过叠加矢量对象达到可以单独选中地物的效果。

先上截图：

在这里插入图片描述
对应 基于 React hooks + Typescript + Cesium + Geoserver 实现倾斜模型分户单体化

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

  1. 图层管理（√）
  2. dom 点扩散（√）
  3. 轨迹回放（√）
  4. 测量（√）
  5. 坐标拾取（√）
  6. 加载模型数据，拾取三维模型（√）
了解本专栏 订阅专栏 解锁全文 超级会员免费看
jiegiser#
关注
专栏目录
订阅专栏
基于 React hooks + Typescript + Cesium 实现坐标拾取功能组件
jiegiser博客
12-03 487
功能介绍 本例子基于 react hooks + ts + Cesium 实现坐标拾取组件；实现 WGS 84 经纬度、大地2000 经纬度、大地2000 投影 坐标的获取并展示。并封装对应的 PickpositionComponent、坐标转换方法以及 Inforwindow 坐标展示组件。 先上截图： 后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，实现属性查询 地下模式 单体化 粒子特效 视频融合 有其他需要实现的功能，
基于 React hooks + Typescript + Cesium 实现地下模式预览
jiegiser博客
12-14 482
文章目录功能介绍实现思路实现步骤记录原始球体相关参数开启地下透明模式更新影像图层透明度封装 UndergroundModeComponent 组件UndergroundModeComponent 组件的使用 功能介绍 本例子基于 react hooks + ts + Cesium 实现地下模式预览；该功能用处也很多；比如地下管廊管线等项目开发时，为更好的体现效果增加用户体验，需要根据应用场景从地上直接切到地下模式或者从地上能够透视到地下的管廊、管线等设备。该组件对此功能进行了封装，实现可以开启地下模式，使
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
03-09
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
React管理系统整合Cesium避坑指南
最新发布
奔跑的痕迹的博客
08-04 1038
花费了一周时间将React 升级到了最新版本18，同时整合Cesium三维模块到系统中，其中遇到了react 版本升级后模块删改，按照原来的引入方式无法使用的问题，以及Cesium 放入子路由一直404等问题。
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程
jiegiser博客
12-17 1816
后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现空间查询（√） 地下模式（√） 单体化 / 倾斜模型分户单体化（√） 缓冲区分析（√） 粒子特效 视频融合 Cesium 点聚合 点线面编辑 多视角轨迹回放 通视分析 开挖分析 双屏对比（两个 cesium 窗体，同步窗口信息） 矢量白膜自定义shader 系列 cesium 与 echar
基于 React hooks + Typescript + Cesium 实现测量功能组件
jiegiser博客
12-02 555
功能介绍 本例子基于 react hooks + ts + Cesium 实现测量功能组件；实现距离测量、贴地测量(地形)、贴地面积测量、面积测量、三角测量。并封装对应的 MeasureComponent 组件。 先上截图： 后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取 加载模型数据，实现属性查询 地下模式 单体化 粒子特效 视频融合 有其他需要实现的功能，大家可以评论哈 实现思路 这个测量的功能也是很简单的，跟之前的绘图组件是一样的功能
基于 React hooks + Typescript + Cesium 实现鹰眼控件
jiegiser博客
02-07 383
文章目录效果截图功能介绍实现思路实现步骤安装依赖封装 CesiumOverviewMapControl 类事件监听整体代码使用CesiumOverviewMapControl 类 效果截图 先上截图： 功能介绍 基于 React hooks + Typescript + Cesium + leaflet 实现鹰眼控件；并封装对应 CesiumOverviewMapControl 类； 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√）
基于 React hooks + Typescript + Cesium + Geoserver 实现倾斜模型分户单体化
jiegiser博客
12-16 793
文章目录功能介绍实现思路实现步骤加载倾斜数据注册鼠标事件通过点击位置拼接 wfs 查询获取楼层几何信息根据点击位置获取楼层对应户几何信息ClassificationGeoserver 组件封装其他——PolygonGeometry 的 height 与 extrudedHeight 属性 功能介绍 本例子基于 react hooks + ts + Cesium + Geoserver 实现实现实现倾斜模型分户单体化；做到点击每个户通过 geoserver 的 wfs 查询得到对应几何信息进行绘制，以及展示属
基于 React hooks + Typescript + Cesium 实现通视分析
jiegiser博客
05-10 456
文章目录效果截图功能介绍实现思路实现步骤 效果截图 先上截图： 功能介绍 通视分析是指以某一点为观察点，研究某一区域通视情况的地形分析。用户在模型上选取任意两点之间是否可以互相可见的技术方法，主要用于判断任意两点之间能否通视； 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现空间查询（√） 地下模式（√） 单体化 / 倾斜模型分户单体化（√） 缓冲区分析（√） 粒
基于 React hooks + Typescript + Cesium 实现缓冲区分析
jiegiser博客
12-17 616
文章目录功能介绍实现思路实现步骤实现绘制图形方法根据图形类型生成缓冲区绘制缓冲区封装 BufferAnalysisComponent 组件使用 BufferAnalysisComponent 组件 功能介绍 本例子基于 基于 React hooks + Typescript + Cesium 实现缓冲区分析；通过设置缓冲范围半径，进行生成缓冲区；并封装对应缓冲区分析组件，以及暴露外部方法返回缓冲区分析结果。 先上截图： 后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√）
96.（cesium篇）cesium动态单体化-3D建筑物（楼层）.rar
07-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“96.（cesium篇）cesium动态单体化-3D建筑物（楼层）”。如下载有问题，可联系博主。 解压密码：cesium
95.（cesium篇）cesium动态单体化-3D建筑物（楼栋）.rar
07-07
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“95.（cesium篇）cesium动态单体化-3D建筑物（楼栋）”。如下载有问题，可联系博主。 解压密码：cesium
93.（cesium篇）cesium动态单体化-倾斜摄影（楼栋）.rar
07-05
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“93.（cesium篇）cesium动态单体化-倾斜摄影（楼栋）”。如下载有问题，可联系博主。 解压密码：cesium
94.（cesium篇）cesium动态单体化-倾斜摄影（楼层）.rar
07-06
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“94.（cesium篇）cesium动态单体化-倾斜摄影（楼层）”。如下载有问题，可联系博主。 解压密码：cesium
基于Cesium+VUE实现的动态单体化（整幢建筑和分层分户）效果，完整demo和源代码，代码未加密/未压缩，可直接调用运行
06-13
基于Cesium+VUE实现的动态单体化（整幢建筑和分层分户）效果，完整demo和源代码，代码未加密/未压缩，可直接调用运行 demo中唯一缺少部分是涉及到的模型数据，因为数据量比较大，所以如果需要请在评论区留下邮箱，邮件形式发送 文章描述： https://blog.csdn.net/qq_34205305/article/details/124109854 https://blog.csdn.net/qq_34205305/article/details/124180684 代码不易，略收小费，使用过程中如果有任何问题欢迎在文章下进行评论，百分百回复哦
基于 React hooks + Typescript + Cesium 地形开挖分析
jiegiser博客
12-24 706
文章目录效果截图功能介绍实现思路自定义绘图 hooks: useDrawHandler 效果截图 先上截图： 功能介绍 本例子基于 React hooks + Typescript + Cesium 地形开挖分析；通过自定义 hooks 实现绘图事件的封装；实现绘图各个声明周期：drawStart、drawEnd 等事件的监听；以及实现 TerrainClipPlan 地形裁剪的 hooks。 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型
基于 React hooks + Typescript + Cesium + heatmap.js 实现热力图
jiegiser博客
12-28 761
文章目录效果截图功能介绍实现思路实现步骤生成数据封装 useCreateHeatMap 自定义 hooks使用自定义 hooks 创建热力图图层 效果截图 先上截图： 功能介绍 本例子基于 React hooks + Typescript + Cesium + heatmap.js 实现热力图；通过自定义 hooks 实现热力图图层的封装；结合 heatmap.js 实现热力图自定义 hooks 的封装。 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，
基于 Typescript React Cesium 搭建开发环境
jiegiser博客
07-08 1114
基于 react + Typescript + cesium 的项目 项目地址：https://github.com/jiegiser/react_cesium 可以 star 一波 搭建开发环境 使用 create-react-app --typesctipt react-cesium 初始化项目； 安装 cesium 以及 copy-webpack-plugin 插件：npm install cesium copy-webpack-plugin --save 打开 react 配置文件，执行命令：ya
用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 进行表单组件的二次封装和联动的示例。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

jiegiser#

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

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

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

打赏作者

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

抵扣说明：

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

余额充值