CN107247591A - 一种基于地图的大数据展示界面交互方法 - Google Patents

Abstract

本发明公开了一种基于地图的大数据展示界面交互方法，通过3D和2D的地图来搭建数据平台，做到对攻击数据的实时交互，让区域数据能更直观和详细的展示。本发明2D地图与3D地球的联动操作不是仅限于一种展示方式的切换，而是能在切换的时候，对应彼此之间的数据做到相互转化和分析，减少用户的操作成本，提高用户对数据查看和数据分析的工作效率，其涉及到的交互体验更加的人性化，避免了现有地图搜索较为繁琐的交互体验，能让用户在最短的时间内准确定位所要的数据信息。

Description

一种基于地图的大数据展示界面交互方法

技术领域

本发明涉及数据交互领域，特别是一种基于地图的大数据展示界面交互方法。

背景技术

大数据是指“无法用现有软件工具提取、存储、搜索、共享、分析和处理的海量的、复杂的数据集合。”业界通常用4个V(即体积Volume、总类Variety、价值Value、速率Velocity)来概括大数据特征。

在互联网这个开放式的共享平台，用户是很难把控和操作这些数据的，大多会花费大量的人力和物力成本。更多的也是内部人员进行分析，很难形成一个成熟的商业产品，基于地图类数据本身来说，它自生就是庞大且密集的，而对于数据本身来说它不产生价值，如何分析和利用大数据对业务产生帮助才是应该解决的关键。

以互联网攻击态势数据举例，近年来，网络安全事件层出不穷，种类、手段多样化，使得网络安全监管变得极其困难。怎样把这些庞大的数据做到实时检测、快速汇总、准确分析成可以用的价值，根据接入的攻击数据基于地图可视化来实现更好的交互操作。

互联网地图攻击态势大数据可视化可实时观测攻击和被攻击数据流向，并可同时将这些数据综合给攻击和被攻击者行为数据共同接入系统平台，进行统一可视化呈现，全面呈现按地域、时间、空间、统计类别等不同维度与数据进行交互，全面分析了解攻击态势，帮助使用者综合监测、分析、统计数据。

现有的大屏展示大部分都是只能以3D或2D其中一个维度的来展示数据。3D地球往往也只是一个动态效果图，实质的数据信息操作价值并不是很大。2D地图能结合的数据分析也非常有限，一旦数据划分过于详细，使用者将会在操作上花费大量时间去查找数据展示界面。有时也会因为某一个误操作而导致数据丢失，需要重新查找。

基于地图攻击态势的数据展示，往往无法做到数据的多元化运用，一种就只能展示极少的数据，去做到一个大屏展示效果。使用者对数据分析和数据整合的操作几乎很少，另外一种，会积累很庞大的数据库，但是由于数据划分比较细导致平台数据量大，界面相对复杂，使用者操作成本太高，以至于使用者对数据监测、查看、分析、管理上会花去大量时间，未能做到及时响应使用者需求，最终局限了使用人群。

而对于当前相对成熟的2D地图操作，如果用户在操作时地图范围太大，数据过多。地图上呈现的数据状态就会非常密集，这要就导致用户对需要的信息看不清。他们往往只能在2D地图上放大某个区域，如果想要再移动到其他区域，现有的交互操作只能是不断的移动地图，或者进行搜索定位。这样的交互无疑会增加用户的操作步骤。

攻击态势：大规模系统环境中获取那些网络中存在漏洞和安全缺陷的网络系统硬件、软件及其系统中的数据进行攻击的行为，并能对这些攻击数据进行分析、理解、显示以及预测未来的发展趋势。

2D：2D全称“two dimensional”又叫平面图形，也就是说非立体。2D图形内容只有水平的X轴向与垂直的Y轴向。

3D：3D是英文“3Dimensions”的简称，中文是指三维、三个维度、三个坐标，即有长、宽、高。换句话说，就是立体的，3D就是空间的概念也就是由X、Y、Z三个轴组成的空间，是相对于只有长和宽的平面(2D)而言。今天的3D，主要特指是基于电脑、互联网的数字化的3D/三维/立体技术，既可以是动词、是名词，又可以是形容词、是状态副词，也就是三维数字化，包括3D软件技术和3D硬件技术。

发明内容

