EN中文

Journal of Geo-information Science >

2024 , Vol. 26 >Issue 9: 2064 - 2076

DOI: https://doi.org/10.12082/dqxxkx.2024.240316

Dynamic Interactive Map-based Dashboard Design for River Management in the River Chief System

  • DU Yixian , 1, 3 ,
  • LIU Xiaoyan 1, 2, 3 ,
  • YANG Jijun 1, 3 ,
  • ZUO Chenyu 4 ,
  • SHEN Jie , 1, 2, 3, *
Expand
  • 1. Key Laboratory of Virtual Geographic Environment, Ministry of Education, Nanjing 210023, China
  • 2. Jiangsu Center for Collaborative Innovation in Geographical Information Resource Development and Application, Nanjing 210023, China
  • 3. School of Geography, Nanjing Normal University, Nanjing 210023, China
  • 4. Center for Sustainable Future Mobility, ETH Zurich, Zurich 8092, Switzerland
* SHEN Jie, E-mail:

Received date: 2024-06-05

  Revised date: 2024-08-11

  Online published: 2024-09-10

Supported by

National Key Research and Development Program of China(2021YFE0112300)

National Natural Science Foundation of China(42371444)

Fold

Abstract

In the context of ecological civilization construction, the comprehensive implementation of the River Chief System has become a powerful measure for China to address complex water problems and maintain the ecological health of rivers and lakes. However, there are still some issues, such as insufficient theoretical research and a lack of design methods for river management maps based on the River Chief System. To address these issues, we have explored the following aspects of research. Firstly, this study interpreted the connotation of the River Chief System from four aspects: organizational structure, river chief responsibilities, main tasks, and supervision and assessment. From the perspective of maps, we analyzed the information transmission and mapping requirements of relevant departments and river chiefs at all levels. Based on the thematic map theory, the concept of a river management map is proposed, and its characteristics were summarized. Building on this, we proposed the design concept of "multi-department collaborative linkage and multi-level river chief task decomposition" from both horizontal and vertical coordination dimensions, thereby establishing a content framework for river management maps. Secondly, based on the theory of geographic scenarios, this study summarized and analyzed the elements of time, place, people, things, events, and phenomena in river management scenarios. We proposed that river management maps should select appropriate spatiotemporal scales, representation methods, visual variables, user interactions, and communication media for user groups to guide the selection of mapping expression content for each map group. The presentation forms of information in the river management dashboard map mainly include maps, information charts, and forms, which were also classified and organized in this study. Then, based on the application scenario of the map, this study adopted an interactive dashboard format and electronic screens as the communication medium, utilizing the five elements user experience model and drawing upon theories of cognition, visualization, and map interaction to design the information architecture, interface layout, color scheme, information presentation, and interactive features of large-screen maps. Finally, taking Baoshan District, Shanghai, as a case study, a river management dashboard map system is designed and implemented, followed by a systematic usability evaluation. The results indicate that the dashboard map supports the display of multi-scale river management information, facilitating clear visibility of target information for users. The aim of this study is to actively contribute to the standardization and regularization of river management maps tailored to the River Chief System, facilitating multi-departmental collaborative management and promoting co-construction and resource sharing.

Key words： River Chief System; river management; dashboard; map design; user interface design; dynamic interaction

Cite this article

DU Yixian , LIU Xiaoyan , YANG Jijun , ZUO Chenyu , SHEN Jie . Dynamic Interactive Map-based Dashboard Design for River Management in the River Chief System[J]. Journal of Geo-information Science, 2024 , 26(9) : 2064 -2076 . DOI: 10.12082/dqxxkx.2024.240316

1 引言

生态文明是以人与社会、自然和睦相处、共同发展、持续繁荣为目标的文明形式。2015年联合国《2030年可持续发展议程》[1]提出17项可持续发展目标（SDGs），作为全球生态文明建设的重要参与者，我国率先发布《中国落实2030年可持续发展议程国别方案》[2]，并强调要把江河湖泊保护摆在重要位置。河道管理是指通过对人类生产和生活进行有效控制和管理，以保障河流运输、防洪和河势稳定，充分发挥河道的综合效益[3]，2016年12月中央印发《关于全面推行河长制的意见》[4]，要求围绕河长制的六大任务开展河道管理工作。信息技术的发展推动了水利现代化进程，河长制推行以来，智慧水利领域的水利信息化和数字孪生成为研究热点[5]。国内外在水利信息化研究方面发展迅速，基于物联网、深度学习等技术搭建智慧水利平台，建设如水利一张图、水利工程管理信息系统、国家水利数据中心、国家防汛指挥系统等项目[6-7]。河长制信息管理系统成为支撑河长制工作的重要手段，各地结合云计算、物联网、大数据等技术，将河湖管理工作由线下制度管理转为线上管理、民众监督的形式，实现实时性、共享化、全民参与的河湖管理模式[8]。数字孪生技术的交互性和智能化为河长制现存问题提供解决思路，在专业知识、快速响应、协同合作、公众参与和多元联动等方面发挥积极作用[9]。
地图具有直观展现河道管理信息时空分布特征的优势，帮助用户识别河道管理问题，启发用户思考。现阶段涌现的河道管理信息系统多关注于技术与功能，在地图的设计与表达方面存在诸多不足。在面向河道管理的地图基础理论研究方面，目前尚未形成科学的地图主题内容框架，不能完全适用于新时代背景下河长制的多部门协同、多级河长负责的管理需求；在面向河道管理的地图设计方面，地图内容架构、底图设计、符号及图表设计、色彩设计等研究取得了一定成果[10]，但缺失面向河长制的河道管理地图设计理念，使得现有研究没有兼顾多部门用户的专业背景及图式规范，在多尺度制图要素选取、表示方法选择、专题符号设计等方面不够完善，难以满足当下数据快速更新的需求。
随着技术的发展和创新，交互式仪表盘集成了文本、图表、图像、地图等多媒体呈现方式，可通过多视窗并列来展示信息的不同侧重点，促进用户从多角度理解同一专题[11-12]，目前在设计原则、数据交互、用户视觉分析、有效性评估等方面取得进展[13⇓⇓-16]，被应用于疫情数据追踪[17]、智慧城市[18]、工业创新环境分析[19]、移动数据可视化[20]等领域，起到数据集成显示、动态更新数据实时监控、信息协同共享、数据驱动决策的作用，为河道管理信息可视化提供了新的可能性。河道管理业务通常需要多部门间人员和数据协同支持，目前以用户为中心的面向河长制的仪表盘地图设计与实现方法研究较少，与之相关的地图或信息系统在内容设置上缺乏对目标用户、河道管理领域知识、空间数据信息的深度理解[21]，布局和设计风格总体上趋于同质化，图表设计偏向组件化、模板化，交互功能设计缺少理论指导，对视觉美学及界面设计范式缺乏重视[22]。
针对以上问题，本研究将河长制内涵作为突破点，以地图视角剖析用户需求并提出河道管理地图的设计理念，以构建河道管理地图内容框架。基于地理场景理论分析河道管理场景中的要素，以不同要素为主线进行信息聚合，通过交互式仪表盘地图的形式对河道管理场景中要素的语义描述、空间定位、几何形态、演化过程、相互关系和属性特征进行表达。选择电子大屏这一传播媒介，根据用户体验五要素模型，基于认知、视觉、地图交互科学等理论，在面向河道管理的仪表盘地图的信息架构、界面版式、色彩配置、信息内容、交互等方面提出设计方法及技术实现手段，以形成适用于新时代背景下面向河长制工作的仪表盘地图设计策略，以期在促进面向河长制的河道管理地图的标准化与规范化、多部门协同管理、共建共享方面起到积极作用。

