CN108230433B - 3d地图散点数据展示方法及系统、信息数据处理终端 - Google Patents

Abstract

本发明属于计算机软件技术领域，公开了一种3D地图散点数据展示方法及系统、信息数据处理终端，采用二维图型模式和三维空间模式，利用视觉差别和光学折射在平面内创建出三维立体图型；制作物体渲染到网页中，用三维投影方式使物体近大远小；运用拍照原理，设置相机视角的夹角使展示物体相对运动起来；使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，保留影响较大的自变量；使用航线数据可视化方法，运用scale将数据映射到对应的轴上，使用循环渲染方法，以固定的时间单位递增，使数据动态地变化。本发明可以创建各种三维场景。充分展现出其酷炫的3D效果。

Description

3D地图散点数据展示方法及系统、信息数据处理终端

技术领域

本发明属于计算机软件技术领域，尤其涉及一种3D地图散点数据展示方法及系统、信息数据处理终端。

背景技术

目前，业内常用的现有技术是这样的：伴随着大数据时代的到来，数据可视化日益受到关注，现有的数据可视化大多数数据具有极强的相关性，无法将其分离作为独立的对象显示。只能以平面图型来展示，无法立体、直观地、多角度地展现出事物之间的关联性、对比度等。在大量的相关数据分析时，现有的技术是以单个的自变量来解释因变量的变化状况，在本发明中使用多个自变量来分析因变量的变化状况。例如，在市场的经济活动中，经常会遇到某一市场现象的发展和变化取决于几个影响因素的情况，也就是一个因变量和几个自变量有依存关系的情况。而且有时几个影响因素主次难以区分，或者有的因素虽属次要，但也不能略去其作用。他们会受到其他变量的影响，在分析其中两个变量的相关系数时，得到的结果不能真实反映变量之间的相关关系。用户虽然能够观察数据，却不能对数据强度变化做出反应；从大规模数据库中查询数据可能导致高延迟，使交互率降低，影响最终的展示效果。

综上所述，现有技术存在的问题是：

(1)相关数据分析时，受到其他变量的影响，在分析其中两个变量的相关系数时，得到的结果不能真实反映变量之间的相关关系。

(2)用户能够观察数据，不能对数据强度变化做出反应；大规模数据库中查询数据导致高延迟，使交互率降低，影响最终的展示效果。

解决上述技术问题的难度和意义：

(1)在相关数据分析时，自变量应具有完整的统计数据，这样才能确定其预测值。而且自变量与因变量之间的线性相关必须是真实的。在对其分析很难确定自变量受哪些因变量的影响及因变量对其影响程度的大小。

意义：使用相关数据分析方法主要是分析出影响自变量较大的因变量，去除不相关的因变量和影响较小的因变量，使其数据更加精确，更能反映出真实的结果。

(2)在用户观察数据的过程中，数据需要通过什么样的形式展示才能更加直观，更加清楚、一目了然。大规模数据查询过程中效率较慢导致交互率较低，影响最终的展示效果。

意义：使用户在观察数据的过程中更加直观、一目了然。提供了一种非常清晰的沟通方式，提高数据的交互率，使其更高效的展示重要的信息和细节层次。

发明内容

本发明提供了一种3D地图散点数据展示方法及系统、信息数据处理终端。本发明采用二维图型模式和三维空间模式，利用视觉差别和光学折射在平面内创建出三维立体图型；制作物体渲染到网页中，用三维投影方式使物体近大远小；运用拍照原理，设置相机视角的夹角使展示物体相对运动起来；使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，保留影响较大的自变量；使用航线数据可视化方法，运用scale将数据映射到对应的轴上，使用循环渲染方法，以固定的时间单位递增，使数据动态地变化。本发明可以创建各种三维场景。充分展现出其酷炫的3D效果。

本发明是一种3D地图散点数据展示方法，所述3D地图散点数据展示方法采用二维图型模式和三维空间模式，利用视觉差别和光学折射在平面内创建出三维立体图型；制作物体渲染到网页中，用三维投影方式使物体近大远小；运用拍照原理，设置相机视角的夹角使展示物体相对运动起来；使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，保留影响较大的自变量；使用航线数据可视化方法，运用scale将数据映射到对应的轴上，使用循环渲染方法，以固定的时间单位递增，使数据动态地变化。

