[发明专利]一种基于地图的大数据展示界面交互方法

摘要

本发明公开了一种基于地图的大数据展示界面交互方法，通过3D和2D的地图来搭建数据平台，做到对攻击数据的实时交互，让区域数据能更直观和详细的展示。本发明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的鼠标双击事件，触发2D地图的还原操作，恢复初始大小和位置。