2 河道管理地图内容框架及要素表达

2.1 河道管理地图内容框架

河长制内涵可以从组织形式、河长职责、主要任务、监督考核等方面解读。河长制要求全面建立省、市、县、乡四级河长体系，总体来看，各地等均实施按河道级别和河道属地相结合的多级河长和“总河长”负责制[23]。以地图视角来看，各级河长关注的信息包括两类：一类具有空间位置特征，主要反映河道位置及形状、周边环境、设施、涉河问题等信息；另一类没有具体空间位置特征，通过图表或文字起到解释说明作用，如河流现状、整治措施、治理目标等。各级河长关注的河道管理信息细节层次不同，需根据河长制的组织形式和各级河长的工作职责，为各级河长提供符合其工作需求的多尺度河道管理地图。河湖管理工作涉及水务、环保、发展改革、财政、国土、交通、住建、农业、卫生、林业等多个部门，各部门需密切配合，协同联动，依法履行河湖管理相关职责，共同推动“河长制”工作落实。各部门用户的专业背景差异使得现有地图在跨部门协同、共享共建方面存在壁垒，因此在进行地图设计时需要兼顾各部门用户的工作需求、专业知识及图式规范[24-25]，建立科学完备的河道管理地图内容体系。针对河道管理地图的特殊性，本文从横向协同与纵向协同结合的维度出发，提出“多部门协同联动、多级河长任务分解”的设计理念，在此基础上河道管理地图内容框架的构建思路如图1所示。
图1 河道管理地图设计理念及框架构建思路

Fig. 1 The design concept of river management map and the construction ideas of framework

面向河长制的河道管理地图内容框架体系按照从图组到图种的流程编排，划分为河道管理基本信息图组、水资源保护图组、水域岸线管理图组、水污染防治图组、水环境治理图组、水生态修复图组、执法监管图组7个图组并细分子类图种，如图2所示。在“多部门协同联动”层面，不同图组可为对应部门工作提供支持；在“多级河长任务分解”方面，依据各级河长职责，为其提供对应尺度、不同细节程度的河道管理地图。
图2 面向河长制的河道管理地图内容框架

Fig. 2 The river management map content framework for River Chief System

2.2 河道管理地图要素分析

在信息世界中，对现实世界的重构依赖于对物理世界和人文世界的综合理解，从地理学视角出发，其中的地理场景是一定时空范围内各种自然、人文要素相互作用所构成的地域综合体[26]，面向河长制的河道管理场景是地理场景与管理学的结合，承载了自然与人文共同影响下的时间、地点、人物、事物、事件等要素，如图3所示。其中，时间包括时间点和时间段两种形式。地点表达所在的空间位置，使用地名、地址等方式描述。人物描述河道相关人物群体，如各级河道管理人员、河道维护人员、河道巡查人员等。事物分为自然事物和人造事物，自然事物主要是河道，人造事物包含河道的附属设施、传感器等监测设备、堤坝等。事件可分为灾害相关事件、污染相关事件、人物相关事件等，灾害事件包括洪水等；污染相关事件包括工业废水、黑臭水体等；人物相关事件包括人员监测、巡查、治理等[27]。现象包括水华等自然现象，以及推行河长制、全民参与治水等社会现象。在此基础上，河道管理地图需面向用户群体选择合适的时空尺度、表示方法、视觉变量、用户交互及传播媒介，以不同要素为主线进行信息聚合实现对河道管理场景要素语义描述、空间定位、几何形态、演化过程、相互关系和属性特征的表达[28]。例如，以时间为主线进行信息聚合，结果将揭示河道管理活动的时间序列，帮助用户理解河道状况的时间演变和管理措施的时间调控；以地点为主线进行信息聚合，结果将关注特定地理位置的特征，理解不同地点（如上下游、具体河段等）的管理需求和挑战；以人物为主线进行信息聚合，结果将评估人力资源的分配、决策过程等在河道管理中的作用和影响；以事物为主线进行信息聚合，结果将关注基础设施的维护情况和自然环境的健康状况；以事件为主线进行信息聚合，结果将追踪灾害事件、污染事件和人物相关事件的细节，评估应急准备和风险管理；以现象为主线进行信息聚合，结果将突出生态变化和社会参与对河道管理的影响。总而言之，基于不同主线的信息聚合结果不仅可以支持面向多维度的现实世界认知，还能够为河道管理策略的制定提供数据支持和理论依据。
图3 基于河道管理场景要素的地图表达

