CN112394847A - 基于结构化图标的应急信息交互*** - Google Patents

Abstract

本发明公开了一种基于结构化图标的应急信息交互***，基于结构化图标实现了信息标注，标注图标修改、信息搜索等功能，图标不再是一种应急的辅助表示工具，而是一种面向各类协作者的视觉协调中心点。结构化图标能够很好地表示信息的多层复杂和动态特征，通过基于结构化图标的信息标注和图标修改可以更准确地对危机事件进行描述以增进人们对当前复杂紧急情况的了解，此外结构化图标的前置图标的视觉相似性来表示危机信息之间的相关性，本发明通过信息搜索功能对这种视觉相似性表示信息相关性进行了实践。该信息***丰富了用户对信息内容和结构的认知，同时也优化了整个危机互动与合作过程。

Description

基于结构化图标的应急信息交互***

技术领域

本发明涉及信息***，尤其涉及一种在浏览器环境下的基于图标的应急信息展示和交互操作。

背景技术

信息可视化是一个跨学科领域，旨在研究大规模非数值型信息资源的视觉呈现。通过利用图形图像方面的技术与方法，帮助人们理解和分析数据。其中时空数据是指携带时间元素并随时间变化而变化的空间数据，是地球环境中地物要素信息的一种表达方式。由于其所在空间的空间实体和空间现象在时间、空间和属性三个方面的固有特征，呈现出多维、语义、时空动态关联的复杂性。地图可视化是应急信息可视化最常用的手段，传统的如地图上的文字或单个符号等信息可视化表现形式可以帮助人们加深对关键信息的记忆，但不利于用户理解信息的内容和结构。考虑到这类表示方式缺乏信息直观性的缺点，信息视觉标注方法采用图标对危机信息进行标注。而相比于普通图标，结构化图标利用其图标和符号的双重特性可以实现对表征内容和结构的同步可视化。

结构化图标主要由两个元素构成，其中先设基底图标用于区分不同的事件主题并关联相似的事件，而象形符号则用来表征事件的具体类型。图标的颜色和大小被用于衡量量化后事件的严重程度，改善应急参与人员对事件的直觉认知。已有实验证明了相比没有结构和文本标签的图标标签，结构化图标在信息标注方面的优势。此外，结构化图标被证明可以改善信息搜索行为，尤其是在标签云界面设计中。

在以往的基于地图的***中，图标主要表现为静态的、简单的信息。由于危机信息的复杂性和形势的不断变化，普通的象形符号无法清晰地表示危机信息。人们互动和协作的效率也可能受到影响。以上问题具体体现在三个方面。首先，现有的基于图标的危机地图主要表现为静态信息，而事件造成的人员伤亡或救援资源分配等动态信息无法从中表达。传统的基于图标的危机地图可视化方式是“普通图标+文本标签”。因此，实时的危机信息会与各种各样的图标分离而没有视觉链接，这就导致了所表示信息的语义不确定性。第二，用常用图标表示危机信息之间的相关性比较困难。在不同的信息可视化目标下，符号表示方式不同，使得不同类型的应急信息之间很难找到隐含的联系。第三，以往图标设计的局限性导致地图上缺乏协同交互。以往的图标设计更多的关注于图标的可理解性和审美性。交互只发生在用户和图标之间，而不是协作者和图标之间，这将进一步影响救援中的协作行为和决策。

发明内容

针对以上存在的问题，提供了基于结构化图标的应急信息交互***。一方面结构化图标的前置图标的颜色深度和大小变化可以用来表示紧急情况下的动态特征。另一方面，基于结构化图标的扩展信息搜索功能通过结构图标的前置图标将危机信息关联起来以加强对所代表事件之间事件相关性的认知。本发明是通过以下技术方案来实现的：

包括输入模块：用于接受所述状态信息，通过鼠标、键盘等硬件设备实现信息录入。

通信模块：用于接收来自客户端的数据请求并转发给数据管理模块，数据管理模块将数据查询结果返回到通信模块，再由通信模块将数据结果返回给客户端。

图标结构：包括图标容器，图标图片，图标显示，图标隐藏图标的文字标签，利用图标进行信息标注，图标按照时间轴进行动态信息的展示，基于图标的信息搜索。基于图标的信息操作包括增加，删除，修改，搜索。同时向用户提供一系列的界面交互操作方法。

基于结构化图标的数据管理模块，用于完成对危机信息的录入，修改，删除等交互操作。由数据库和文件***组成，用于处理通信模块的信息查询和数据更新请求，并将处理结果返回给通信接口。客户端发起请求从而获取图标数据，并在地图界面上创建对应的图标元素，并根据数据库存储进行分类展示；

