学生作品 | 长江大学&新中地GIS开发实训，武汉智慧城市GIS可视化平台

PART1 项目背景

随着"数字中国"战略的推进与"新基建"的落地，5G、人工智能以及WebGL等底层技术加速成熟，为构建高保真、实时交互的三维数字底座提供了坚实的技术支撑。

武汉作为国家级中心城市，城市管理复杂度与日俱增，高度依赖空间数据的可视化与智能分析。传统的二维地图已难以满足城市管理者对实时性、交互性和三维空间认知的需求。

因此，长江大学第三组学生团队决定基于GIS可视化技术，构建一个面向武汉市的智慧城市可视化平台，将城市运行数据直观动态地呈现在一张三维地图上，为决策提供辅助支撑。

开发语言为标准的HTML、JavaScript和CSS。

前端使用Vue.js框架，配合Vite构建工具进行工程化开发。

地图层基于Mapbox，数据可视化依赖AntV实现。主界面将所有功能集成在一张地图上，形成全景式的城市运行监控视图。

围绕人口、交通、医疗、教育四大城市核心维度设计数据看板，包含武汉各区今日出行人口统计、武汉各区实时公交在线表格、武汉三镇人口统计、武汉三甲医院统计、武汉市高校学生统计。采用组件化Hook架构，灵活可扩展。

加载武汉各区多边形边界，鼠标悬停时自动显示区名。

基于Mapbox GL JS渲染武汉三镇三维城市底图，建筑白模按高度分级拉伸，形成层次分明的三维轮廓。

全市道路按等级进行分级着色，9类路网差异化呈现。桥梁实现双层发光特效，并设置独立图层开关，方便重点关注交通设施。

加载AntV L7风场动画图层，动态展示气象数据。调用高德地图开放API实时获取武汉当前天气信息，包括温度、湿度、风级、风向等，并以曲线形式展示变化趋势。

点击地图添加测量点，系统自动计算累积距离，以公里为单位显示。

支持**多边形、矩形、圆形三种绘制方式。**基于Turf.js的booleanPointInPolygon进行空间筛选，可查询范围内的事件和社区信息。查询结果在地图高亮显示，并在侧边卡片中列出详情，双击可直接跳转到目标位置。

基于Mapbox GL Directions API实现导航功能，选定起点和终点后，支持驾车、步行、骑行三种出行方式的路径规划，在地图上显示完整路线行程。

建筑白模可升级为真实纹理映射，支持倾斜摄影模型加载，水面、植被等自然元素三维化呈现。

响应式布局设计，适配不同屏幕尺寸，支持大屏展示模式，预留移动端接口。

基于机器学习的事件预测模型集成，交通流量实时分析与拥堵预警，空间聚类分析与热点识别。

成功构建基于Mapbox GL JS的武汉三维城市底图；实现9类道路分级着色；创建桥梁双层发光特效；集成AntV L7风场可视化动画；基于Turf.js实现空间查询与分析功能。

多维度城市运行数据可视化、行政区划可视化、三维城市模型、环境与天气监测、地理信息与空间分析五大模块全部完成并可正常运行。

WebGL性能优化方面，采用建筑数据分级加载、按需渲染；图层层级管理方面，合理设置图层顺序避免遮挡；异步数据加载方面，使用Promise.all并行请求提升初始化速度。未来计划引入Web Worker处理复杂空间计算，实现数据缓存机制减少重复请求，优化移动端性能。