Fig. 3 Map representation based on the elements in river management scenarios

2.3 河道管理仪表盘地图的表达内容

地图可视化目的是展示地理要素的空间分布，指导用户验证或发现知识。仪表盘、专题地图和地图集是目前被广泛使用的地理信息可视化产品，与专题地图及地图集相比，仪表盘具备多视图的优势，包含多源异构数据，且具有更高的信息更新频率。此外面向公众设计的仪表盘，其高交互性便于用户探索与分析，有助于在已知信息的基础上启发未知信息，成为各类决策场景中的重要辅助工具，因此本文选择交互式仪表盘对河道管理场景中的要素进行表达。
河道管理仪表盘地图中信息的表现形式主要包括地图、信息图表及表单。根据河道管理地图内容框架（图2），梳理出各图组在仪表盘地图中不同形式的表达内容（表1）。河道管理仪表盘地图的内容层次包括数据层次和信息层次[29]。数据层次是对客观事物属性的记录，其中基础性指标可通过自然资源监测数据直接获得，如水资源分布、监测站水质指标等。信息层次是对数据的加工处理，体现数据的内涵，其中统计性指标通过较简单的地理分析或数理统计得到，如水面率、用水效率等；分析性指标通过综合运用评价模型、模拟模型对地理信息进行解读获得，如水质等级、河道健康评估情况等。
表1 河道管理仪表盘地图表达内容

Tab. 1 The expression content of map-based dashboard for river management

图组 仪表盘中的表现形式 制图表达内容
河道管理基本信息图组 地图 河道、工程设施、管理单位的分布
信息图表 水利工程设施信息
表单 河道基本属性信息、河长信息、新闻政策信息
水资源保护图组 地图 地表水水源地、地表水取水口、取用水户、水功能区的分布
信息图表 用水量、用水效率、水面率、水功能区属性
水域岸线管理图组 地图 河道管理岸线、河道蓝线、涉河建设项目的分布
信息图表 涉河建设项目类型、整治进展
表单 河道管理岸线信息、河道蓝线信息
水污染防治图组 地图 污染源、污水处理设施的分布
信息图表 污染源信息、污染物排放量、河道纳污容量、限制排污量、污水处理信息
水环境治理图组 地图 监测站水质指标、水环境问题治理对象的分布
信息图表 监测站指标信息、水质达标情况、治理对象类型、治理对象概况
表单 治理目标、整治措施
水生态修复图组 地图 河岸带植被资源、水生生物、生态保护红线、断头河、河道健康评估结果的分布
信息图表 河岸带植被资源面积、水生生物种类及数量、断头河数量、河道健康评估值
执法监管图组 地图 巡查人员轨迹、巡河上报问题的位置
信息图表 巡查次数、巡查频率、巡河问题类型、已解决及待解决问题情况
表单 巡河人员信息、巡河问题信息

3 河道管理仪表盘地图设计方法

电子大屏作为地理空间信息展示的新媒介，更符合当前政府部门对于河长制业务大数据信息展示的需求，因此本文将电子大屏作为河道管理仪表盘地图的展示媒介。以用户为中心的设计理念是将产品的功能需求与用户体验相结合进行深入考虑，参考Jesse James Garrett提出的用户体验五要素模型[30]，如图4所示，本文从战略层、范围层、结构层、框架层、表现层5个层面探究河道管理仪表盘地图的设计方法。
图4 用户体验五要素模型

Fig. 4 Five elements model of user experience

战略层的主要内容是用户需求和产品目标，通过细分用户形成具有共同关键特征的较小群组，从而将大量用户需求划分为几个可管理的部分。问卷调查、用户访谈、焦点小组等方法被用于收集用户的普遍观点与感知，用户测试或现场调查等方法适用于理解具体用户行为以及用户与产品交互时的表现。本文以专业知识能力水平为关键指标区分用户群体，通过用户访谈，深入了解专业用户对于河长制业务流程、地图使用场景、系统信息元素及交互设计的看法，以及非专业用户对于河道管理地图的使用意愿。面向河道管理的仪表盘地图一般应用于专门化的“河长制”办公场景中，用于展示河道管理业务的现状、进展及问题，故面向的大部分用户是有河道管理相关背景的专业人员，此外也可能面向如巡查领导、参观人员等“一次性”用户。产品目标包括信息设计和用户体验设计2个层面：通过多维度、多尺度的信息设计，帮助用户识别河道管理场景中的关键信息；通过灵活高效的交互，帮助用户理解信息，达到良好的用户体验。
范围层是用户需求和产品目标的具体化，界定了需求池的边界和里程碑，确定了内容需要和功能规格，即使用哪些内容元素帮助用户在何种场景下完成何种需求，河道管理仪表盘地图旨在通过文本、图片、地图、动画等内容元素传达河道管理场景下的河长制任务工作情况，实现不同层次信息的展示。
在结构层中，信息架构是通过结构化内容为用户呈现合理且具有意义的信息；交互设计关注于“可能的用户行为”以及“系统如何配合与响应用户行为”，用户惯有思维对“交互组件将怎样工作”的理解会形成概念模型，好的概念模型能够让用户预测自己行为的结果，提高用户的操作体验。构建概念模型的方法可以通过经验、培训和指导形成，使用说明书和构建系统映像是形成概念模型的有效途径。本文首先考虑仪表盘地图的信息架构，以自上而下的层级结构组织、管理、分类、排列零散信息；结合地理信息的时空及尺度特性，设计空间交互、时间交互和属性交互，建立河道管理场景下易于用户理解的概念模型；部分交互操作会引起界面内容变化，需设计界面内容的动态效果。
在框架层中，界面设计考虑可交互元素的布局，导航设计考虑引导用户移动的元素的安排，信息设计考虑传达给用户的信息要素及排布。界面设计包括布局结构以及色彩配置，设计时需要选取易用、易理解的界面元素，以满足用户的使用需求；导航设计的任务是提供不同页面跳转方法，同时传达出元素、内容与当前页的关系；地图信息设计部分，需在传统媒介专题地图设计的基础上，提出适合大屏显示特性的河道管理仪表盘地图设计方法；非地图形式的信息设计部分，需对河道管理仪表盘地图中的文字、图表、数据表单进行设计。
表现层是视觉、听觉、触觉、嗅觉、味觉等感知的具体呈现，在河道管理仪表盘地图中主要为视觉设计，包括整体界面的布局设计、信息排布、图标设计、图形设计、色彩搭配和视觉风格等。

