智行珞珈地图系统

参赛院校：武汉大学

指导老师：王明军

队员姓名：苏毅 陈秋宇 普俊茜 王浚龙

一、系统背景

随着高校校园的扩建和建筑、公共设施的建设，校内地物的数量日益增加，相应的地物空间分布关系也越发复杂，而传统的印刷地图数据更新缓慢、功能与信息呈现形式单一，已不能满足高校管理人员及时更新校园数据的运维需求和广大师生、访客随时查询校内建筑、设施、道路信息的日常功能需求。因此，需要各高校根据实际情况，建立各自的智慧校园GIS平台，将最实用的校园地物信息整合到统一的平台进行管理和运维，为校内师生和访客提供基本的GIS查询和分析功能，使得用户能够方便地定位校内的关键建筑物和设施，了解其基本信息，同时结合本校的地理、人文和校园文化等特色设计实现一项或以上个性化功能，提升高校数字化、信息化建设水平，推动校园一体化管理。

武汉大学景色怡人，初春之时樱花烂漫，吸引各地游客前来赏樱。然而武汉大学校园面积广阔且路况复杂，人员众多。学生日常学习生活需便捷导航；游客尤其是赏樱季大量外来游客，急需清晰指引避免迷路，保障游览体验；学校管理层面，人员疏导、安全保障、资源调配等都依赖精准地图信息辅助决策。因此，制作并管理好服务学生、游客，助力管理的地图平台十分必要。

基于此，我团队以武汉大学校园区域为范围，开发了“智行珞珈”校园地图系统，希望能为学校部门和广大游客学生提供帮助。

二、数据制作与处理

1、数据来源

基于 OSM 数据制作武汉大学校园图，在 OpenStreetMap 下载矢量底图数据，作为本地图的基本数据。在此基础上，通过外业进行数据补充，调查建筑物的部分属性，包含建筑物用途、楼层数、楼高、可容纳人数等信息。此外，通过实地考察，对 OSM 上缺失和错误的数据进行补充与修改，并且记录所需的 POI 点的信息。

2、数据处理

（1）首先将获得的数据源导入SuperMap iDesktop中，将其添加到新地图中并调整图层顺序，面数据源如边界在最下层，其次是建筑和体育场等数据源，点数据源如快递点、线数据源如校内道路在图层最上方，以便于展现所有有效数据。

（2）对地图各数据的样式进行修改，如更换点数据和线数据的图层风格等。其次，对地图各数据源进行颜色调整使整个地图看起来更和谐。通过对landuse数据源绘制单值专题图，对地图以用地类型为分类标准进行了颜色分划。

（3）为了表达地图数据，需要使用标签专题图对数据源进行标注。标注文字字体均选择为等线体，并且根据建筑大小调整标注字体大小。

（4）由于地图要素过于复杂，不能将所有信息同时展示，需要进行比例尺设置进行调整。将相似类别的数据源放入一个根组中并得到不同的根组，然后对根组进行最大和最小比例尺的设置，并选择合适的避让范围，控制数据源可见范围，从而解决数据多而密集的问题。

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

本系统为B/S（浏览器/服务器）结构，架构分为三层，分别是：数据层、逻辑层和表现层，分别对应web应用的前端，后端，数据库。

技术选取上，除了传统的web开发架构J2EE外，在各个架构层均使用了Supermap GIS平台产品，保证了开发生态，提高了开发的效率与协同性。Webgis的地图框架主要选择开源gis框架Leaflet，简单、高效并且易用，便于后期向手机端扩展。其他技术及框架细节如图所示。

图1 智行珞珈地图系统架构

四、系统功能展示

1、用户端：学生端/游客端

针对智行珞珈地图系统主要面对的两大用户人群，我们订制了两套功能系统，它们基于同一个地图平台，具有相似的功能组和操作逻辑，同时也各有针对不同类型用户的特殊功能。进入智行珞珈首页，即是学生端/游客端的主页。

图2 系统首页

下面我们将从共性和个性功能两大方面进行功能操作介绍。

首先介绍共性功能。

（1）地图平台：使用了Leaflet 地图基础框架，它是一个轻量级的开源 JavaScript 库，用于构建互动式地图，使用SuperMap iClient for Leaflet 实现与 SuperMap iServer 服务的交互，可以在地图上显示 SuperMap 的切片图层、执行查询和分析等功能。使用了 天地图的切片服务来作为底图，编绘了校园专题底图和樱花旅游专题底图来分别显示学生端和游客端的校园地理信息。

图3 底图（a.学生端；b.游客端）

（2）侧边功能栏：在功能区块的设计上，为了避免过多的压盖地图的情况，采用了侧边功能栏的设计，既可以通过直接点击侧边栏的图标使用功能，也可以打开完整侧边栏，展开具体的功能列表，随后使用相应的功能。