界面交互模块，用来对用户的交互操作进行相应。对于相应的HTML元素设置对应的事件监控方法，对于表单中的信息进行修改，并将修改后的数据提交到通信模块。

进一步地，所述客户端还包括基于结构化图标的信息展示模块，所述***存储了危机事件在各个时间节点对应的事件描述，并且根据相应的事件描述根据公式计算该事件的严重程度，结构化图标的前置图标的颜色深度和整个图标大小用来表示该事件的严重程度。根据底层存储的图标信息用于完成图标的自定义展示、分类、修改等操作。

进一步地，所述客户端还包括基于结构化图标的信息搜索模块，用户点击过滤器弹出过滤窗口，在该模态框中选择对应的过滤条件并将对应的参数返回给服务器，服务器根据参数创建数据库查询语句并将符合条件的数据信息返回到界面，最终的信息搜索结果被呈现到界面上。

本发明的一种基于结构化图标的应急信息交互***，基于结构化图标实现了信息标注，标注图标修改、信息搜索等功能，图标不再是一种应急的辅助表示工具，而是一种面向各类协作者的视觉协调中心点。结构化图标能够很好地表示信息的多层复杂和动态特征，通过基于结构化图标的信息标注和图标修改可以更准确地对危机事件进行描述以增进人们对当前复杂紧急情况的了解，此外结构化图标的前置图标的视觉相似性来表示危机信息之间的相关性，本发明通过信息搜索功能对这种视觉相似性表示信息相关性进行了实践。该信息***丰富了用户对信息内容和结构的认知，同时也优化了整个危机互动与合作过程。

附图说明

图1为基于结构化图标的信息交互***的***架构

图2为本发明用于应急情境下的结构化图标设计示意图

图3为本发明一种基于结构化图标的应急信息***的主界面示意图

图4为本发明基于结构化图标的应急流程图

图5为本发明危机事件的录入信息和展示的结构化图标的信息映射示意图

图6为本发明基于结构化图标的图标修改示意图

图7本发明基于结构化图标的动态信息展示示意图

图8为本发明基于结构化图标的信息搜索示意图

具体实施方式

以下将参考附图详细说明本发明的各种示例性实施例、特征和方面。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。

在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。

另外，为了更好的说明本发明，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本发明同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述，以便于凸显本发明的主旨。

包括输入模块：接受来自外界输入的信息；数据管理模块：用于完成底层对数据的储存、变更、查询等操作；通信模块：输入模块和数据管理模块数据交互的桥梁，接受来自输入模块的信息并转发至数据管理模块或客户端通过异步请求获取到数据管理模块存储的信息；界面交互模块：用于监听用户操作，对用户的交互操作进行响应，包括图标的自定义展示、分类、修改等操作；信息展示模块：根据定义的页面样式和异步请求获取到的数据渲染为完整的页面；信息搜索模块：根据用户选择的搜索条件获取底层符合条件的数据并返回至页面；百度地图api模块：通过调取百度地图api接口获取地图相关数据；

其中用于接收外界信息的模块有输入模块、界面交互模块、信息搜索模块。对于涉及地图的操作，如地图界面缩放、移动，***通过调用百度地图api模块获取地图数据并传输到信息展示模块在浏览器端进行分层、布局、栅格化等操作后进行页面的重新布局展示。对于涉及***底层数据的操作，如信息搜索，输入模块的更换图标等则通过http请求将请求数据传输到后台的通信模块，通信模块进一步将请求处理后转发到数据管理模块，由数据管理模块对数据进行查询、更新等操作后将获取到的数据转发到通信模块，由通信模块将最新的数据传输至界面展示模块，浏览器对数据和页面样式等配置进行合并渲染后展示页面。

具体地，基于结构化图标的应急信息交互***包括服务器以及与服务器进行交互的基于浏览器的客户端，客户端通过图形界面实现信息录入，信息修改，信息删除，服务器端根据录入的数据对危机事件选择相应的图标，然后将图标展示在客户端对应的地图界面上，通过地图界面上的各类控件，用户可以实现按照地图图层对图标的分类展示，对图标的更换，基于图标的信息搜索等交互操作。

本实施例中，参照图1所示一种基于结构化图标的应急信息***是使用Java编程语言在InteliJ IDEA集成开发环境和使用HTML5和CSS的基于Web的客户端界面中实现的。网页是通过JavaScript和jQuery动态实现的。使用jQuery的(AJAX)数据传输。***的服务器端由Web服务器和应用程序服务器组成，而SpringBoot框架被用作应用程序服务器。在本地服务器/百度地图服务器上解析后台JS脚本代码，并将解析后的结果发送到客户端浏览器进行显示。最后，MYSQL被用作数据库管理***。