3.1 信息架构设计

信息架构由情景、内容以及用户组成[31]，首先明确河道管理仪表盘地图的用户及其使用情景，从而确定仪表盘地图的内容构成与分组排列方式。信息架构包括层级结构、矩阵结构、线性结构和自然结构[30]等方式。基于对河长制内涵、河道管理仪表盘地图用户需求分析，采用自上而下的层级结构来设计信息架构，且该信息架构内容与河道管理地图的内容框架保持一致，即包含河道管理基本信息、水资源保护、水域岸线管理、水污染防治、水环境治理、水生态修复、执法监管7个主题界面。

3.2 界面版式设计

屏幕认知是指人的大脑会对新进入的自己可视域范围内的界面上的每一个元素进行识别、判断，并结合自己的意图进行视觉搜索的过程[32]。研究表明，人的视觉注意力一般情况下并不是平均分布的，视区内不同区域的注意程度不同[12,33]，大屏幕的浏览偏好顺序为中、左上、右上、左下和右下[34]。在进行界面版式设计时，需避免信息的散乱布置，减少用户内容检索的负担，应将相关信息内容进行聚合与归纳，在界面上进行合理的区域划分。根据大屏幕的形态，将河道管理信息按照功能和内容分组，在顾及用户阅读习惯的基础上，设计了分栏与分块相结合的布局方案：表1梳理了仪表盘地图中不同形式的表达内容，其中界面内所有内容都与地图的场景范围相关联，在进行界面布局时将地图作为重点突出的主体内容，放置在视觉中心位置；相关解析性文字说明、信息图表、表单放置在地图的两侧，使其既能被用户轻松捕获，又不争夺用户对地图内容的注意，为用户提供多方位全方面的参考信息。以水环境治理主题界面为例，界面布局如图5所示。
图5 仪表盘界面的布局方案

Fig. 5 Dashboard interface layout scheme

3.3 色彩配置

色彩具有特定的情感意象，河道管理仪表盘地图界面主色调选用代表河流的蓝色，较符合用户认知习惯。在底图色彩方面，区别于传统专题地图或电子地图较浅淡的色彩，以深蓝色为背景色调以降低人眼刺激来支持用户长时间浏览，且能够减少大屏能耗[35]；以较明亮的蓝色作为前景内容的主要配色来保持界面色彩的一致性。视见函数表明人眼对于蓝色波段的识别能力有限[36]，单一的蓝色不能满足各专题页面信息表达的所有需求，可采用与地图底图色彩对比差异大的或纯度更高的色彩对专题信息进行突出表达，不同主题页面的专题色彩主要由地图符号、图表、文本的色彩体现。如表2展示了水环境治理主题界面中专题色的配置方案。
表2 水环境治理主题界面的色彩配置方案

Tab. 2 Color configuration scheme for water environment management interface

基调色 专题色
地图符号 图表 文本

3.4 信息设计

本研究从多尺度、维度选择与动态可视化3个角度探讨河道管理仪表盘地图信息设计策略。多尺度方面，地图需要满足不同级别河长的信息展示需求。维度选择方面，随着数字孪生技术的发展，三维地图能够较真实地呈现河道地形地貌、堤防工程及周边景观等局部地理要素，扩展界面空间感，提升用户视觉体验，但存在制作周期长、网络资源消耗大等问题，多采用剔除渲染、多细节层次等技术来优化渲染效率及减少资源消耗[37]；相比之下二维地图能够简洁、高效地描述河道管理场景，实现更快运行和加载，适合用户从宏观视角观察到更全面的要素，因此本研究采用二维地图进行设计。动态可视化方面，河道管理地图要素的性质或状态随时间推移产生变化，如河湖水面范围、河道管理岸线范围、污染范围、河岸带植被资源分布、断头河分布等形态变化，河湖水面率、用水量、用水效率、污染物排放量、水质监测指标值、水质达标率、河道健康评估情况等指标值变化，巡河人员位置移动形成巡河轨迹等，使用动态地图或图表并结合交互式时间图例对以上时间过程进行表达。
非地图形式的信息主要考虑文本、图表、数据表单的设计。一些对空间信息起说明性作用的内容需通过文本进行阐述，也可使用词云表现文本的关键词。格式塔心理学强调，人类的视觉认知趋向于将视觉信息整合为连贯的整体，而非分散的碎片[38]。其中简洁原则揭示了人类偏好简约结构的本能，即倾向于理解最简单、最规整的形态。在显示范围受限的传统媒介中，一般需要设计数据量复杂、复合程度较高的图表，当前借助大屏幕的物理优势及其提供的广阔视觉空间，可将繁复的指标信息分解为更小、更易于理解的单元，运用简洁的图表形式呈现，以有效减轻用户的认知负担。接近原则是指视觉系统倾向于将空间上邻近的元素归类为同一组。在页面中添加边框可以建立明确的组，并与页面上其他可视元素创建隔离。基于此，在规划图表布局时依据主题进行结构化设计，将相同主题图表组合并分块放置，同时遵循对齐原则，确保组内各图表间的有序呈现与视觉联系。在河道管理仪表盘地图中，主要对具体考核性质的统计指标使用图表的形式进行表达，如水环境治理主题界面中，可使用柱状图或饼状图展现水质达标情况、水环境问题治理对象类型；使用折线图表示监测站水质指标值的变化、河道水质级别的变化。数据表单作为信息的补充元素，在布局时一般放置于次级视区。在色彩配置策略上遵循图底关系原则，选择与界面背景色同一色系的色调作为表格填充色，旨在强化视觉层次；文字色彩则优选暖色调或高明度的颜色，形成与背景色的鲜明对比，确保关键信息的可读性。