进一步，所述3D地图散点数据展示方法具体包括以下步骤：

步骤一，运用D3来创建一个矢量图形元素用外部的层叠样式表渲染，绘制出每种不同颜色的像素点，使用点阵排列的方式使每个像素点平铺连接，绘制成完整的画布；

步骤二，通过canvas绘制出所有物体的容器，通过相机查看在scene下的3D场景并生成3d渲染器，设置渲染器的宽高和背景色，通过设置使周围环境变得清晰；

步骤三，使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，舍弃影响较小的自变量，保留影响较大的自变量；

步骤四，通过每个像对于区域的面积及其该面积上对于的像素点数量，取其前两个变量的除数的0.5次幂，计算出某个区域上每个像素点之间的间距；再通过计算某个点与区域中心点的位置，再加上点与点之间的间距，最终使像素点平铺形成区域面积图型；

步骤五，使用航线数据可视化方法，运用scale将数据映射到对应的轴上，使用循环渲染方法，以固定的时间单位递增，使数据动态地变化；

步骤六，使用canvas绘制出特定宽高的矩形，使用模型算法，通过模型的高度计算出需要填充模型物的数量，将每个相同数据累加作为高度，运用xyz三维模式最终组合形成柱状图型；

步骤七，在原来的平面图展示形式上增加Z轴，利用视觉差别和光学折射原理在平面内创建出三维立体图型；

步骤八，使用数据缓存机制，将查询出来的数据存入缓存中。

进一步，所述步骤四中：计算点间距的方法：R＝Math.pow(n/m，x)*40；

R表示两点之间的间距；Math.pow(n/m，x)表示n/m的x次幂；n表示某个区域内的像素点的数量；m表示某个区域的面积；

计算点与区域中心的位置方法：

x+(1-n*m)*Math.cos(t)；

x表示像素点的X坐标；

n和m表示随机数；

Math.cos(t)表示t的正玄值。返回值在-1.0到1.0；X都是指的弧度；

t表示生成集群的范围。

进一步，所述步骤六中的模型矩阵算法：box.rotation.y＝Math.PI/6；box表示当前绘制的对象盒子，box.rotation.y表示当前绘制的盒子的Y轴，Math.PI表示圆的周长与直径之比π；相机偏移角度算法：camera.position.y＝30；camera表示相机，相当于人的眼睛，camera.position.y表示相机在Y轴的位置。

本发明的另一目的在于提供一种所述3D地图散点数据展示方法的绘制3D效果的方法，所述绘制3D效果的方法通过three.js绘制出3D效果图，同样使用webgl在canvas上实现3D效果或使用OpenGL和WebGL实现三维图型的绘制和渲染以及可对三维立体图型不同方位的展示。

本发明的另一目的在于提供一种所述3D地图散点数据展示方法的3D地图散点数据展示系统，所述3D地图散点数据展示系统包括：

画布绘制模块，用于创建SVG元素、层叠样式表渲染、绘制像素点、每个像素点平铺连接，绘制成完整的画布；

设置模块，用于通过canvas绘制出所有物体的容器，设置渲染器的宽高和背景色；

判断模块，用于使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度；

区域面积形成模块，用于使像素点平铺形成区域面积图型；

数据可视化模块，用于航线数据可视化方法使数据动态地变化；

图型形成模块，用于运用xyz三维模式最终组合形成柱状图型；

立体模型获取模块，用于利用视觉差别和光学折射原理在一个平面内创建出三维立体图型；

数据缓存模块，用于使用数据缓存机制，将查询出来的数据存入缓存中。

本发明的另一目的在于提供一种实现所述3D地图散点数据展示方法的计算机程序。

本发明的另一目的在于提供一种实现所述3D地图散点数据展示方法的信息数据处理终端。

本发明的另一目的在于提供一种计算机可读存储介质，包括指令，当其在计算机上运行时，使得计算机执行所述的3D地图散点数据展示方法。

