基于 React hooks + Typescript + Cesium 实现绘制透明动态水面

最新推荐文章于 2024-10-10 15:22:43 发布
最新推荐文章于 2024-10-10 15:22:43 发布
阅读量647 收藏
点赞数 1
分类专栏： webgis 文章标签： cesium绘制透明水面 cesium webgis typescript react hooks
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cj9551/article/details/112362231
版权
本文介绍如何使用 React hooks 和 TypeScript 结合 Cesium 实现透明动态水面的绘制。通过自定义 `useDrawWaterPrimitive` hooks，实现了图层管理、粒子特效、测量等功能，并提供了实现思路和步骤。
摘要由CSDN通过智能技术生成

文章目录

效果截图

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

功能介绍

本例子基于 React hooks + Typescript + Cesium 实现绘制透明动态水面；通过自定义 hooks —— useDrawWaterPrimitive 进行绘制透明水面；

  1. 图层管理（√）
  2. dom 点扩散（√）
  3. 轨迹回放（√）
  4. 测量（√）
  5. 坐标拾取（√）
  6. 加载模型数据，拾取三维模型（√）
  7. geoserver 结合实现属性查询（√）
  8. geoserver 结合实现空间查询（√）
  9. 地下模式（√）
  10. 单体化 / 倾斜模型分户单体化（√）
  11. 缓冲区分析（√）
  12. 粒子特效
  13. 视频融合（√）
  14. Cesium
了解本专栏 订阅专栏 解锁全文 超级会员免费看
jiegiser#
关注
专栏目录
订阅专栏
基于 React hooks + Typescript + Cesium 实现绘制反选遮罩层
jiegiser博客
01-11 1017
文章目录效果截图功能介绍实现思路实现步骤获取数据绘制反选遮罩层 效果截图 先上截图： 功能介绍 本例子基于 React hooks + Typescript + Cesium 实现绘制反选遮罩层；并通过封装对应的组件，完成反选遮罩层的绘制； 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现空间查询（√） 地下模式（√） 单体化 / 倾斜模型分户单体化（√） 缓冲区
基于 React hooks + Typescript + Cesium 实现通视分析
jiegiser博客
05-10 472
文章目录效果截图功能介绍实现思路实现步骤 效果截图 先上截图： 功能介绍 通视分析是指以某一点为观察点，研究某一区域通视情况的地形分析。用户在模型上选取任意两点之间是否可以互相可见的技术方法，主要用于判断任意两点之间能否通视； 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geoserver 结合实现属性查询（√） geoserver 结合实现空间查询（√） 地下模式（√） 单体化 / 倾斜模型分户单体化（√） 缓冲区分析（√） 粒
cesium 水面、淹没 效果
weixin_30700099的博客
07-23 3397
水面效果 参考： 　http://cesiumcn.org/topic/158.html 　http://api.rivermap.cn/cesium/rivermap/map.html 　https://blog.csdn.net/weixin_42496466/article/details/80747565 demo效果： 主要代码： //绘制水面波浪效果 ...
React 集成 Cesium 之图层加载入门篇
大道至简，悟在天成。
03-24 3281
一、简介 Cesium是一个用于显示三维地球和地图的开源js库。它可以用来显示海量三维模型数据、影像数据、地形高程数据、矢量数据等等。三维模型格式支持gltf、三维瓦片模型格式支持3d tiles。矢量数据支持geojson、topojson格式。影像数据支持wmts等。高程支持STK格式。 二、安装 yarn add cesium 或者 npm install cesium 文件拷贝 ...
Cesium高阶学习七、反射水面
最新发布
程迷学习的博客
10-10 699
Cesium高阶学习七、反射水面
Cesium|xt3d动态水面
xt3d的博客
08-30 739
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" conten
React集成Cesium+ThreeJs流程汇总
子枫
02-09 1938
React集成Cesium+ThreeJs流程汇总 文章目录React集成Cesium+ThreeJs流程汇总集成ThreeJS1.安装ThreeJS模块一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 集成ThreeJS 在 React集成Cesium流程汇总 的基础上集成ThreeJS 1.安装ThreeJS模块 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： impor
React集成Cesium流程汇总
子枫
02-08 2721
React集成Cesium流程汇总 1.安装cesium模块 2.Cesium配置 前期准备 3.Cesium配置修改配置文件 4.创建Cesium组件 5.运行查看效果
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
03-09
总之，这个基于React hooks、Typescript和Cesium的三维WebGIS实战教程，将帮助你提升WebGIS开发技能，理解如何在现代前端框架下集成复杂的3D可视化工具，为你的项目增添更多可能性。通过学习和实践，你将能够创建出...
基于 React hooks + Typescript + Cesium 实现缓冲区分析
jiegiser博客
12-17 640
文章目录功能介绍实现思路实现步骤实现绘制图形方法根据图形类型生成缓冲区绘制缓冲区封装 BufferAnalysisComponent 组件使用 BufferAnalysisComponent 组件 功能介绍 本例子基于 基于 React hooks + Typescript + Cesium 实现缓冲区分析；通过设置缓冲范围半径，进行生成缓冲区；并封装对应缓冲区分析组件，以及暴露外部方法返回缓冲区分析结果。 先上截图： 后续将分享一些下面的功能： 图层管理（√） dom 点扩散（√） 轨迹回放（√）
react+cesium配置问题
qq_52792706的博客
04-14 1496
cesium+react
React集成Cesium示例代码
02-08
React集成Cesium源码打包
基于反射和折射离屏渲染的水面特效在Cesium中的实现
行走的过客
03-24 1408
水面特效。
React管理系统整合Cesium避坑指南
奔跑的痕迹的博客
08-04 1104
花费了一周时间将React 升级到了最新版本18，同时整合Cesium三维模块到系统中，其中遇到了react 版本升级后模块删改，按照原来的引入方式无法使用的问题，以及Cesium 放入子路由一直404等问题。
React + Cesium实践（一）之架子搭建
的博客
01-31 1031
antd pro集成Cesium
cesium水面效果
God's asylum的博客
07-15 1796
【代码】cesium水面效果。
Cesium逼真水面，动态水波，倒影
微笑君的博客
06-21 3978
倒影的原理：计算相机到水平面视点的入射光线的反射光线，用反射光线方向向量在一个天空盒上采样。在上一篇的基础上，增加水面的倒影。
Cesium创建水面效果
Passerby_OK的博客
02-20 960
通过创建primitives添加水面效果
react 地图可视化 cesium 篇
weixin_30315435的博客
07-04 832
Vue Function-based API RFC 一出来，感觉 vue 越来越像 react 了。新立项目，决定尝试下 react.js。下面是 react 集成 cesium，核心部分是 webpack 的配置。 一、安装 create-react-app npm install -g create-react-app 二、react 工程创建 cre...
用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、付费专栏及课程。

余额充值