汉城智图-武汉智慧城市服务平台

参赛学校：西南石油大学

指导老师：汪宙峰 王成武

队员姓名：熊乾绪 别致 黄嘉雪 许媛媛

作品展示

一、系统背景

随着信息技术、物联网、大数据、人工智能等新一代信息技术的快速发展，智慧城市（Smart City）的概念逐渐被提出并广泛应用。智慧城市最早可追溯至20世纪90年代欧美国家提出的“数字城市”概念，旨在利用信息化手段实现城市基础设施数字化和信息共享。进入21世纪后，IBM提出“智慧地球”战略，将大规模感知、数据挖掘和智能决策融入城市治理，“智慧城市”理念由此兴起并快速发展。

智慧城市是将城市的基础设施建设、公共服务、环境保护、经济发展、交通出行等多维度与先进的信息技术深度融合，通过感知设备采集城市运行的实时数据，结合云计算、大数据和人工智能技术进行分析和决策，从而实现对城市资源的智能化调度和科学化管理。这不仅提升了城市运行效率，还为市民提供更精准、便捷和高质量的生活服务。

在社会层面，智慧城市的发展有助于解决城市化进程中面临的交通拥堵、环境污染、资源浪费等问题；在经济层面，智慧城市推动了数字经济、智慧交通、智慧医疗、智慧文旅等新兴产业的发展；在治理层面，智慧城市提高了政府决策科学化、公共服务精细化和社会治理智能化的水平。

我国智慧城市建设始于2008年，近年来国家和地方政府相继出台政策加快智慧城市和“新型智慧城市”建设，推动城市治理体系和治理能力现代化。武汉作为国家中心城市和中部地区重要交通枢纽，智慧城市的建设不仅有助于提升城市管理效率，还能促进产业升级和数字经济发展，为市民带来更加智能、绿色和宜居的生活环境。

二、数据制作与处理

1.数据来源

本系统的数据来源主要包括开源数据、官方提供数据以及网络公开数据三类。基础空间数据方面，建筑物数据来源于 OpenStreetMap（OSM）开源平台，用于构建武汉市三维城市模型；道路路网与地铁线路数据用于支撑交通可视化与路径规划分析；武汉市矢量底图由竞赛官方提供，作为系统统一的基础地图数据。在城市公共设施数据方面，通过网络爬取方式获取了武汉市医院、学校、景点等 POI 数据，用于设施查询、分析与服务功能的实现。此外，系统还引入了武汉市城市功能分区相关数据，为城市空间分析与综合展示提供支撑。各类数据经统一处理与规范化后，共同构成系统的空间与属性数据基础。

2.数据处理

（1）将武汉市矢量底图、道路网络等基础数据统一导入 SuperMap iDesktop 平台，对各类图层进行合理的顺序组织与样式设计，并设置清晰的标注规则及最大、最小显示比例尺阈值，构建出层次分明、可灵活切换的武汉市基础地图，为后续地图展示与分析提供可靠底图支撑。

（2）基于武汉市道路与轨道交通数据构建交通网络数据集，并发布为网络分析服务，实现路径规划、出行分析等交通相关功能，为智慧交通应用提供底层数据与服务支持。

（3）对武汉市建筑物数据进行三维建模与纹理贴图处理，构建真实高度的城市三维模型，并导出为三维工作空间发布至 iServer，为系统中的三维城市展示、漫游与分析功能提供真实、直观的空间环境。

三、系统模块设计及技术路线

本系统采用 B/S（Browser/Server）架构，整体架构划分为业务逻辑层、业务支撑层、数据交互层和数据支撑层四个层次，各层职责清晰、协同工作，保证了系统的稳定性与可扩展性。

业务逻辑层面向用户，主要实现系统的核心功能，包括二维与三维底图展示、地图交互操作以及各类智慧城市业务应用，为用户提供直观、友好的使用体验。

业务支撑层为系统运行提供技术基础，前端基于 Vue3 框架进行开发，结合 Leaflet、Cesium等地图引擎实现二维与三维可视化；同时依托 SuperMap 云服务、天地图服务 提供专业的地理信息支撑。后端采用 Spring Boot 框架构建业务服务，并通过 Ollama 本地部署的大模型实现智能问答与知识增强能力。

数据交互层通过Axios实现前后端的数据通信，保障业务请求与数据响应的高效、稳定传输。

数据支撑层主要由 MySQL 数据库与SuperMap iDesktop 11i组成，用于存储系统业务数据、空间数据及专题成果，为系统的各项功能提供可靠的数据保障。

图1 系统架构图

四、系统功能展示

系统一共分为web端和小程序端，其中web端包括了用户端和管理端。

