news 2026/6/11 18:35:02

2025年华中农业大学暑期实训优秀作品(6):智慧城市—成都

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
2025年华中农业大学暑期实训优秀作品(6):智慧城市—成都

产品功能

01 技术

02 具体功能

城市场景渲染

通过antv/l7的图层 API,读取 mock 服务中的建筑数据,创建 3D 建筑图层并添加到地图场景,在主组件中调用该 hooks,实现建筑的可视化渲染。

地图控件集成

在组件中集成地图常用控件,调用已有方法,提供地图交互工具,增强用户对地图的操作能力。

可视化面板

使用现有素材设计页面标题栏及页脚,展示项目名称和附加信息,其中页脚用于放置其余功能开关按钮。引用形成页面的整体布局框架。

测量工具

借助 @antv/l7-draw 库创建不同的绘制工具实例,为绘制实例配置展示面积、距离等相关选项。

事故查询

利用 @antv/l7-draw 库创建不同的绘制工具实例,在绘制完成后过滤出在圈选范围内的GeoJSON 格式事故数据,并将数据加载到地图上。

控制中心

基于antv/G2Plot中的column\rose\pie组件制作图表,实现数据可视化。

地球自转

利用mapbox-gl的easeTo方法,定时更新地图中心点的角度,实现平滑旋转效果。

城市/地球视角切换

调用 map.flyTo 方法,通过改变缩放级别和倾斜角度实现不同视角的切换。

路径规划

使用 axios.create 创建 amapAPI 实例;调用高德路线规划相关API完善功能。

城市GDP

使用 fetch 加载地理数据,通过 @antv/l7 的 PolygonLayer 和 PointLayer 实现数据可视化,依托图层点击事件实现选中区域抬升及 tooltip 显示的交互效果。

景点查询

调用高德地图 API 进行景点数据搜索,利用 map.flyTo 方法实现景点定位,借助 @antv/l7 进行数据可视化。

公共设施查询

调用高德地图 API 进行数据搜索,利用 map.flyTo 方法实现设施定位,借助 @antv/l7 进行数据可视化。

地铁路线

调用高德地铁数据接口,获取地铁线路和站点的 GeoJSON 数据,在地图上添加对应的线图层和点图层实现地铁网络可视化。

天气查询

调用高德天气 API 获取实时天气和预报数据,利用 mapboxgl 在地图上添加圆点标记实现温度可视化,借助 G2Plot 绘制未来温度趋势图表。

来源:https://mp.weixin.qq.com/s/RadNkhAyXZeiZwuFjRuYPA

感兴趣+下方↓↓小助手

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/8 23:27:11

Clipper2:几何运算的多功能工具,多边形处理的全能解决方案

Clipper2:几何运算的多功能工具,多边形处理的全能解决方案 【免费下载链接】Clipper2 Polygon Clipping and Offsetting - C, C# and Delphi 项目地址: https://gitcode.com/gh_mirrors/cl/Clipper2 在计算机图形学与地理信息系统领域&#xff0c…

作者头像 李华
网站建设 2026/6/10 21:49:21

3D模型智能绑定终极指南:自动化骨骼生成的快速精通方案

3D模型智能绑定终极指南:自动化骨骼生成的快速精通方案 【免费下载链接】UniRig One Model to Rig Them All: Diverse Skeleton Rigging with UniRig 项目地址: https://gitcode.com/gh_mirrors/un/UniRig 在当今数字内容创作领域,3D模型智能绑定…

作者头像 李华
网站建设 2026/6/2 14:49:01

艾宝体案例 | 多模型数据架构下的电商用户画像实践:ArangoDB的应用价值

在流量红利逐渐消退的电商下半场,“精准”成为平台实现增长与转化的核心关键词。从“人找货”到“货找人”的模式转变中,用户画像作为连接消费者与商品的重要基础,其完整性、实时性与可计算性,直接影响推荐效果、营销效率与用户体…

作者头像 李华
网站建设 2026/6/11 3:06:58

OneDrive终极清理指南:3步彻底卸载微软云盘

OneDrive终极清理指南:3步彻底卸载微软云盘 【免费下载链接】OneDrive-Uninstaller Batch script to completely uninstall OneDrive in Windows 10 项目地址: https://gitcode.com/gh_mirrors/one/OneDrive-Uninstaller 你是否曾被OneDrive在后台默默占用系…

作者头像 李华
网站建设 2026/6/10 19:40:44

Adobe Illustrator终极自动化脚本:高效设计工作流完整指南

Adobe Illustrator终极自动化脚本:高效设计工作流完整指南 【免费下载链接】illustrator-scripts Some powerfull JSX scripts for extending Adobe Illustrator 项目地址: https://gitcode.com/gh_mirrors/ill/illustrator-scripts 还在为重复繁琐的Illustr…

作者头像 李华
网站建设 2026/6/9 16:17:22

Java对象差异分析神器:5分钟快速上手Java-Object-Diff

Java-Object-Diff是一个轻量级且功能强大的Java库,专门用于简化Java对象间的差异对比和合并过程。它能够处理几乎任何类型的对象以及任意深度的嵌套结构,无需对现有类进行修改。通过构建差异树形结构来直观展示两对象之间的变化,支持轻松遍历…

作者头像 李华