3.5 交互设计

基于地图学立方体描述的交互科学理论[39]，考虑交互操作符的使用[40]，将河道管理仪表盘地图交互分为空间交互、时间交互和属性交互三类，并将用户的视觉启示和视觉反馈融入到交互设计中。通过空间交互完成图层切换和空间尺度范围变换，通过时间交互展现时序信息，通过属性交互进一步展现专题信息查询结果。空间交互主要包括平移（Pan）、缩放（Zoom）、覆盖（Overlay）等基本操作。此外，通过交互控件实现地图图层切换以及多尺度地图空间展现。时间交互主要包括序列（Sequence）、筛选（Filter）等，数据时序变化的特征主要是通过交互式时间图例体现，包括线性交互式、离散交互式和变速交互式[41]。交互式图例的选择与可视化数据的采样及更新频率有关。按照固定时间频率采集的数据，如水质监测数据，可选择等间隔的离散交互式时间图例来表达其属性信息的变化；对于获取时间频率不固定的数据，如由特定年份遥感影像解译得到的植被覆盖数据，使用非等间隔的离散交互式时间图例表达其在关键时间点的空间分布。当地图对播放速度及时间尺度有特殊需求时，可选择使用变速交互式时间图例。河道管理地图中地理对象的属性信息复杂，数据格式存在差异，并且具有不同的数据更新频率，属性交互设计主要为检索（Retrieve），包括鼠标跟随式交互、窗口式交互和动态数据驱动式交互3种方式[41]。在鼠标跟随式交互方式下，属性信息通过浮动提示框效果展现，所占空间较小，适用于同类别属性信息的提示。窗口式交互一般在固定位置创建新属性窗口，窗口中可涵盖文本、符号、图片、视频等多种格式的属性信息，从多个视角展现专题信息。动态数据驱动式交互的特点在于数据源位于系统外部，适用于可变数据源和强调实时动态变化的情况，如在河道管理仪表盘地图中表现监测站实时水质、水利设施实时工作状况等信息。

4 河道管理仪表盘地图系统实例

上海市宝山区河道管理仪表盘地图系统采用自上而下层级结构的信息架构，主要功能是将河道管理基本信息及河长制六大任务工作情况进行可视化，并为各级河长用户提供交互操作，以实现不同层次信息的表达。在技术流程上，系统前端开发语言为HTML5+CSS3+JavaScript，使用ECharts组件完成图表的可视化，通过调用高德地图API，完成自定义地图底图加载、GeoJSON数据加载、行政边界加载、自定义图标加载、地图交互事件等服务。使用Python完成水质监测数据采集、WGS-84坐标系到高德地图GCJ-02火星坐标系的转换、词云生成等数据处理工作。此外，系统后端使用Node.js完成数据请求结果处理、数据库读取、数据返回等工作。

4.1 实验区概况

上海市宝山区（31°15′N—31°31′N，121°17′E—121°32′E）位于上海市北部，南部毗邻上海市杨浦、虹口、静安、普陀4区，西部与上海市嘉定区交界，西北隅与江苏省太仓市为邻，东西长17.5 km，南北宽约23.08 km，区域总面积365.3 km2。区内河道依照市管、区管、镇管、村管四个级别进行管理，共有河道900余条。

4.2 界面设计及信息设计实现

以水环境治理主题界面为例（图6），界面采用分栏与分块相结合的形式，中间栏为水环境治理图组地图场景区，表现水质监测站、水环境问题治理对象的空间分布；左栏分为监测站指标信息区、水质达标情况区两块；右栏主要为水环境治理对象的类型、关键词、治理目标及措施信息。在色彩配置上，水环境治理主题界面背景色使用与河道管理仪表盘地图主页一致的深蓝色，各分区的标题栏与背景色使用明度不同的蓝色，以体现界面布局的层次感。前景内容中的图表及文本主要选择明度和饱和度较高的色彩变量，与背景的冷色调形成对比，使整体色彩配置保持相对平衡。
图6 水环境治理界面

Fig. 6 Water environment management interface in the system

4.3 交互功能及动态效果实现

同一尺度下，在地图载附量有限的情况下，通过交互式切换图层可只展示用户感兴趣的专题信息图层，减轻用户认知负担。各级河长对于河道的管理涉及到空间尺度的变换，在水环境治理主题界面中，地图的底图范围变化由总河长管辖的宝山区，到一级河长管理的某条河流所流经的各镇，再到二级河长管理的某一河段所在镇级行政区。在宝山区水环境治理地图的基础上，用户通过鼠标点选，可以完成总河长、一级河长、二级河长视图的多尺度切换，且地图尺度发生变化时，周边治理对象类型、水环境治理词云、治理目标及措施信息等相关图表会随之更新显示为相应尺度下的信息（图7）。
图7 面向不同管理级别河长的多尺度地图切换