本发明所要解决的技术问题是提供一种基于地图的大数据展示界面交互方法，其2D与3D的地图联动操作不是仅限于一种展示方式的切换，而是能在切换的时候，对应彼此之间的数据做到相互转化和分析，减少用户的操作成本，提高用户对数据查看和数据分析的工作效率。本发明涉及到的交互体验更加的人性化，避免了现有地图搜索较为繁琐的交互体验，能让用户在最短的时间内准确定位所要的数据信息。

为解决上述技术问题，本发明采用的技术方案是：

一种基于地图的大数据展示界面交互方法，包括3D地球与2D地图联动、图像放大与缩小、区域拆分和整合，具体如下：

3D地球与2D地图联动，即拖动2D地图，则3D地球同时旋转到相应位置，旋转3D地球，则2D地图同时位置移动；具体为：

步骤1.1：通过开源的地图数据包OpenStreetMap制作通用的地图数据包，通用的地图数据包里面包含了地理位置的经纬坐标；

步骤1.2：使用D3.js绘制地图，通过D3.geo.mercator()函数直接将地图数据放入，画出2D地图；

步骤1.3：使用tree.js来绘制3D地球；

步骤1.4：当用户使用设备与2D地图交互时，通过javascript监听鼠标左键按下事件onmousedown、移动设备接触touch事件，自动获取当前这个点所在的经纬度坐标，让D3.js和three.js居中显示该坐标点区域，达到2D地图和3D地球同步；

图像放大与缩小

步骤2.1：2D地图放大

使用javascript监听2D地图的鼠标按下事件onmousedown，在鼠标弹起事件onmouseup触发前，使用D3.js持续绘制最新的行政区域坐标；

步骤2.2：2D地图缩小

使用javascript监听2D地图鼠标时间，若右键按下时间超过设定时间，将地图缩小到默认的比例尺；

步骤2.3：点击3D地球区域，2D地图自动跳转

当使用设备与2D地图交互时，通过javascript监听鼠标左键按下事件onmousedown、移动设备接触touch事件，自动获取当前这个点所在的经纬度坐标，让D3.js和three.js居中显示该坐标点区域；

区域的拆分和整合

步骤3.1：定义一个比例尺，表示缩放比例是行政区域，所述行政区域包括国家、城市，当用户在触发了一个点，判断这个比例尺所在行政区域范围，并读出这个触发点坐标所在的行政区域；

步骤3.2：将该行政区域发送给后端数据库，通过行政区域名字，从数据库里将行政区域的GeoJson文件配置推送给客户端浏览器，浏览器直接渲染该配置；

步骤3.3：在3D地图上使用javascript监听网页上某个元素的事件，监听3D地球的所在DOM(DOM＝Document Object Model——文档对象模型，是HTML文件或XML文件渲染和交互的API(应用程序的编程接口)。DOM是文档载入到浏览器之后文档的模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分。详见https://developer.mozilla.org/zh-CN/docs/Glossary/DOM)的鼠标双击事件，触发2D地图的还原操作，恢复初始大小和位置。

与现有技术相比，本发明的有益效果是：

1)利用云数据实时图形可视化、场景化达到对数据处理的实时交互，让使用者更加方便地进行数据的个性化管理与使用。使用者在交互操作的过程中对攻击数据和被攻击数据能做到便捷和迅速的监控、检测、分析和统计的一系列操作。

2)基于地图放大缩小功能，目前技术只能通过在地图上点击”放大“或者”缩小“icon来进行操作，部分能做到局部某块儿区域进行反复点击对地图放大，但是无法做到在基于同等地图区域大小范围的跨远距离切换，用户往往只能还原地图大小再做一遍多种搜索交互方式切换查询。而本发明将会利用2D与3D地图的联动定位，减少原始层层叠加搜索方式，用最快速的点击定位做到坐标位移定位。

3)地域板块儿的拆分即是对数据的拆分，现有的技术和操作方式都需要用户进入到某个信息板块儿再对所需要的数据信息进行筛选，再点击查看详情信息。这样板块儿布局本身就对数据隐藏的非常深，并且用户在返回首页时，往往可能会误操作而丢失掉刚刚深入查看的数据，这样又得导致用户再次从头走一遍查看流程。本发明对地域板块儿进行拖动拆分操作，从根本原因上减少了用户对数据的一层一层的点击查看，便于用户在最短的时间内快速找到数据资料进行数据查看和分析，这样简单的交互方式，不仅减少了用户的学习成本，而且对用户在查看数据和观察数据上都大大提升了工作效率。

