互联网地图美学设计与场景构建研究——以《武汉红色文化地图》移动系统开发为例

程思聪，谭仁春，黄思思

(武汉市测绘研究院，湖北 武汉 430022)

1 引 言

地图是人们记录、认识、分析客观地理环境的手段和工具，在人类社会的发展中发挥着重要作用[1]。随着移动端可视化技术手段的提高，在线地图成为信息时代的地图服务形式，根据用户需求提供自动搜索、人工查询、在线交流等方面的地图服务[2]。随着公众地图审美的提高，研究地图美学设计、艺术化表达以及主题化场景构建，从而更好地实现信息传输与主题表达是十分必要的。为了庆祝中国共产党成立100周年，武汉市测绘研究院开发了《武汉红色文化地图》移动系统。系统以移动互联网为载体平台，从地图美学设计理念角度出发，构建了可漫游交互的武汉市红色文化场景。本文以《武汉红色文化地图》移动系统开发为例，对互联网地图美学设计与场景构建的理论与技术实践展开探讨。

2 地图美学理论基础

2.1 地图美学思维

地图的美学内涵具有鲜明的跨域特点。首先，地图拥有比例尺、坐标系、地图投影等数学基础，保证了地图的科学性。其次，地图拥有抽象化符号语言并以信息传递为目的，保证了地图的艺术性和实用性，因此，地图是科学、实用和艺术的完美融合，是形象思维和逻辑思维的和谐统一。此外，互联网地图相比于传统地图还具有交互性、动态性、共享性、多维度等特点，在构建立体化场景方面更具技术优势，并能营造丰富的意境美，从而更加广泛深入地传递主题理念与文化价值。

2.2 地图美学元素

从地图美学思维出发，构成其美学元素包括三种：艺术美、科学美与实意境美。地图艺术美元素主要指符号、色彩和注记[3]，这也是地图语言的基本要素。地图符号通过形状、尺寸、色彩、方向、亮度和密度等基本变量反映事物的数量和质量特性，色彩则是运用色相、亮度和饱和度的变化与组合，结合人对色彩感受的心理特征，建立色彩与制图对象的联系。地图注记是指字体、字大(字号)、字色、字隔、字位、字向和字顺等注记要素，注记通常与点、线、面、体组合共同构成地物的几何特征与属性特征。通过符号、色彩和注记的设计，使得地图呈现出风格化的形象效果，带给人艺术化的直观感受。

科学美是指地图所反映地理空间事物的准确性与自然和谐，而使人产生的美学感受[4]，主要通过地图内容的准确性、综合性、整体性与逻辑性来体现。首先关于准确性，从地图的定义来看，数学基础是其准确性的保障依据。地图的综合性指地图要素的取舍与概括，主要为了信息密度与负载量的平衡。地图本质上就是对现实客观世界的抽象表达，这个过程中必然要对信息进行取舍与概括。整体性和逻辑性是从地图要素的层次划分、要素关系的协调处理、内容的排版布局等方面体现，针对电子地图还包括多比例尺缩放显示、交互操作之间的有序衔接等。

意境美是将形式与内容融合，通过风格化的艺术表达、理性化的时空呈现以及整体贯彻的主题价值传递，营造具有沉浸感的地图场景。地图的意境美起初源自山水画作笔法，早期地图作品与山水画作有着紧密联系，包括自然地理要素之间的空间关系和作者的主题抒发。因此地图设计可借助其中的技巧，比如散点透视、移步换景的方法[5]，对于意境美的营造颇具效果。

3 移动系统美学设计与数据处理

3.1 设计构想

作为宣传建党100周年的主题性作品，《武汉红色文化地图》移动系统具有明确的主题导向和价值传递目标，从表现形式到内容选取都紧紧围绕红色文化主题，旨在展示武汉市丰富的红色文化资源和辉煌的百年发展历程，同时也是对互联网地图美学场景理念的一次探索实践。

系统通过红色印迹、城市发展元素的符号设计，橙红相融、稳重浓烈的色彩设计，突出红色、文化、发展的风格主题，体现电子地图的艺术美。通过以中心城区为范围的红色印迹空间分布漫游与信息查询、以时间为轴线的重大事件呈现，使内容组织准确性、逻辑性与整体性相结合，从空间写意与时间叙事的角度体现电子地图的科学美。通过分类分级界面模块的设计与交互营造出沉浸式的动态交互场景，体现地图的意境美。此外，阅读地图是视觉表达与用户思维的交互过程，认知心理学在其中起到重要作用，设计者必须考虑到互联网移动用户的使用习惯、地图的使用和交互环境等[6]，设计多比例尺缩放与专题要素的分层分级显示、三维模型交互、数据组织关联等，对武汉红色人物、事件与场景进行开发挖掘与发布展示，使用户在纸质版基础上，从空间、时间与事件的角度获取更深入广泛的信息，达到宣传建党100周年以及武汉红色文化的作用。红色地图系统美学设计框架如图1所示。

图1 红色地图系统美学设计框架

3.2 数据处理

移动系统数据包括地理底图与专题信息两类数据处理与加载，是地图美学呈现的数据基底。其中地理底图作为背景辅助，专题信息作为主题表达的重点。

地理底图范围是武汉全市域，主要数据来源是OSM开源地图数据，结合权威的基础地理信息数据库进行更新与清理，使其满足准确性、美观性的需要。包括全市高速、国道、省道、主干道、次干道等主要路网、水系、山体绿地等自然地理要素以及市界、区级以上政府驻地、重要交通及市政设施、公园广场、大专院校、标志性建筑等社会人文要素。地理底图数据如图2所示。