综上所述，本发明的优点及积极效果为：地图散点数据展示方法是一款运行在浏览器中的3D引擎，可以用它创建各种三维场景。充分展现出其酷炫的3D效果。与平面图型只能从一种视野角度观察图型，3D图型利用该展示制作一个物体渲染到网页中去，由场景(scene)、相机(camera)和渲染器(renderer)这3个组件构建而成。在原来的平面图展示形式上增加Z轴，利用视觉差别和光学折射原理在一个平面内创建出三维立体图型，通过相机(camera)来查看在scene下的3d场景，可以设置相机视角的夹角(fov)通过不同的视野角度进行观察，再使用三维投影方式使物体近大远小，符合平时看东西的感觉。使用散点图与计算线性相关的方法结合起来，得到两者事物之间的真实关系，将数据直观、形象的呈现出来，突出的呈现出数据之间的关联性同时又将其作为独立的对象显示。使用D3它以最小的开销支持大型数据集以及交互与动画的动态行为，用户能够直观地观察到数据及数据强度的变化，并实现用户与数据的交互，方便用户控制数据展示。最终使数据的呈现更具有艺术性，更具魅力。

本发明与目前主流使用的技术使用对比

附图说明

图1是本发明实施例提供的3D地图散点数据展示方法流程图。

图2是本发明实施例提供的3D地图散点数据展示系统结构示意图；

图中：1、画布绘制模块；2、设置模块；3、判断模块；4、区域面积形成模块；5、数据可视化模块；6、图型形成模块；7、立体模型获取模块；8、数据缓存模块。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明解决了大多数数据之间极强的相关性，将其作为独立的对象显示。在分析其中两个变量的相关系数时，得到的结果不能真实反映变量之间的相关关系，用户能够直观地观察到数据及数据强度的变化，得到两者事物之间的真实关系，提高了数据查询导致的高延迟和低交互率性能，对数据可视化做出变革，充分展示出数据可视化的魅力。

如图1所示，本发明实施例提供的3D地图散点数据展示方法包括以下步骤：

S101：运用D3来创建一个SVG(矢量图形(Scalable Vector Graphics))元素然后用外部的层叠样式表渲染，绘制出每种不同颜色的像素点，再使用点阵排列的方式使每个像素点平铺连接，绘制成完整的画布；

S102：通过canvas绘制出所有物体的容器，通过相机查看在(scene)下的3D场景并生成3d渲染器，设置渲染器的宽高和背景色，通过设置使周围环境变得清晰；

S103：使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，舍弃影响较小的自变量，保留影响较大的自变量；

S104：通过每个像对于区域的面积及其该面积上对于的像素点数量，取其前两个变量的除数的0.5次幂，计算出某个区域上每个像素点之间的间距；再通过计算某个点与区域中心点的位置，再加上点与点之间的间距，最终使像素点平铺形成区域面积图型；

S105：使用航线数据可视化方法，运用scale将数据映射到对应的轴(x，y轴)上，再使用循环渲染方法，以固定的时间单位递增，使数据动态地变化；

S106：使用canvas绘制出特定宽高的矩形，再使用模型算法，通过模型的高度计算出需要填充模型物的数量，再将每个相同数据累加作为高度，最终运用xyz三维模式最终组合形成柱状图型；

S107：在原来的平面图展示形式上增加Z轴，利用视觉差别和光学折射原理在一个平面内创建出三维立体图型；

S108：使用数据缓存机制，将查询出来的数据存入缓存中。

如图2所示，本发明实施例提供的3D地图散点数据展示系统包括：

画布绘制模块1，用于创建SVG元素、层叠样式表渲染、绘制像素点、每个像素点平铺连接，绘制成完整的画布；

设置模块2，用于通过canvas绘制出所有物体的容器，设置渲染器的宽高和背景色；

判断模块3，用于使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度；

区域面积形成模块4，用于使像素点平铺形成区域面积图型；

数据可视化模块5，用于航线数据可视化方法使数据动态地变化；

图型形成模块6，用于运用xyz三维模式最终组合形成柱状图型；

立体模型获取模块7，用于利用视觉差别和光学折射原理在一个平面内创建出三维立体图型；

数据缓存模块8，用于使用数据缓存机制，将查询出来的数据存入缓存中。

本发明实施例提供的3D地图散点数据展示方法具体包括以下步骤：

步骤一，为了独立的将对象显示并代表不同的对象，运用D3来创建一个SVG(矢量图形(Scalable Vector Graphics))元素然后用外部的层叠样式表来渲染它，绘制出每种不同颜色的像素点，再使用点阵排列的方式使每个像素点平铺连接(画布上的每一个像素点代表一百万的数据信息)，每个像素点之间相隔1像素空隙，通过控制效果，随着时间逐渐插补一些样式和属性，最终绘制成完整的画布。