Fig. 7 Multi-scale map switching for different management levels of river chiefs

动态数据驱动式交互效果与数据更新技术和数据来源质量关系紧密。以国家地表水水质自动监测实时数据发布系统为例[42]，每4 h发布一次国家地表水水质自动监测站的数据监测指标及水质类别信息，使用Python、Phantomjs和Selenium模拟浏览器登录后对网页进行解析，实现网页动态技术的页面抓取，从而获取该网站发布的水质监测实时数据，并存储在本地数据库中，当监测断面的水质类别属性信息有更新，自动将该类别对应的水质类别符号绘制在监测站点位置。在水环境治理主题界面中，时间交互使用离散交互式时间图例，通过在图例上滑动，可展现多个时段监测断面水质变化（图8）。
图8 不同时间节点的监测断面水质情况

Fig. 8 Water quality of monitoring sections at different time slots

4.4 系统可用性评估

邀请视力正常（无色盲、色弱情况）的用户体验本系统功能并进行评价。用户使用河道管理仪表盘地图系统完成地图空间交互、时间交互、属性交互以及图表属性交互等任务后可进行自由探索。使用Post-Study System Usability Questionnaire (PSSUQ)第3版评估用户使用河道管理仪表盘地图系统所感知的整体满意度，经过独立样本T检验，2个分组样本的专业知识能力有显著性差异（t= -14.907，P=0.00），其中专业用户28名，非专业用户17名。将测试结果与PSSUQ版本3规范（平均值和99%的置信区间）[43]进行比对，如表3所示。结果表明，测试组所有用户评估的整体质量、系统质量、信息质量、界面质量得分均在参考值区间范围内，可以认为本文设计并实现的河道管理仪表盘地图系统可用性较好。
表3 测试结果与PSSUQ版本3规范数据对比

Tab. 3 Comparison of test results with PSSUQ Version 3 specification data

评估类别 测试组
专业用户		 测试组
非专业用户		 测试组
所有用户		 参考下限 参考
平均值		 参考上限
整体质量 2.71 2.99 2.85 2.62 2.82 3.02
系统质量 2.65 3.08 2.87 2.57 2.8 3.02
信息质量 2.89 3.12 3.01 2.79 3.02 3.24
界面质量 2.52 2.65 2.59 2.28 2.49 2.71

5 结论

全面推行河长制是解决我国复杂水问题、维护河湖健康生命的有效举措，在此背景下，目前仍存在河道管理地图的需求与研究不对等、设计方法缺失等问题。本文首先从组织形式、河长职责、主要任务、监督考核4个方面解读河长制内涵，从地图视角剖析相关部门、各级河长所关注的信息及用图需求，结合专题地图理论，提出面向河道管理的地图的概念并总结其特征，在此基础上，从横向协同及纵向协同结合的维度提出“多部门协同联动、多级河长任务分解”这一适用于新时代背景下河长制工作的河道管理地图设计理念，从而构建河道管理地图内容框架。基于地理场景理论对河道管理场景中的时间、地点、人物、事物、事件与现象要素进行归纳，指导各图组的制图表达内容选取。选择交互式仪表盘的表现形式及电子大屏这一传播媒介，使用用户体验五要素模型，基于认知、视觉、地图交互科学等理论，进行大屏幕地图的信息架构设计、界面版式设计、色彩配置、信息设计及交互设计。以上海市宝山区为例，设计并实现河道管理仪表盘地图系统，并进行系统性可用性评估，结果显示该仪表盘地图能够支持多尺度的河道管理信息显示，使得用户对河长制相关信息一目了然。
本文的学术贡献主要体现在2个方面： ① 提出了“多部门协同联动、多级河长任务分解”的河道管理地图设计理念，构建了河道管理地图内容框架，基于地理场景理论分析了河道管理地图要素，丰富了专题地图制图的理论体系； ② 提出了面向河道管理的动态交互式仪表盘地图设计策略，拓展了仪表盘地图的设计思路和理念。本研究是地图学理论与方法应用于生态文明建设过程中区域场景、事件、成果动态制图的有益探索，有助于促进面向河长制的河道管理地图的标准化与规范化，在多部门协同管理、共建共享方面起到积极作用。本文仍存在一定的局限性： ① 未对仪表盘地图的设计效果和系统效率进行定量评价，后续可开展眼动追踪、访谈等方式，收集用户对可用性及体验的反馈，并在交互实验中记录用户任务完成时长、完成率及任务难度评分，以便优化地图设计和交互功能； ② 本文成果仍处于理论与方法研究阶段，未来应在实际应用环境中部署系统，收集应用反馈及效果数据，以进一步评估与优化系统设计，确保其在真实场景中的有效性和实用性。

感谢上海普适导航科技股份有限公司在论文研究过程中针对河道管理需求调研、实验样区选取、实验数据、用户意见反馈等方面给予的大力支持与帮助！

References

Publishing order | Descend order by publishing year | Descend order by cited within
[1]
Cf O. Transforming our world: the 2030 Agenda for Sustainable Development[J]. United Nations: New York, NY, USA, 2015.

[2]
中华人民共和国中央人民政府. 中方发布《中国落实2030年可持续发展议程国别方案》[EB/OL].(2016-10-13)[2024-05-07]. https://www.gov.cn/xinwen/2016-10/13/content_5118514.htm.