图4 侧边功能栏（a.学生端；b.学生端展开；c.游客端；d.游客端展开）

（3）要素搜索功能：作为一个webgis系统，提供地理要素的相关查询是必要的。在本系统中，用户的主要关注要素为各类建筑要素，用户可以通过在查询框中输入的内容进行模糊搜索，查询到的要素会在地图上生成相应的图层，用户可以点击这些图层，系统会根据该地点的 SmID进一步查询详细信息，检索该要素的具体属性信息（如名称、类型、简介、开放状态等）并在弹出框内展示结果。且提供了“去这里”的交互按钮，允许用户将此地点作为路径分析的目标点。

图5 要素搜索功能

（4）地物分类显示功能：考虑到用户可能对校园内各类型的地物分布产生兴趣，系统设计了地物分类查询功能。地物分类查询功能主要用于根据设施类型在地图上查找和显示符合条件的地物，点击查询到的图层后会出现和要素搜索功能相同的弹出框。

图6 地物分类显示功能

（5）最近设施查询功能：最近设施查询功能是基于“距离优先”的用户心理设计的设施查找功能，考虑了真实使用情况下学生、游客寻求当前位置下距离最近的相关设施的需求场景。最近设施查询的功能根据用户在地图上选择的出发点，查找与该出发点距离最近的特定类别设施，并可以在地图上显示设施的详细信息。点击最近设施查询后系统会要求选择出发点和设施类型（提供了教室、食堂、教学楼三种类型），然后系统会在地图上显示出发点、最近的设施，以及两者之间的最短路径。通过这个功能，用户能够快速查找到与出发点距离最近的特定类别设施，并获取相应的路径指引。

图7 设施类型

图8 最近图书馆查询示例

（6）地点导航：地点导航功能旨在帮助用户在地图上规划从出发点到目的地的路径，在其设计上，系统参考了主流的网络地图平台的设计方式，与系统的查询功能进行联动。用户查询到目标地物后，点击“去这里”，通过双击地图选择出发点，并点击按钮进行地点导航。

图9 地点导航

（7）路径分析：实际应用场景下，可能存在着学生规划行程或游客规划旅游路线的情况，因此需要多目标点间的路径查询，因此系统设计了路径规划功能。

路径分析功能能够在地图上规划并展示由多个点组成的路径，用户可以选择多个路径点，系统将根据这些点进行路径分析并在地图上绘制路径。用户点击“路径分析”按钮后，系统进入路径分析模式，提示用户可以通过点击“去这里”按钮来选择路径点，选择的路径点会被记录在信息框中并在地图上标记。在信息框中可对各点进行“上移”“下移”“删除”的操作，来实现路径点的动态调整。

当用户选择了至少两个路径点后，可以点击“分析路径”按钮进行路径分析，系统会根据选择的路径点计算最优路径。

图10 多地点路径分析

（8）三维飞行路线：随着三维技术在gis领域的快速发展，系统针对校园内重点区块进行了三维展示，通过三维飞行功能实现，基于此向用户展示校园内的模拟三维场景。点击三维入口后可以开启三维地图，用户可以通过通过三维地图立体直观地了解校园环境，三维地图中预设了飞行路线功能，主要用于展示沿指定路线的飞行过程，用户可以通过交互式的按钮和设置，控制飞行路线以及站点的显示、飞行过程的开始和结束。

图11 三维飞行路线

（9）意见反馈：作为一个健康的系统，维护与运营是不可缺少的。系统在用户端设计了意见反馈的功能，使得用户在发现系统信息错误或其他校园实际情况时进行反馈，并与后续的管理端进行联动。用户点击页面上的“意见反馈”按钮后，系统会激活意见反馈模式，在模式激活后，用户可以在地图上点击任何位置，在点击的位置上显示一个弹窗表单，用于填写有关该地点的意见。它允许用户在地图上标记地点并提交相关信息，提供了一种简便的方式让用户与地图进行交互，收集和管理用户反馈。

图12 意见反馈

其次，介绍个性功能。

在学生端/游客端主界面的右下角，有一个功能切换按键，点击即可进行双端切换。分别介绍两端特有的功能：

学生端

校园专题地图：注重在校学生的校园生活，对建筑设施进行比例尺分层设置，以便于更详细地展现建筑所在；添加校巴路线及校巴站点信息。配色采用简单的黄绿搭配，简明且舒适。

图13 校园专题地图

武汉大学校巴路线：针对学生用户，校园巴士是生活中的主要通勤方式，在跨学部上课时十分方便，因此系统针对学生用户设计了校巴路线可视化的功能。