4)本发明交互方法也可用于多种场景，可以运用地域交通管理，商品运输管理，网上交易等等，凡事基于地图的大数据展示和操作都能套用，将场景与互动有机结合，实现了三维实时数字化场景交互。

附图说明

图1是本发明交互方法之3D地球与2D地图联动。

图2是本发明交互方法之图像放大与缩小。

图3是本发明交互方法至区域拆分和整合。

具体实施方式

下面通过附图和具体实施方式对本发明作进一步详细的说明。

本发明通过3D和2D的地图来搭建数据平台，做到对攻击数据的实时交互，让区域数据能更直观和详细的展示。大数据的终极核心价值在于“资源优化配置”，将海量的数据通过地图的方式呈现出来后，将传统过程中单向被动获取信息的方式，转变为双向联动的方式，提高使用者的参与度，提供给用户对大数据可视化需求的无限助力与可能，让非专业用户也可以轻松自如地应对各项数据专业应用。

如图1所示，使用者可已在3D地球上做任意角度的拖动和旋转动作来改变2D地图的地域位置展示，做到两图联动。当然也可以根据使用的的操作情况暂停联动功能，不会限制死一个操作方式。联动操作能在使用者查看和监测攻击情况时，更快捷、更直观的去了解各个区域的攻击情况。

步骤101-使用者上下左右拖动2D世界地图，3D地图同时旋转到相应位置。

步骤102-使用者旋转3D地球，2D世界地图同时位置移动。