1.用户端

(1) 系统首页

首页的界面分为城市总览和智慧交通两部分。首页设计为可视化大屏展示，目的是希望用户在进入系统的第一时间获取关于武汉大致的信息。中央区域：基于Three.js实现武汉市的三维立体动态地图，为用户提供直观、科技感强的城市空间认知，地图上标注各区位置和核心数据。左侧面板：重点展示城市经济与发展数据，包括武汉市各区 GDP 分布、未来一周天气趋势折线图和热点词云，帮助用户了解城市经济态势和舆情热点。右侧面板：汇总城市运行和环境监测信息，包括基础设施建设数据、实时空气质量、旅游资源类别分布等，为城市运行状态提供即时反馈。底部信息栏：以城市快讯形式实时呈现本地新闻资讯和重要通知，方便用户获取动态信息。

图2 系统首页

(2) 地图平台

• 地图平台的页面采用了左侧导航栏+右侧地图容器的方式，同时设置导航栏可折叠，方便用户全景观察地图。

图3 地图平台页面

• 打开右侧的“意见反馈”小工具条，可以对城市中的建设发表意见，同时在“我的”页面中查看用户发表的所有反馈和反馈的处理进度。

图4 发表反馈

• 查看反馈信息

图5 查看所有反馈

(3) 二维地图功能

• 打开左侧的二维地图导航栏，一共有“图层查看”、“查询工具”、“路径规划”以及“分析工具”四个功能。同时点击后会在地图上叠加制作好的武汉市基础地图。

图6 二维地图页面

• 地图左侧提供了五个小工具，分别是清除图层，测量，切换底图，导出地图以及刷新地图。

图7 地图小工具

清除图层：可以清除除天地图底图以及叠加的武汉矢量图之外的所有图层，可以防止地图图层过多导致页面卡顿，体验感下降。

测量工具：点击之后在地图的左下角会出现一个测量工具条，用户可以连续测量，将测量的结果实时的展示在地图上。

导出地图功能：用户点击该工具后，可以在地图上绘制自己想要的区域，然后输入地图图片的标题后，可以直接下载该地图。

图8 导出地图工具

图层查看功能：我们采用地图右侧添加悬浮工具栏的方式，提供了武汉市高程图、水系、武汉市主体功能区规划图以及POI热点图，并提供相关图例供用户查看。这里以主体功能区规划图为例。

图9 查看相关图层

• 查询工具：提供任意查询、拉框查询以及天气查询三种查询工具。

例如选择查询设施为景点，输入关键词后，下面会出现相关的景点的卡片，左边地图出现对应点位，点击每个卡片跳转到该点位。

图10 查询景点设施

点击某个景点后，出现弹窗，用户可以输入距离，查询该距离半径内的所有酒店。我们将酒店的查询集成到景点查询中，与实际需求相结合，简化了用户查询过程，并且自定义距离筛选更加灵活。

点击寻找周边酒店后，地图上会出现该半径的缓冲图层，然后通过距离查询查询到该缓冲区域内的所有酒店。

图11 查询景点的周边酒店

酒店查询完成后，点击酒店的点符号，可以出现关于酒店信息的弹窗，弹窗设计精美直观，用户使用方便，并配合多张酒店图片供用户查看。

点击“去这里”后，可以通过网络分析自动规划出从中心景点到该酒店的路径。

图12 景点到酒店路径

医院和学校的查询方式同理。

拉框查询：首先叠加武汉的街道活力图，用户可以选择自己感兴趣的区域进行绘制，绘制结束后右侧面板出现对应的POI统计图表。

图13 拉框查询

天气查询：用户自己在地图上点击一个点，然后会自动打开该点的弹窗，其中展示了未来一周的天气信息，右侧的工具面板还给用户提供了未来几个小时的天气状况以及温度变化，以及出行生活建议。

图14 天气查询

• 路径规划：先给地图叠加了武汉市的路网以及地铁图。右侧的工具面板提供了四种方式供用户选择：步行、驾车、骑行以及公交地铁。通过起点和终点输入框右侧的按钮，提示用户在地图上选择起点和终点。
• 选择完起点和终点后，点击路径规划按钮，即可在地图上显示路线，并在右侧的工具面板给出了详细的出行信息。这里以公交地铁的规划结果为例。

图15 公交地铁路径规划

• 服务区分析：通过按钮文字提示用户在地图上选择一个点，通过天地图的标注用户也可以寻找到相关设施点。点绘制完成后，弹出弹窗提示用户输入想要的服务区半径，输入完成后即可生成对应半径的缓冲区，并在右侧的工具面板中给出服务区相关的解释。