[The State Council of the People's Republic of China. China’s National Plan on Implementing of the 2030 Agenda for Sustainable Development[EB/OL].(2016-10-13)[2024-05-07]. https://www.gov.cn/xinwen/2016-10/13/content_5118514.htm.]

[3]
张肖. 河道堤防管理与维护[M]. 南京: 河海大学出版社, 2006.

[Zhang X. Management and maintenance of river embankment[M]. Nanjing: Hohai University Press, 2006.]

[4]
关于全面推行河长制的意见[J]. 水利发展研究, 2016, 16(12):1-2.

[Opinions on fully implementing the river chief system[J]. Water Resources Development Research. 2016, 16(12):1-2.]

[5]
王占魁, 潘武汉, 吴建兴, 等. 智慧水利领域研究热点的文献计量与可视化分析[J/OL]. 人民珠江, 2024(2024-04-02). https://kns.cnki.net/kcms/detail/44.1037.tv.20240401.1449.004.html.

[Wang Z K, Pan W H, Wu J X, et al. Bibliometric and visualization analysis of research hotspots in the field of smart water conservancy[J/OL]. Pearl River, 2024(2024-04-02). https://kns.cnki.net/kcms/detail/44.1037.tv.20240401.1449.004.html.]

[6]
陈述, 纪勤, 陈云, 等. 基于知识图谱的智慧水利研究进展[J]. 河海大学学报(自然科学版), 2023, 51(3):143-153.

[Chen S, Ji Q, Chen Y, et al. Research progress of smart water conservancy based on knowledge graph[J]. Journal of Hohai University(Natural Sciences), 2023, 51(3):143-153.] DOI:10.3876/j.issn.1000-1980.2023.03.019.

[7]
谢明霞. 数字孪生水利内涵及应用场景研究[J]. 人民长江, 2024, 55(2):245-251,264.

[Xie M X. Connotation and application scenarios of digital twin water conservancy[J]. Yangtze River, 2024, 55(2):245-251,264.] DOI: 10.16232/j.cnki.1001-4179.2024.02.032.

[8]
郑学东. 空间信息技术在水利行业的应用回顾与展望[J]. 长江科学院院报, 2021, 38(10):167-173.

DOI

[Zheng X D. Application of spatial information technology in water conservancy industry: Retrospect and prospect[J]. Journal of Yangtze River Scientific Institute, 2021, 38(10):167-173.] DOI:10.11988/ckyyb.20210623.

[9]
王晓莹, 孔千慧, 戴梦圆, 等. 数字孪生水利技术赋能河长制的实现路径与对策[J]. 水利经济, 2023, 41(4):75-81.

[Wang X Y, Kong Q H, Dai M Y, et al. The realization path and countermeasures for the implementation of the twin water technology-enabled river chief system[J]. Journal of Economics of Water Resources, 2023, 41(4):75-81.] DOI:10.3880/j.issn.1003-9511.2023.04.011.

[10]
马晨燕, 崔越, 白少云. 基于河长制的黄河流域水环境地图可视化[J]. 测绘地理信息, 2021, 46(1):53-57.

[Ma C Y, Cui Y, Bai S Y. Map visualization of water environment data in the Yellow River Basin based on river chief system[J]. Journal of Geomatics, 2021, 46(1):53-57.] DOI:10.14188/j.2095-6045.2020460

[11]
Stehle S, Kitchin R. Real-time and archival data visualisation techniques in city dashboards[J]. International Journal of Geographical Information Science, 2020, 34(2):344-366. DOI:10.1080/13658816.2019.1594823.

[12]
Few S. Information dashboard design: the effective visual communication of data[M]. Beijing: O’Reilly, 2006.

[13]
Bach B, Freeman E, Abdul-Rahman A, et al. Dashboard design patterns[J]. IEEE Transactions on Visualization and Computer Graphics, 2023, 29(1):342-352. DOI:10.1109/TVCG.2022.3209448.

[14]
Fischer J, Egli L, Groth J, et al. Approaches and tools for user-driven provenance and data quality information in spatial data infrastructures[J]. International Journal of Digital Earth, 2023, 16(1):1510-1529. DOI:10.1080/17538947.2023.2198778.

[15]
Robinson A C, Peuquet D J, Pezanowski S, et al. Design and evaluation of a geovisual analytics system for uncovering patterns in spatio-temporal event data[J]. Cartography and Geographic Information Science, 2017, 44(3):216-228. DOI:10.1080/15230406.2016.1139467

[16]
Bartling M, Havas C R, Wegenkittl S, et al. Modeling patterns in map use contexts and mobile map design usability[J]. ISPRS International Journal of Geo-Information, 2021, 10(8):527. DOI:10.3390/ijgi10080527

[17]
Dong E S, Du H R, Gardner L. An interactive web-based dashboard to track COVID-19 in real time[J]. The Lancet Infectious Diseases, 2020, 20(5):533-534. DOI:10.1016/S1473-3099(20)30120-1

[18]
Li W W, Batty M, Goodchild M F. Real-time GIS for smart cities[J]. International Journal of Geographical Information Science, 2020, 34(2):311-324. DOI:10.1080/13658816.2019.1673397

[19]
Zuo C Y, Ding L F, Liu X Y, et al. Map-based dashboard design with open government data for learning and analysis of industrial innovation environment[J]. International Journal of Cartography, 2023, 9(1):97-113. DOI:10.1080/23729333.2022.2049106

[20]
Conrow L, Fu C, Huang H S, et al. A conceptual framework for developing dashboards for big mobility data[J]. Cartography and Geographic Information Science, 2023, 50(5):495-514. DOI:10.1080/15230406.2023.2190164

[21]
Young G W, Kitchin R. Creating design guidelines for building city dashboards from a user’s perspectives[J]. International Journal of Human-Computer Studies, 2020, 140:102429. DOI:10.1016/j.ijhcs.2020.102429

[22]
Kitchin R, McArdle G. Urban data and city dashboards[M]//Kitchin R, Lauriault T P, McArdle G, eds. Data and the City. Abingdon, Oxon; New York, NY: Routledge, 2018. Routledge, 2017:111-126. DOI:10.4324/9781315407388-9

[23]
中华人民共和国水利部. 工作方案[EB/OL].(2017-08-02)[2024-05-07]. http://www.mwr.gov.cn/ztpd/gzzt/hzz/gzjz/gzfa/.

[The ministry of water resources of the People's Republic of China. Work plan[EB/OL]. (2017-08-02)[2024-05-07]. http://www.mwr.gov.cn/ztpd/gzzt/hzz/gzjz/gzfa/.]

[24]
中华人民共和国水利部. 防汛抗旱用图图式: SL 73.7—2013[S]. 北京: 中国水利水电出版社, 2013.

[Ministry of Water Resources of the People's Republic of China. Cartographic symbols for flood control and drought relief maps: SL 73.7—2013[S]. Beijing: China Water & Power Press, 2013.]

[25]
中华人民共和国水利部. 水利空间要素图式与表达规范:SL/T 730—2015[S]. 北京: 中国水利水电出版社, 2015.

[Ministry of Water Resources of the People's Republic of China. Specifications for cartographic symbols and expressions of spatial features in water resources: SL/T 730—2015[S]. Beijing: China Water & Power Press, 2013.]

[26]
闾国年, 袁林旺, 陈旻, 等. 地理信息学科发展的思考[J]. 地球信息科学学报, 2024, 26(4):767-778.

DOI

[Lü G N, Yuan L W, Chen M, et al. Reflections on the development of the geographic information discipline[J]. Journal of Geo-Information Science, 2024, 26(4):767-778.] DOI: 10.3724/SP.J.1047.2013.00483

[27]
刘晓艳, 田兆炜, 周静怡, 等. 河道健康管理本体模型构建与数据存储方法设计[J]. 同济大学学报(自然科学版), 2023, 51(7):1018-1024.

[Liu X Y, Tian Z W, Zhou J Y, et al. Ontology model construction and data storage method design for river health management[J]. Journal of Tongji University (Natural Science), 2023, 51(7):1018-1024.] DOI:10.11908/j.issn.0253-374x.23142

[28]
闾国年, 俞肇元, 袁林旺, 等. 地图学的未来是场景学吗?[J]. 地球信息科学学报, 2018, 20(1):1-6.

DOI

[Lü G N, Yu Z Y, Yuan L W, et al. Is the future of cartography the scenario science?[J]. Journal of Geo-information Science, 2018, 20(1):1-6.] DOI:10.12082/dqxxkx.2018.170621

[29]
王令琦, 杜清运, 苏世亮, 等. 面向国土空间规划的“三调”地图产品体系设计[J]. 地理信息世界, 2020, 27(4):102-108.

[Wang L Q, Du Q Y, Su S L, et al. Map products system design of the third national territorial survey for territorial spatial planning[J]. Geomatics World, 2020, 27(4):102-108.] DOI:10.3969/j.issn.1672-1586.2020.04.016

[30]
Garrett J J. The elements of user experience: User-centered design for the web and beyond[M]. London: Pearson Education, 2010.

[31]
Rosenfeld L, Morville P, Arango J. Information architecture: for the web and beyond[M]. Sebastopol: O'Reilly Media, Inc., 2015.

[32]
郭倩雯. 大屏幕认知研究及其在界面设计中的应用[D]. 北京: 北京邮电大学, 2015.

[Guo Q W. The cognitive research of big screen and its application in interface design[D]. Beijing: Beijing University of Posts and Telecommunications, 2015.]

[33]
Zuo C Y, Ding L F, Meng L Q. A feasibility study of map-based dashboard for spatiotemporal knowledge acquisition and analysis[J]. ISPRS International Journal of Geo-Information, 2020, 9(11):636. DOI:10.3390/ijgi9110636.

[34]
Zuo C. Map-based Dashboard for Social Environment Understanding[D]. München: Technische Universität München, 2022.

[35]
Xie X J, Song F H, Liu Y, et al. Study on the effects of display color mode and luminance contrast on visual fatigue[J]. IEEE Access, 2021, 9:35915-35923. DOI: 10.1109/ACCESS.2021.3061770

[36]
Stockman A. Cone fundamentals and CIE standards[J]. Current Opinion in Behavioral Sciences, 2019, 30:87-93. DOI:10.1016/j.cobeha.2019.06.005

[37]
Qiu Y G, Duan H T, Xie H, et al. Design and development of a web-based interactive twin platform for watershed management[J]. Transactions in GIS, 2022, 26(3):1299-1317. DOI:10.1111/tgis.12904

[38]
Behrens R R. Art, design and gestalt theory[J]. Leonardo, 1998, 31(4):299. DOI:10.2307/1576669

[39]
Roth R E. Interacting with Maps: The science and practice of cartographic interaction[M]. Philadelphia: The Pennsylvania State University, 2011.

[40]
Kraak M-J, Roth R E, Ricker B, et al. Mapping for a sustainable world[M]. New York City: United Nations, 2021.

[41]
陈建香. 面向用户的地图交互方式的比较与应用研究[D]. 上海: 华东师范大学, 2012.

[Chen J X. User-centered map interactions: a methodological comparison and applications[D]. Shanghai: East China Normal University, 2012.]

[42]
中国环境监测总站. 国家地表水水质自动监测实时数据发布系统[EB/OL].[2024-05-07]. https://szzdjc.cnemc.cn:8070/GJZ/Business/Publish/Main.html.

[China National Environmental Monitoring Centre. Real time data release system for automatic monitoring of national surface water quality[EB/OL]. [2024-05-07]. https://szzdjc.cnemc.cn:8070/GJZ/Business/Publish/Main.html.]

[43]
Sauro J, Lewis J R. Quantifying the user experience: Practical statistics for user research[M]. San Francisco: Morgan Kaufmann, 2016.

Options
Outlines

/

〈 〉