步骤二，制作一个物体渲染到网页中，这些物体由场景(scene)、相机(camera)和渲染器(Renderer)这3个组件构建而成。首先通过canvas绘制出所有物体的容器，通过相机(camera)来查看在(scene)下的3D场景并生成3d渲染器，设置渲染器的宽高和背景色，通过设置[点光源(Point Light)][聚光灯(Spot Light)][平行光源(Direction Light)]，和[环境光(Ambient Light)]使周围环境变得清晰。

步骤三，使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，舍弃影响较小的自变量，保留影响较大的自变量，从而更准确地判断变量之间的相关关系和相关程度。

步骤四，通过每个像对于区域的面积及其该面积上对于的像素点数量，取其前两个变量的除数的0.5次幂，计算出某个区域上每个像素点之间的间距。再通过计算某个点与区域中心点的位置，再加上点与点之间的间距，最终使像素点平铺形成区域面积图型。

计算点间距的方法：R＝Math.pow(n/m，x)*40；

(说明：R表示两点之间的间距；Math.pow(n/m，x)表示n/m的x次幂；n表示某个区域内的像素点的数量；m表示某个区域的面积；)

计算点与区域中心的位置方法：

x+(1-n*m)*Math.cos(t)；

说明：x表示像素点的X坐标；

n和m表示随机数；

Math.cos(t)表示t的正玄值。返回值在-1.0到1.0之间(X都是指的“弧度”)；

t表示生成集群的范围；

步骤五，使用航线数据可视化方法，运用scale将数据映射到对应的轴(x，y轴)上，再使用循环渲染方法，以固定的时间单位递增，使这些数据动态地变化起来。

步骤六，使用canvas绘制出特定宽高的矩形，再使用模型算法，通过模型的高度计算出需要填充模型物的数量，再将每个相同数据累加作为高度，最终运用xyz三维模式最终组合形成柱状图型。

模型矩阵算法：box.rotation.y＝Math.PI/6；(说明：box表示当前绘制的对象盒子，box.rotation.y表示当前绘制的盒子的Y轴，Math.PI表示圆的周长与直径之比π)相机偏移角度算法：camera.position.y＝30；(说明：camera表示相机，相当于人的眼睛，camera.position.y表示相机在Y轴的位置)。

步骤七，在原来的平面图展示形式上增加Z轴，利用视觉差别和光学折射原理在一个平面内创建出三维立体图型。使用三维投影方式使物体近大远小，更符合我们平时看东西的感觉。运用拍照原理，设置相机视角的夹角(fov)使展示物体随相机视角的变动而相对运动起来。

步骤八，使用数据缓存机制，将查询出来的数据存入缓存中，在后面的操作中减少了对数据的再次查询，提高了数据查询导致的高延迟和低交互率性能。

本发明在传统基于二维图型模式基础上，引入另外一种三维空间模式，在原来的平面图展示形式上增加Z轴，利用视觉差别和光学折射原理在一个平面内创建出三维立体图型。制作一个物体渲染到网页中去，用三维投影方式使物体近大远小，更符合我们平时看东西的感觉。运用拍照原理，设置相机视角的夹角(fov)使展示物体随相机视角的变动而相对运动起来。使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，舍弃影响较小的自变量，保留影响较大的自变量，从而更准确地判断变量之间的相关关系和相关程度。使用航线数据可视化方法，运用scale将数据映射到对应的轴(x，y轴)上，再使用循环渲染方法，以固定的时间单位递增，使这些数据动态地变化起来。最终使数据的呈现更具有艺术性，更具魅力。

本发明也通过three.js可以绘制出3D效果图，同样使用webgl也可以在canvas上实现3D效果，使用OpenGL和WebGL也可以实现三维图型的绘制和渲染以及可对三维立体图型不同方位的展示。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用全部或部分地以计算机程序产品的形式实现，所述计算机程序产品包括一个或多个计算机指令。在计算机上加载或执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输)。所述计算机可读取存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘SolidState Disk(SSD))等。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (5)