图16 服务区分析 

(4) 三维地图功能

三维地图左侧的导航栏提供“环绕观察”、“路线游览”和“可视域分析”三个功能。

图17 三维地图页面

• 绕点旋转：点击该按钮后提示用户在地图上选择一个点，然后便可控制相机绕该点环绕一周后取消相机固定。
• 天气模拟：在地图的左上角有一个按钮，其中提供了雾天、雪天、雨天的天气状况，默认为晴天。
• 路线游览：点击该按钮后，在地图的右上角会出现地点的选择器。用户输入关键词后会在下拉框中自动检索相关的结果，点击该结果后视角可以平滑的飞行到该点。我们将二维的路径分析搬到了三维。确定好起点和终点后，点击“生成路径”可以生成从起点到终点的路径。点击“开始游览”可以沿着用户刚刚生成的路线进行飞行。
• 可视域分析：点击该按钮后，在地图的右上角会出现包含开始分析和结束分析的按钮。点击开始分析后，提示用户在地图上选择一个点，并拖动鼠标进行可视域的绘制（在鼠标点击的点高度上增加了人的高度（1.8m））。我们设计可视域分析的目的：辅助选址与城市规划：市民和规划者可通过可视域分析直观了解某一位置的可视范围，为居住选址、商业布局和公共设施规划提供参考，帮助优化城市空间利用。提升出行与旅游体验：在旅游景点或观景平台的选择上，用户可提前了解可观赏的景观范围，帮助制定最佳观景路线和出行计划。

三维功能：

图18 三维功能组图

(5) “楚韵知途”AI助手

• 页面设计为左侧的对话管理面板和右侧的主聊天区域。点击“新建对话”按钮可以新建相应名称的对话。

图19  AI助手页面

• 功能描述：用户可以选择是否开启深度思考和知识库检索。开启知识库检索后，大模型首先从本地的知识库中检索信息并进行相关回答。同时用户可以上传本地的文档参与知识库构建。

图20 功能描述

(6)“汉城风情”页面

页面设计采用上方轮播图，下方为相关描述。图片鼠标滑动具有动态效果，同时点击对应图片后，会从下方弹出一个弹窗自动循环播放视频。

图21  “汉城风情”页面

我们设计“汉城风情”页面，是希望赋予智慧城市系统更高的文化内涵与体验价值，而不仅仅是单纯的数据堆叠。通过图文并茂的形式，全面呈现武汉深厚的历史底蕴与独特的文化特色，让用户在获取信息的同时，感受到城市的故事与魅力，从而提升系统的观赏性与使用价值。

页面展示：

图22  图片效果

2、管理端

(1) 登录界面

输入账号密码和验证码完成登录。

图23 管理端登录界面

(2) 首页

系统的主页面有左侧的导航栏和右侧的面板组成。首页面板有三个盒子组成，一是市民反馈信息统计情况饼图，方便管理人员第一时间知晓从而及时处理；下面的词云图反映了用户反映信息的热点，右侧的主地图盒子由天地图和聚合图组成，聚合图由用户反映点位构成，鼠标放到聚合点上可以出现其区域，点击该聚合点后可以放大地图，交互性更强。

图24 管理端首页

(3) 知识库管理

主面板由表格构成，上方表头可以新增文档以及刷新文档列表。上传完文档后便可立即刷新。

图25 知识库管理页面

(4) 设施点管理

设施点管理包括医院、学校以及景点的管理，三个的处理差别大，因此将医院作为演示。

上方表头可以根据关键字检索，检索完成后地图上出现对应医院点位以及下方表格出现对应属性信息，点击“定位”按钮可平滑飞至该医院点位处。点击下方表格中的名称、地址、类型以及电话这四列其中一列便可将表格变为输入框，输入完更新信息后按回车键便可以更新信息并同步到数据库。

图26 医院点位检索及属性信息编辑

(5) 市民反馈信息处理

页面同样由支持分页查询的表格构成，表中可以预览每条反馈信息。点击图标可以定位到对应的位置，点击图片可以放大查看具体情况，鼠标移动到描述和地址列可以查看完整的信息。点击处理后即完成对该条反馈的处理，状态颜色块将变为绿色，同时用户端实时更新。

图27 反馈处理

3.小程序端

在 Web 端系统的基础上，我们同步开发了面向市民与游客的小程序端，重点聚焦武汉旅游场景，如景点浏览、酒店查询与出行攻略等内容。小程序端依托轻量化、易访问的特点，使用户无需复杂操作即可随时获取城市旅游与服务信息，作为 Web 端智慧城市平台的重要补充。一方面，小程序承担了面向公众的便捷服务与展示功能；另一方面，其数据与功能与 Web 端保持一致，实现多端协同与信息互通，既提升了系统的实用性，也拓展了智慧城市应用在移动端的落地场景，增强了整体服务覆盖能力与用户体验。