客户端直接将代码嵌入到<script></script>标签中，直接在界面解析时运行标签中的代码，向服务器发出获取信息的请求并接受服务器返回的数据。在客户端接受了服务器返回的数据后计算对应的应急参数来确定对应的结构化图标的大小、颜色，最终将图标展示在地图界面对应的位置上。

服务端的通信接口用来接受来在客户端的信息获取或信息修改的请求，并进一步转发给数据管理模块，数据管理模块将信息查询或信息修改结果返回给通信接口，通信接口再将数据返回给客户端。在返回过程中可能需要对数据进行处理，将原始的数据格式转化为json格式等等。服务器端数据管理主要包括数据库和文件***，用于存储实际的文件信息，另外对于通信接口的数据***、数据查询等请求进行处理，并将最终结果交给通信接口。

参照图2所示，图2为本发明用于应急情境下的结构化图标设计过程示意图：

步骤一：对描述事件的关键词进行图像化，挖掘出其核心特征和主要特征并。其次，运用标准化的符号设计方法完成了危机象形符号的设计。

步骤二：应用前置图标来表示事件主题，将事件主题分为自然灾害、城市公共安全和安全生产。不同主题采用具有较大颜色差异的纯色底图来表示。

步骤三：结构化图标将通过象形符号和相应的前置图标组合显示，象形符号被叠加在前置图标上。

参照图3所示，图3为本发明一种基于结构化图标的应急信息***的主界面示意图。用户界面可以查看两种地图。一个是个人(特定角色)，另一个是共享(团队)。以下工具集是支持协作和决策的工具集，包括编辑工具、资源分配搜索工具和关联的事件搜索工具。A是界面的主体部分，用户主要通过这部分获取信息，可以看到各类图标的标注及详细信息以及绘制自己的地图。B是应急主界面的导航栏，通过点击其中各部分可以实现页面的跳转，例如查看应急专家库、查看公告、应急管理***的登陆窗口；C是应急信息的过滤窗口，可以实现按组织名称、事件主题、事件类型对图A中的标注信息进行过滤；D是用户聊天窗口，应急专家角色可以进行实时聊天。WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。用户可以通过WebSocket全双工通信进行实时交流讨论。

参照图4所示，图4为本发明基于结构化图标的应急流程图。

基于结构化图标的信息交互***共有四类角色，公众可以通过填写表单对危机信息进行录入，***管理员对录入的危机信息进行评审，对于信息质量、可靠性较高的数据则存入数据库的另一张表中。客户端读取该表并根据表中信息自动选定结构化图标并渲染该图标状态到地图界面上。专家用户如果对于用于标注的结构化图标不满意则可以更改图标。此外专家用户间可以通过聊天工具进行实时交流并商讨得出救援方案。应急组织人员可以参考最终的应急地图实施救援方案并将行动记录和方案进行数据库存档。

参照图5所示，图5为本发明危机事件的录入信息和展示的结构化图标的信息对应示意图。

在添加危机事件时需要添加完善事件类型、事件主题，事件地点等信息，其中事件主题与结构化图标的前置图标相对应，事件类型与结构化图标的象形符号相对应。地点与图标在地图界面上的地理位置相对应。在点击提交按钮后，服务器根据两个条件判断为事件选择相对应的结构化图标标注。

基于结构化图标的信息标注流程包括：

步骤一：用户登陆管理***，通过鼠标、键盘和触摸屏这些人机交互硬件实现对危机事件的录入，如事件主题、事件类型、发生地点、发生时间、事件描述等。

步骤二：用户点击提交按钮，将该条数据录入数据库。

步骤三：客户端异步刷新获取数据库信息列表，根据录入的信息如经纬度确定它在地图中的位置，根据事件主题和事件类型分别确定结构化图标的前置图标和象形符号。

步骤四：根据获取到最新的数据库信息列表，将需要展示的结构化图标展示在地图界面上。

参照图6所示，为本发明基于结构化图标的图标更换进行步骤：

步骤1：当用户通过单击地图上需要更换的图标时，鼠标点击事件被监听并捕获，事件响应方式为弹出一个模态框。

步骤2：用户在模态框中点击选中需要更换的图标缩略图，再点击提交按钮将图标更换信息提交到数据管理模块。

步骤3：数据管理模块将图标修改信息发送到服务器，服务器通过通信接口将修改信息提交到数据库及文件***中。数据库及文件***将修改后的信息储存并将最新的信息返回，界面根据更新以后的数据显示最新的信息。