1.一种3D地图散点数据展示方法，其特征在于，所述3D地图散点数据展示方法采用二维图形模式和三维空间模式，利用视觉差别和光学折射在平面内创建出三维立体图形；制作物体渲染到网页中，用三维投影方式使物体近大远小；运用拍照原理，设置相机视角的夹角使展示物体相对运动起来；使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，保留影响大的自变量；使用航线数据可视化方法，运用scale将数据映射到对应的轴上，使用循环渲染方法，以固定的时间单位递增，使数据动态地变化；

所述3D地图散点数据展示方法具体包括以下步骤：

步骤一，运用D3来创建一个矢量图形元素，用外部的层叠样式表渲染，绘制出每种不同颜色的像素点，使用点阵排列的方式使每个像素点平铺连接，绘制成完整的画布；

步骤二，通过canvas绘制出所有物体的容器，通过相机查看在scene下的3D场景并生成3d渲染器，设置渲染器的宽高和背景色，通过设置使周围环境变得清晰；

步骤三，使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度，舍弃影响小的自变量，保留影响大的自变量；

步骤四，通过每个像素区域的面积及其该面积上像素点数量，取其前两个变量的除数的0.5次幂，计算出某个区域上每个像素点之间的间距；再通过计算某个点与区域中心点的位置，再加上点与点之间的间距，最终使像素点平铺形成区域面积图形；

步骤五，使用航线数据可视化方法，运用scale将数据映射到对应的轴上，使用循环渲染方法，以固定的时间单位递增，使数据动态地变化；

步骤六，使用canvas绘制出特定宽高的矩形，使用模型算法，通过模型的高度计算出需要填充模型物的数量，将每个相同数据累加作为高度，运用xyz三维模式最终组合形成柱状图形；

步骤七，在原来的平面图展示形式上增加Z轴，利用视觉差别和光学折射原理在平面内创建出三维立体图形；

步骤八，使用数据缓存机制，将查询出来的数据存入缓存中；

所述步骤四中：计算点间距的方法：R＝Math.pow(n/m，x)*40；

R表示两点之间的间距；Math.pow(n/m，x)表示n/m的x次幂；n表示某个区域内的像素点的数量；m表示某个区域的面积；

计算点与区域中心的位置方法：

x’+(1-n’*m’)*Math.cos(t)；

x’表示像素点的X坐标；

n’和m’表示随机数；

Math.cos(t)表示t的余弦值；返回值在-1.0到1.0；X都是指的弧度；

t表示生成集群的范围。

2.如权利要求1所述的3D地图散点数据展示方法，其特征在于，所述步骤六中的模型矩阵算法：box.rotation.y＝Math.PI/6；box表示当前绘制的对象盒子，box.rotation.y表示当前绘制的盒子的Y轴，Math.PI表示圆的周长与直径之比π；相机偏移角度算法：camera.position.y＝30；camera表示相机，相当于人的眼睛，camera.position.y表示相机在Y轴的位置。

3.一种如权利要求1所述3D地图散点数据展示方法的绘制3D效果的方法，其特征在于，所述绘制3D效果的方法通过three.js绘制出3D效果图，同样使用webgl在canvas上实现3D效果或使用OpenGL和WebGL实现三维图形的绘制和渲染以及可对三维立体图形不同方位的展示。

4.一种如权利要求1所述3D地图散点数据展示方法的3D地图散点数据展示系统，其特征在于，所述3D地图散点数据展示系统包括：

画布绘制模块，用于创建SVG元素、层叠样式表渲染、绘制像素点、每个像素点平铺连接，绘制成完整的画布；

设置模块，用于通过canvas绘制出所有物体的容器，设置渲染器的宽高和背景色；

判断模块，用于使用二元变量分析统计法和偏相关分析法判断自变量和应变量的影响程度；

区域面积形成模块，用于使像素点平铺形成区域面积图形；

数据可视化模块，用于航线数据可视化方法使数据动态地变化；

图形形成模块，用于运用xyz三维模式最终组合形成柱状图形；

立体模型获取模块，用于利用视觉差别和光学折射原理在一个平面内创建出三维立体图形；

数据缓存模块，用于使用数据缓存机制，将查询出来的数据存入缓存中。

5.一种计算机可读存储介质，包括指令，当其在计算机上运行时，使得计算机执行如权利要求1-2任意一项所述的3D地图散点数据展示方法。

Images