用户在操作步骤101或者步骤102时，都需要通过开源的地图数据包OpenStreetMap(一款开源的地图数据源，涵盖了世界几乎所有的地图数据，详见https://www.openstreetmap.org)，制作通用的地图数据包(GeoJson格式(地图数据的一种格式，方便计算机读取数据，详见http://baike.baidu.com/item/GeoJson))，这种数据包里面就包含了地理位置的经纬坐标；有了数据，就可以使用D3.js(一款javascript实现的用户游览器端制作2D图形图表的库，详见https://d3js.org)来绘制地图，通过D3.geo.mercator()函数(D3.js画地图所用函数)直接将地图数据放入即可画出地图；使用tree.js(一款javascript实现的用户浏览器端制作3D图形图表的库，详见https://threejs.org/)来绘制3D地球。

注意：此时，不论是2D还是3D，坐标系都一起切换到了地理位置坐标系(即经纬度坐标)。

再者当用户使用手指、鼠标等设备与2D地图交互时，通过javascript(一种在游览器运行的计算机编程语言)监听：鼠标左键按下事件onmousedown(鼠标左键按下时，触发的动作，由javascript在游览器上可以监听到)、移动设备接触touch事件，可以自动获取当前这个点所在的经纬度坐标，因为相同的经纬度坐标，在不同大小和不同形态的地图(2D或3D)上，都是表示同一个地理位置，所以直接让D3.js和three.js居中显示该坐标点区域即可，这样就达到了2D地图和3D地球同步。

步骤102和步骤101相似，只是先获取3D地球的经纬度，然后让2D地图对应显示到该经纬度。

如图2所示，使用者可以在2D地图上放大到某个范围，然后通过双击3D地图上的不同区域，2D地图将自动跳转到该区域位置。长按鼠标左键和右键将会直接放大和缩小到地图的最大和100％值。通过这种交互方式能让使用者的聚焦点始终保持在一个固定区域内，做到局部和全局的快速切换，减少使用者的操作成本。

步骤103-使用者在3D地球上双击地理位置，2D地图上将会保持同样区域范围调转到选中位置。

步骤104-在2D地图上点击鼠标左右键将放大和缩小地图区域范围，长按左键将放会大到地图区域最大范围，长按右键将会恢复到区域显示100％范围。

2D地图放大：使用javascript监听2D地图的鼠标按下事件onmousedown，在鼠标弹起事件onmouseup(鼠标弹起事件)触发前，使用D3.js不停绘制最新的行政区域坐标(这些都是d3.geo函数自动提供的，只需传递当前放大的比例尺)。比如，现在为国家的比例尺，长按之后，会放大到城市比例尺，获取当前的触发点坐标所在的行政区域就知道应该绘制哪个城市。

2D地图缩小：依然使用javascript监听2D地图鼠标时间，如果右键按下时间超过2秒钟(长按时间可以自定义)，直接将地图缩小到默认的比例尺，比如默认为国家，会自动缩小，并展示所有国家的地图。

点击3D地球区域，2D地图自动跳转：当使用手指、鼠标等设备与2D地图交互时，通过javascript监听：鼠标左键按下事件onmousedown、移动设备接触touch事件(鼠标左键按下时，触发的动作，由javascript在游览器上可以监听到，不过是在移动设备上的手指或者其他触屏笔，触发的点击事件，同样由javascript在移动设备的游览器上可以监听到)，可以自动获取当前这个点所在的经纬度坐标，因为相同的经纬度坐标，在不同大小和不同形态的地图(2D或3D)，都是表示同一个地理位置，所以直接让D3.js和three.js居中显示该坐标点区域即可。

如图3所示，使用者在2D地图上鼠标点击拖动某块区域后，整块儿区域将脱离整块地图，单独拆分并显示其详细信息。使用者可通过区域拆分，快速的查看和统计，某块儿区域的被攻击和攻击数据。通过区域的拆分和整合，避免了区域信息隐藏太深减少使用者对数据的搜索成本，使用者能快速拆分也能快速整合。3D和2D的图像展保障使用者能同时观看全局状态和局部详情数据。

步骤105-使用者拖动2D世界地图上某个区域板块，板块儿可自动脱离主地图，并展示其详细数据信息。

步骤106-双击3D地球后将回到完整的2D地图界面。

步骤105中，可以定义一个比例尺，表示缩放比例是国家、城市或更小的行政区域，当用户在触发了一个点，立马判断这个比例尺所在行政区域范围，并读出这个触发点坐标所在的行政区域，将该行政区域，比如成都市，发送给后端数据库，这样数据局只需要知道行政区域名字，就能很简单的从数据库里将成都市的GeoJson文件配置推送给客户端浏览器，浏览器直接渲染该配置即可。

步骤106中，在3D地图上使用javascript，javascript这个语言就可以监听网页上某个元素的事件，监听3D地球的所在DOM的鼠标双击事件即可，立即触发2D地图的还原操作，恢复初始大小和位置(类似长安鼠标右键恢复100％大小)。

Claims (1)

1.一种基于地图的大数据展示界面交互方法，其特征在于，包括3D地球与2D地图联动、图像放大与缩小、区域拆分和整合，具体如下：

3D地球与2D地图联动，即拖动2D地图，则3D地球同时旋转到相应位置，旋转3D地球，则2D地图同时位置移动；具体为：

步骤1.1：通过开源的地图数据包OpenStreetMap制作通用的地图数据包，通用的地图数据包里面包含了地理位置的经纬坐标；

步骤1.2：使用D3.js绘制地图，通过D3.geo.mercator()函数直接将地图数据放入，画出2D地图；

步骤1.3：使用tree.js来绘制3D地球；

步骤1.4：当用户使用设备与2D地图交互时，通过javascript监听鼠标左键按下事件onmousedown、移动设备接触touch事件，自动获取当前这个点所在的经纬度坐标，让D3.js和three.js居中显示该坐标点区域，达到2D地图和3D地球同步；

图像放大与缩小

步骤2.1：2D地图放大

使用javascript监听2D地图的鼠标按下事件onmousedown，在鼠标弹起事件onmouseup触发前，使用D3.js持续绘制最新的行政区域坐标；

步骤2.2：2D地图缩小

使用javascript监听2D地图鼠标时间，若右键按下时间超过设定时间，将地图缩小到默认的比例尺；

步骤2.3：点击3D地球区域，2D地图自动跳转

当使用设备与2D地图交互时，通过javascript监听鼠标左键按下事件onmousedown、移动设备接触touch事件，自动获取当前这个点所在的经纬度坐标，让D3.js和three.js居中显示该坐标点区域；

区域的拆分和整合

步骤3.1：定义一个比例尺，表示缩放比例是行政区域，所述行政区域包括国家、城市，当用户在触发了一个点，判断这个比例尺所在行政区域范围，并读出这个触发点坐标所在的行政区域；

步骤3.2：将该行政区域发送给后端数据库，通过行政区域名字，从数据库里将行政区域的GeoJson文件配置推送给客户端浏览器，浏览器直接渲染该配置；

步骤3.3：在3D地图上使用javascript监听网页上某个元素的事件，监听3D地球的所在DOM的鼠标双击事件，触发2D地图的还原操作，恢复初始大小和位置。