参照图7所示，图7为本发明基于结构化图标的动态信息展示示意图

本发明采用了echarts的api接口应用时间轴来表示事件的严重程度随时间变化的情况。界面右上角为时间轴，每隔3秒进入下一个时间点，用户也可以自己点击想要查看的时间点。用户通过交互界面不断提交事件变化的状态，后台对这些上传的信息存储并通过公式计算出相应的严重程度指标。在界面展示中客户端每隔3秒向服务端发送一次数据查询请求。界面根据最新的查询结果重新渲染图标状态。图标从颜色和大小两个维度来表示事件的影响。根据评估结果，使用图标的颜色深度和大小来表示事件的影响。结构化图标前置图标的颜色越浅，事件的影响就越小。点击对应点，可以查看对应时间点的事件状态信息。大多数危机信息都很复杂，结构化图标的复合结构对应于危机信息的复杂性，对危机信息的表示具有积极影响。

参照图8所示，图8为本发明基于结构化图标的信息搜索示意图

用户在左下角的过滤器中选择过滤条件，包括相关事件的发生事件，距离当前危机事件的距离、事件类型、事件主题等。选择完成后客户端向服务器端发起请求，服务器端筛选出符合条件的数据并返回给客户端。客户端将符合条件的信息返回并将计算得到的图标状态展示在页面上。在传统的历史事件搜索中，图标可以过滤出特定类型的事件，但这种事件搜索在显示空间分布和之前事件数量的比较时将无能为力。通过使用结构化图标的前置图标来区分事件主题，用户可以比较危机地图上不同类型事件的空间分布和数量。

本发明的一种基于结构化图标的信息交互***，基于结构化图标的功能主要包括信息标注、图标修改、动态信息展示、相关事件搜索。本发明设计了适用于危机情境下的结构化图标，并进一步设计了基于结构化图标的应急协作交互***。结构化和基于其设计的组件作为一个整体在协作中起着重要的作用，例如相关历史事件搜索组件、动态信息表征组件等都与结构化图标密切结合。在历史事件搜索中，***提供了基于结构化图标的事件主题、事件类型搜索，增加了用户获取信息的主动性；协同救援中用户通过选择动态时间轴上的时间点来获得对动态信息的持续认知。这种基于图标的交互信息***还突出了结构化图标的动态特性，强调应急信息的动态、多维组织。

上述实施例，只是本发明的一个实例，并不是用来限制本发明的实施与权利范围，凡与本发明权利要求所述内容相同或等同的技术方案，均应包括在本发明保护范围内。

Claims (3)

1.基于结构化图标的应急信息交互***，其特征在于，包括：

输入模块：用于接受所述状态信息，通过鼠标、键盘等硬件设备实现信息录入；

通信模块：用于接收来自客户端的数据请求并转发给数据管理模块，数据管理模块将数据查询结果返回到通信模块，再由通信模块将数据结果返回给客户端；

图标结构：包括图标容器，图标图片，图标显示，图标隐藏图标的文字标签，利用图标进行信息标注，图标按照时间轴进行动态信息的展示，基于图标的信息搜索，基于图标的信息操作包括增加，删除，修改，搜索，同时向用户提供一系列的界面交互操作方法；

基于结构化图标的数据管理模块，用于完成对危机信息的录入，修改，删除等交互操作。由数据库和文件***组成，用于处理通信模块的信息查询和数据更新请求，并将处理结果返回给通信接口，客户端发起请求从而获取图标数据，并在地图界面上创建对应的图标元素，并根据数据库存储进行分类展示；

界面交互模块，用来对用户的交互操作进行相应，对于相应的HTML元素设置对应的事件监控方法，对于表单中的信息进行修改，并将修改后的数据提交到通信模块。

2.根据权利要求1所述的基于结构化图标的应急信息交互***，其特征在于，客户端还包括基于结构化图标的信息展示模块，***存储了危机事件在各个时间节点对应的事件描述，并且根据相应的事件描述根据公式计算该事件的严重程度，结构化图标的前置图标的颜色深度和整个图标大小用来表示该事件的严重程度，根据底层存储的图标信息用于完成图标的自定义展示、分类、修改等操作。

3.根据权利要求1所述的基于结构化图标的应急信息交互***，其特征在于，客户端还包括基于结构化图标的信息搜索模块，用户点击过滤器弹出过滤窗口，在该模态框中选择对应的过滤条件并将对应的参数返回给服务器，服务器根据参数创建数据库查询语句并将符合条件的数据信息返回到界面，最终的信息搜索结果被呈现到界面上。

Images