基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程

全网唯一 基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程:

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

  1. 图层管理(√)
  2. dom 点扩散(√)
  3. 轨迹回放(√)
  4. 测量(√)
  5. 坐标拾取(√)
  6. 加载模型数据,拾取三维模型(√)
  7. geoserver 结合实现属性查询(√)
  8. geoserver 结合实现空间查询(√)
  9. 地下模式(√)
  10. 单体化 / 倾斜模型分户单体化(√)
  11. 缓冲区分析(√)
  12. 粒子特效
  13. 视频融合(√)
  14. Cesium 点聚合(√)
  15. 点线面编辑(√)
  16. 多视角轨迹回放(√)
  17. 可视域分析(√)
  18. 开挖分析(√)
  19. 双屏对比(两个 cesium 窗体,同步窗口信息)(√)
  20. 矢量白膜自定义shader 系列(√)
  21. cesium 与 echart 结合 mapv(√)
  22. 热力图(√)
  23. 绘制四棱锥(视椎体)(√)
  24. 等高线分析(√)
  25. 绘制透明水面(√)
  26. 绘制反选遮罩层(√)
  27. 模型剖切分析(√)
  28. 剖面分析(√)
  29. 封装通用工具集(√)
  30. 倾斜压平分析
  31. 天际线描边(√)
  32. 淹没分析
  33. 控高分析(√)
  34. 编辑线(√)
  35. 绕点旋转(√)
  36. 鹰眼控件(√)
  37. 地球自转(√)
  38. 无球模式(设置背景图)(√)
  39. 泛光尾迹线(√)
  40. billboard 炫酷信息展示面板
  41. 日照分析(√)
  42. 雾、雨、雪特效(√)
  43. 通视分析(√)
  44. OD 线展示(√)
  45. 雷达、环形扫描线(√)
    有其他需要实现的功能,大家可以评论哈

注意有 √ 的功能已经全部实现,可在专栏找到对应的文章以及代码详解。

如果想要项目所有的源代码,可以加我 QQ (616251664)了解获取。

整体项目预览:

地址:https://www.bilibili.com/video/BV1iX4y1N7ar

专栏地址:https://blog.csdn.net/cj9551/category_6891879.html

最近想找成都的前端开发/webgis 开发岗位,有大佬内推么 616251664

可以关注我的公众号,分享更多 webgis 开发干货:

在这里插入图片描述- w80

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
好的,我了解了您的问题。对于这个问题,您需要使用 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 进行表单组件的二次封装和联动的示例。希望对您有所帮助!
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

jiegiser#

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

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

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

打赏作者

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

抵扣说明:

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

余额充值