图2 地理底图数据

专题信息包括党史遗址暨爱国主义教育基地、党史遗址、党史遗迹、爱国主义教育基地四大类红色专题点位及相关文字、图片、图表、插图等信息。专题信息的处理主要包括坐标定位与属性建库，并在此基础实现数据导入编辑。结合基础地理信息数据库以及互联网地图对专题点位进行经纬度坐标标定和地址记录。结合前端地图展示需求，将Excel数据表格按照一定属性字段(如表1所示)转换为JSON文件，并采用ArcGIS软件将Excel数据通过XY坐标生成工具实现点状shp数据的转换，进而结合路网确定统一坐标系，导入Mapbox编辑器中。

表1

3.3 视觉层次设计

视觉层次设计针对整体布局和地图主体两类。其中整体布局是指移动端界面的功能分布，包括主图及信息卡片、菜单导航栏、搜索栏等，主图及信息卡片为第一视觉层次，菜单导航栏为第二视觉层次，搜索栏为第三视觉层次。视觉层次设置如图3所示。

图3 视觉层次设置

地图主体视觉层次分为静态和动态两种模式，其中静态视觉层次体现的是同一比例尺下不同要素之间的视觉层次差异，第一层次是红色文化专题信息，通过细节真实的三维模型以及醒目形象的图标符号结合注记表示，第二层次是标志性地物，采用弱化的符号与建筑模型体现，第三层次是地理底图要素，包括路网、水系、绿地等，采用简洁的符号表示。

动态视觉层次体现的是不同比例尺下不同要素的显示级别，针对屏幕负载量限制，不同重要性的要素设置不同的显示级别，比如党史遗址暨爱国主义教育基地专题是第一显示层级，党史遗址和党史遗迹是第二显示层级、爱国主义教育基地是第三显示层级。动态视觉层次的设计使得用户在缩放比例尺漫游地图时，重要专题信息始终在第一视觉层面，保证任何尺度下图面的层次清晰。

3.4 符号设计

红色地图的符号设计考虑了心理学认知相关知识。地图上的图形符号与色彩都应看作是客观环境刺激的表现形式，而读图者对地图的视觉反应则是感受和经验的综合叠加。在地图符号设计中引入心物学方法，就是企图探讨刺激与反应的内在关联，融入符号的美学设计，使图形符号及色彩适应视觉感受的特点，从而提高地图的信息传递效果[7]。而人对事物感受的深化和加强正是在旧的审美经验记忆基础上推陈出新而获得的[8]，因此在符号设计时，需要参考以往的地图符号与常规标准，充分考虑到红色主题因素，体现象征性。

4 红色文化场景模块的构建开发

4.1 整体场景构建

整体场景按照入口、主场、专场的模式布置，由浅入深、由粗到细、由整体到局部，层层深入构建红色文化场景。通过封面将用户带入红色文化主题氛围，主场是以两江三岸交汇及其周边为范围的地域空间分布，使用户进入红色专题地理空间，专场设置不同的专题模块“红色印迹”“红色线路”和“百年辉煌”，通过时间轴线、线路走向、叙事描述等从不同角度、不同层面、不同维度向用户呈现丰富的专题与空间信息。场景入口与主场景如图4所示。

图4 场景入口与主场景

4.2 红色印迹模块

“红色印迹”模块从三维场景角度展示了武汉党史遗址、党史遗迹、爱国主义教育基地、红色旅游资源及红色教育资源等红色信息，并提供了信息检索、三维交互等功能。其中装饰栏以专题红色为底色，建党百年图标放置左侧，在百年建党史武汉的变迁中选择从古至今的三个典型建筑作为主题内容，并用小片绿色树叶作为点缀。主体部分展现红色专题信息，包含红色专题缩略图、名称和地址。点击缩略图进入三级页面，展示各专题点位详细信息，并显示切换3D视图。

4.3 红色线路模块

“红色线路”模块包括红色经典、伟人足迹、红色宝藏、建军策源、革命烽火、红色英烈等6条红色旅游的线路、景点等详细信息。线路地图展示红色线路整体走向，并将其定位于图面中心。线路详情包括线路途经点，每个景点之间步行与车行的距离和时长，同时可点击进入景点详情介绍。线路样式以结合红色专题色为底色的纵向样式条展开，每个路线景点所在行用较大红色圆点样式，里程展示所在行用白色小圆点样式，并用高级红色样式条连接。步行里程和驾车里程两端对齐，结合Icon图标便于用户快速理解。

4.4 百年辉煌模块

“百年辉煌”模块采用时间叙事和信息图表融合表达的方式(图5)，展示了新民主主义革命时期(开天辟地)、社会主义革命和建设时期(改天换地)、改革开放和社会主义现代化建设新时期(翻天覆地)和中国特色社会主义新时代(惊天动地)四个发展阶段武汉社会经济、科技文化等方面的发展成就。主要采用时间轴形式呈现各个时期的历史进程与重大事件节点，并采用从整体到局部、通过不同角度不同专题呈现辉煌发展历程。

图5 红色文化场景模块

5 结 论

地图美学是近年来地图学领域兴起的研究方向，将地图的科学性与艺术性充分融合，并采用多样化的艺术与技术手段充分挖掘地图的美学价值，提升地图的人文功能。其中对于互联网地图美学的研究是重要关注点，以传统地图美学思维为基础，充分利用三维实景、虚拟现实、人工智能、场景模拟、动态交互等多种现代技术，并结合认知心理学、信息传输学、美学、地图学等理论科学，使古老的地图在现代互联网时代重新焕发生机，充分发挥其科学实用与艺术美学兼顾的功效。