(1) 首页页面

首页页面包括的地图显示、公告专区、景区推荐、攻略、酒店以及特产推荐，公告页面加载武汉市旅游重要信息。

图28 首页及公告页面

(2) 景区页面

景区页面加载武汉市各景区信息，上部搜索可对景点搜索，点击分类栏可以对某兴趣景点进行筛选。点击某个景点后，可以加载景点的详细信息，提供景点的介绍、用户评价、实用信息，方便用户全面了解景点。

图29 景点及信息页面

(3) 攻略页面

攻略页面采用卡片式布局进行展示，用户可以根据感兴趣的部分进行筛选，并进行攻略查看，攻略详情页提供时间路线安排、小贴士及相关图片，细致介绍优化可游玩体验。

图30 攻略页面

(4) 推荐酒店页面

推荐酒店页面采用卡片式布局，用户在上方的下拉框进行筛选，得到兴趣酒店。点击兴趣酒店即可了解详细信息。以筛选的槐南滨畔民宿为例，详情民宿页面上方以轮播图形式展示民宿环境，下方包含民俗介绍、设施与服务、用户评价，方便用户快速了解酒店信息，进行出行规划。

图31 酒店推荐页面

(5) 特产推荐页面

推荐特产页面采用卡片式布局，用户在上方的下拉框进行筛选，得到兴趣特产。点击特产即可了解详细信息。以筛选武汉热干面为例，在类别中选择“面食”，价格区间选择“50-100”，价格排序选择“从低到高”，点击进入详情页介绍商品详情、产品特点、产品展示，方便用了解武汉特产。

图32 特产推荐页面

系统亮点

1.多样化、高交互性地图查询方式：系统集成关键词搜索、拉框查询、生活信息查询及距离分析等多种查询手段，用户可从不同角度快速获取空间信息，提升地图使用的灵活性与实用性。

2.多端协同，构建完整智慧城市应用体系：系统涵盖用户端、管理端与小程序端，多端功能互补、数据共享，实现从市民服务到城市管理的协同联动，提升整体系统的服务能力与应用覆盖面。

3.民意反馈与协同治理机制：通过地图选点方式提交反馈信息，确保问题位置精准可靠，并支持图片上传与进度跟踪，增强市民参与感，助力城市精细化治理。

4.友好直观的系统界面设计：系统界面布局清晰、交互流畅，结合多种可视化组件与合理的功能分区，降低使用门槛，提升用户整体体验。

5.AI技术赋能智慧城市应用：引入本地大模型构建智能问答机器人，并结合武汉专题知识库，实现更具针对性和准确性的城市信息问答，增强系统智能化水平。 

6.多种数据可视化技术综合运用：融合 three.js、Mapbox、ECharts 等多种可视化技术，对城市空间数据进行多维度展示，使城市运行态势更加直观、生动。

团队总结

在本次系统开发过程中，团队成员分工明确、协同高效，充分发挥各自的专业优势，顺利完成了从数据采集与处理、三维建模，到系统架构设计、功能实现及界面优化的完整开发流程。

项目推进过程中，团队围绕实际应用需求不断进行技术选型与方案优化，积极探索 GIS 技术与 Web 开发、三维可视化及人工智能技术的深度融合，有效提升了系统的整体创新性与实用价值。通过持续的沟通协作与阶段性迭代，确保了系统功能的稳定实现与整体质量的不断提升。

本次竞赛不仅锻炼了团队在工程实践、技术整合与问题解决方面的综合能力，也加深了我们对智慧城市建设与信息化应用场景的理解，为今后在相关领域的深入学习与研究奠定了良好基础。

最后，衷心感谢指导老师在项目全过程中的悉心指导与支持，同时感谢超图公司提供的专业竞赛平台与技术环境，为本次作品的顺利完成与成果展示提供了有力保障。

指导老师点评

本作品紧扣“智慧城市”与“数字孪生”的国家战略需求，以武汉市为研究蓝本，成功构建了一套集二三维一体化、多端协同与智能交互于一身的综合服务平台，展现了团队卓越的全栈开发能力与创新意识。系统通过“汉城风情”模块将地理信息与城市文脉深度融合，并利用“Web端+小程序”双端联动，打通了从管理者监管到市民便民服务的“最后一公里”，具有较高的实际应用价值。

团队合影

从左到右：别致、熊乾绪、汪宙峰（指导老师）、黄嘉雪、许媛媛