【智慧城市】2025年中国地质大学(武汉)暑期实训优秀作品（3）：基于Mapbox GL JS 构建的城市三维可视化系统
PART.1
项目背景
01
区域发展现状与需求
新加坡和马来西亚地理位置相邻，经济联系紧密，人员往来频繁，形成了独特的双城经济圈。
然而，在城市化快速推进的过程中，两地面临着交通拥堵、资源分配不均、环境治理难度加大等诸多共性问题。同时，随着人口的持续增加，对各类资源的需求也不断攀升，如何实现资源的优化配置成为亟待解决的问题。
02
智慧孪生技术发展机遇
智慧孪生技术作为一种将物理世界与数字世界精准映射的新兴技术，为解决城市发展中的复杂问题提供了全新的思路和方法。
它能够通过对城市各类数据的实时采集、分析和模拟，实现对城市运行状态的全面感知、精准预测和智能调控。在新马双城协同发展的大背景下，引入智慧孪生技术，构建智慧孪生城市，有望打破地域壁垒，实现两地资源的高效整合与协同管理，提升双城整体的运行效率和可持续发展能力。
我们参考F4map的设计思路，力求实现不同比例尺下的总体地图与详细地图的集成展示；
总体构想：
小比例尺调用mapbox api的已完成地图
大比例尺采用自制3D地图
PART.2
功能介绍与展示
01
核心技术构架
01 数据层
数据来源及数据处理：在openstreetmap上下载新加坡及马来西亚地区的城市建筑、道路、土地利用类型、河流以及湖泊等的shp数据,通过代码将其转化为json格式。
为实现瓦片化加载，利用代码将所需数据瓦片化处理，转成geojson格式输出；
对于不同区域的人口统计数据，通过收集新加坡政府统计局的公开数据获得。
02 核心引擎层
Mapbox GL JS 基础引擎：提供地图渲染的基础框架，支持 3 维地理空间数据的展示与交互。
自定义流式缓存模块：作为核心模块，负责瓦片数据的渐进式加载、智能缓存管理。通过流式缓存技术，实现瓦片数据的高效存储与调用，支持多 Worker 并行处理和智能负载均衡，优化瓦片加载效率。
03 功能应用层
不同缩放比例下的不同地图调度：小比例尺下调用mapbox api进行高效率总体地图展示，在大比例尺缩放下调用自己搭建的三维可视化地图，做到小比例尺下的总体概览和大比例尺下的细节展示。
瓦片加载与渲染模块：实现建筑物、道路、土地瓦片的加载与渲染。系统根据地图缩放级别动态加载或移除瓦片图层，确保性能和资源利用最优化。
交互功能模块：支持用户点击建筑物标签进行交互，以及地图的动态缩放等操作，提升用户体验。
组件数据展示模块：能够展示新加坡不同区域的统计数据，为智慧城市建设提供数据支撑。利用搜索框组建在小比例尺视图下进行地点查询。
04 监控与管理层
实时缓存统计模块：提供缓存大小、命中率、内存使用情况等实时统计信息，方便开发者监控系统性能。
模块化管理模块：采用模块化设计，将瓦片加载逻辑和缓存管理独立封装，便于系统的后续扩展和维护。
02
功能介绍与展示
小比例尺视图
大比例尺视图
日志管理
PART.3
技术亮点
不同比例尺下不同类型地图的切换
·定义14的缩放等级为边界值，大于14调用自制三维地图，小于14调用mapbox api，在不同缩放等级下呈现不同功能。
高效的流式缓存技术、优化的瓦片处理能力、精准的三维渲染技术
· 引入自定义的流式缓存，支持渐进式加载瓦片数据，改善用户体验。
· 进一步优化瓦片加载效率，确保系统在处理海量数据时仍能保持良好性能。
· 将建筑物数据渲染为三维模型，实现城市 3 维场景的精准呈现。
智能的瓦片管理、丰富的交互体验、实时的性能监控
· 系统可根据地图缩放级别动态加载或移除瓦片图层，平衡性能与资源利用，确保在不同缩放状态下都能高效展示地理信息。
· 用户可通过点击建筑物标签与 3 维模型进行交互，同时支持地图动态缩放等操作，增强用户与系统的互动性。
· 提供实时缓存统计信息，包括缓存大小、命中率、内存使用情况等，便于开发者及时监控和优化系统性能。
PART.4
项目总结
01
结果分析
1.在不同缩放比例下实现了新加坡与马来西亚地区的总体地图与三维城市地图集成；
2.通过大比例尺的自制三维地图，详细精准的展示了新加坡及马来西亚的城市细节信息，为智慧城市建设与设计提供可视化方案。
02
困难与挑战
1.不同类型数据的汇总统一问题，如何在图上不冲突，和谐地集成不同数据，包括建筑、土地类型、交通、植被、水域等信息；
2.如何美化展示不同类型信息，如利用交通数据制作道路网，利用建筑数据制作不同高度的立体，利用土地类型划分不同区域，为林地、绿化带附上立体的树木模型，为山地附上山地模型；
3.如何优化，让模型能更快加载，让瓦片加载的思路更合理。
03
实践意义
1.作为js的初学者，首要的意义在于将课堂知识学以致用，在实践中切实体会所学知识；
2.同时在项目的过程中，我们也学习到了很多，如数据收集，数据处理技巧，模型简易制作，不同类型数据的集成，以及流式缓存技术等等；
3.我们也遇到了许多困难，比如理解流式缓存的工作原理和瓦片数据的动态更新。通过小组成员的协作和讨论，我们逐步解决了问题。我们深刻体会到团队合作的重要性，每个人的贡献都不可或缺。
来源：【智慧城市】2025年中国地质大学(武汉)暑期实训优秀作品（3）：基于Mapbox GL JS 构建的城市三维可视化系统
了解实训营戳↓下方小助手