系统中导入了武汉大学1号线（大环线）、2号线（小环线）、5号线（往返医学部）这三条主要公交线路，供学生查看路线并选择合适的站点。

图14 武汉大学校巴路线

游客端

樱花旅游专题地图：注重游客的旅游体验，去除仅校内学生可乘坐的校巴路线设置，添加推荐赏樱路线，添加武汉大学主要景点展示，增加最佳游玩路线。配色采用黄粉搭配，融入樱花粉元素，更具特色。

图15 樱花旅游专题地图

推荐赏樱游客路线：针对游客用户，可能存在着对校园内景观分布不了解的情况，因此系统通过收集相关信息，整理了一条了覆盖到大多数主要景观的游客游览路线，游客可以点击路线上的景点来查看景点图片与名称，并且根据实际需求选择游览路线。

图16 推荐赏樱游客路线

2、管理端

管理端是为了本系统能够更好的服务用户而设置的系统，通过与用户端的数据与意见反馈进行联动，从而实现管理平台的搭建及实时反馈情况的可视化，便于管理人员更好的对平台进行优化升级。

（1） 管理人员登陆注册功能

为了防止非管理人员对数据进行恶意篡改，系统在管理端设置了登录注册功能，保障系统的安全性。目前只有超级管理员具有登录权限，输入对应的账号密码通过验证即可登录。暂未开放注册功能，后续面对管理人员申请可能会开放注册功能。

图17 管理人员注册登录

（2）数据管理功能

数据管理功能旨在提供更便捷的数据修改功能，将传统的数据库表修改整合成WEBUI的形式，降低数据管理的使用门槛。

管理端的数据管理的界面默认显示所有的要素信息，点击地物要素后会高亮表格的相应行，要素的属性可以在表格中进行查看，表格每页显示固定数量的记录，用户可以通过分页控件切换页面查看不同的结果。

同时可通过点击地物来实现地物的编辑功能，可对要素的名称、是否开放、开放时间、学部进行编辑。

图18 数据管理

（3） 管理可视化功能

系统设计时，避免了传统的管理信息浏览模式，采用各类可视化图表的方式对部分信息进行展示，协助管理人员获取重点、分布特征。

在系统管理可视化功能下，设计了类别点击柱状统计图，搜索词云图与意见反馈热力分布图，这三个模块分别与用户端的地物分类显示功能，要素搜索功能和意见反馈功能对应，前两者用于获取用户对系统的使用习惯，了解用户的关注重点，进行用户画像；意见反馈热力分布图用于获取意见反馈的高频区域，从热点判断该区域是否存在整体问题，如区块数据偏移等。可视化图表如下所示：

图19 数据管理可视化

（4） 意见反馈查看功能

针对用户端的意见反馈，在管理端提供了意见反馈的展示查看。通过地图+表格的形式，分别从地理信息与属性信息的维度进行展示，帮助管理人员更好的进行相关处理。

图20 查看意见反馈

五、系统亮点

1、场景内容及色彩丰富，个性地图更有利于展现校园特色;色彩融合与搭配更鲜艳，给予使用者更强的视觉冲击。

2、采用以超图技术系列产品为主的技术栈，加上传统web开发技术辅助，保障了系统技术生态的统一性与稳定性。

3、三端两维度联动设计，实现大多数校园地图应用场景的覆盖。设计学生端，游客端，管理端，端间联系保证系统联动，双维度全面展示校园面貌，构成丰富的系统生态。

4、界面美观友好，地图和系统界面美观协调：该部分由专门的团队成员负责地图设计与界面样式设计，采用学校特色的绿瓦粉樱的设计风格，色彩搭配和图标设计使整个界面看起来清新而富有活力。

5、从用户和管理人员的实际应用场景出发，构思合理的功能链条，用交互的方式解决现实中的实际问题，并用地图，图表等可视化手段辅助信息获取与决策，将技术真正融入生活。

六、团队总结

本次命题开发组的题目不似以往，虽然确定了作品整体的方向，但并未要求作品具体的功能，所以实际上给了团队很大的发挥空间。

1、在浏览命题开发的要求后，我们团队首先从学校自身的实际情况出发，分析用户人群与各类用户人群的不同需求，进而再搭建系统的整体框架，从设计的时候就考虑多元需求与多元功能，实现三端两维度联动。

2、具体开发过程中，成员分工明确，协同开发，周期性的对已有成果进行整合，提高了开发效率。

3、对作品的质量精益求精，每一个地图元素，每一个UI，每一个功能，团队成员都力求完美，通过设计提升用户使用体验。

七、指导老师点评

八、团队合影

左起：王浚龙 、苏毅 、王明军 指导老师、陈秋宇、普俊茜