CN102937896B - 在svg中利用颜色映射技术动态展示二维空间数据的方法 - Google Patents

Abstract

本发明提出一种在SVG中利用颜色映射技术动态展示二维空间数据的方法，包括：访问SVG文档，新建空白画布；若所关注的空间范围非整个SVG平面，则新建裁剪路径，作为遮罩应用于画布；设定横、纵向的网格间距参数，计算关注各网格矩形的坐标与宽高；采集二维空间上N个点第t个周期的标量数据；利用空间插值算法计算各个网格矩形中心点的标量值；利用颜色映射技术，将各个网格矩形中心点的标量值映射为特定的颜色；若t=1，则在画布上依次创建每一个网格矩形，填充标量值对应的颜色；若t＞1，则依次将每一个网格矩形的填充色改变为当前标量值所对应的颜色；若存在待展示周期，令t=t+1，返回S4继续展示下一周期数据。本发明开发难度小、开发效率高、实用性强。

Description

在SVG中利用颜色映射技术动态展示二维空间数据的方法

技术领域

本发明涉及计算机应用领域，特别提供了一种在SVG（ScalableVectorGraphics，可缩放矢量图形）中利用颜色映射技术动态展示二维空间数据的方法。

背景技术

空间数据是指用来表示空间实体的位置、形状、大小及其分布特征等方面信息的数据，既与空间有关，又与时间有关，其广泛存在于地理、气象、电力、建筑等诸多学科领域。空间数据的常见形式是标量场（ScalarField），标量场空间中每一点的属性都可以由一个单一数值（标量）来表示。在直角坐标系二维空间中，标量场中某一点的值可表示为(x,y,v_t)，其中下标t表示该标量场随时间变化，即为时变标量场。

随着信息技术的飞速发展，各类空间数据的采集量呈现爆炸式的增长，对可视化的要求日益提高。标量场可视化是指通过图形的方式揭示标量场对象空间分布的内在关系。由于很多科学测量或者模拟仿真所产生的空间数据都是以标量场的形式出现，对标量场的可视化是空间数据可视化研究的核心课题之一。颜色映射（ColorMapping）是应用最为广泛的标量场可视化方法，该方法的核心是建立一张以标量数值作为索引的颜色对照表，将每一标量数值与一种颜色相对应，并用所对应的颜色绘制标量数据。合理的颜色映射将能够非常直观地反映标量场的特征。

由于空间数据的采集不可能覆盖到标量场中的每一点，因此通常采用空间插值算法将有限的几个点的数据快速扩展到所关注的整个空间范围，从而使得二维平面上所关注范围内的每一点均有对应的值和颜色。常见的空间插值算法包括距离倒数乘方法、克里金法、最小曲率法、谢别德法等。

目前，SVG作为一种基于XML（eXtensibleMarkupLanguage，可扩展标记语言）、扩展性较强的可缩放矢量图形格式，在互联网、图形、可视化展示等领域的应用越来越广泛。SVG支持矩形、多边形、圆形、线条、路径等基本几何形状的绘制与组合，以及渐变、滤镜、遮罩、动画、人机交互等高级功能。SVG与传统图形格式相比的突出优势在于支持脚本代码以及DOM（DocumentObjectModel，文档对象模型，一种处理XML的标准编程接口），因此用户能够按照DOM接口标准访问SVG文档中的各类图形元素，并能够动态改变各元素的属性、添加简单或复杂的动画，或者添加鼠标、键盘交互事件的响应方法。

SVG优异的自身特性为二维空间数据的动态展示提供极好的支持。SVG是矢量图形，可灵活调整可视化的精细程度；支持遮罩，可按照自定义的轮廓对二维空间进行裁剪，从而只展示所关注空间范围内的数据；支持DOM接口动态访问，可以通过程序控制动态展现空间数据随时间变化的过程。然而，目前仍未有在SVG中利用颜色映射技术对空间数据进行动态展示的案例，SVG的优异特性以及快速开发、扩展性强的优势并未得到充分利用。

发明内容

本发明旨在至少在一定程度上解决上述技术问题之一或至少提供一种有用的商业选择。为此，本发明的目的在于充分利用SVG图形格式的优异特性，提供一种在SVG中利用颜色映射技术动态展示二维空间数据的方法。

根据本发明的在SVG中利用颜色映射技术动态展示二维空间数据的方法，包括步骤：S1.采用DOM编程接口访问SVG文档，在文档最上层新建一个g元素作为空白画布；S2.若所关注的空间范围不是整个SVG平面，则在defs层中根据所关注的空间轮廓新建裁剪路径，并将其作为遮罩应用于画布；S3.确定关注范围轮廓的外接矩形的坐标与宽高，设定横向与纵向的网格间距参数，计算关注空间范围内各个网格矩形的坐标与宽高；S4.采集二维空间上N个点第t个周期的标量数据；S5.利用空间插值算法计算各个网格矩形中心点的标量值；S6.利用颜色映射技术，将各个网格矩形中心点的标量值映射为特定的颜色；S7.若t＝1，则在画布上依次创建每一个网格矩形，填充标量值对应的颜色，并添加交互事件响应；若t＞1，则依次将每一个网格矩形的填充色改变为当前标量值所对应的颜色；以及S8.若存在待展示周期，令t=t+1，返回S4继续展示下一周期数据。

本发明充分利用了SVG图形格式矢量化、支持遮罩、支持DOM编程接口的特性，在新建画布上通过空间插值算法、颜色映射技术对二维时变标量场的空间数据进行动态展示。按照本发明所提供的方法，可以在具备DOM接口函数与SVG渲染器的编程语言平台（如Java、C++）上快速开发出用于动态展示二维空间数据的可视化界面，并支持交互事件。此方法可嵌入B/S或C/S软件系统之中，在本地应用或网络应用中均可实施，适用于诸多工业、科研领域。该方法的开发难度小、开发效率高，具有很强的实用性。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1是本发明实施例的一种在SVG中利用颜色映射技术动态展示二维空间数据的方法的流程图。

具体实施方式

下面结合附图及实施方式对本发明作进一步详细的说明。应当理解，此处所描述的具体实施方式可用以解释本发明，但并不限定本发明。

本发明基于SVG图形格式，提供了在SVG中利用颜色映射技术动态展示空间数据的方法，如图1所示，本发明的具体实施方式包括如下步骤：

S1.采用DOM编程接口访问SVG文档，在文档最上层新建一个g元素作为空白画布。

采用SVG渲染器打开SVG文档后，调用DOM函数在文档最上层（即在SVG文档最后）新建一个g元素canvas。Java示例代码如下：

S2.若所关注的空间范围不是整个SVG平面，则在defs层中根据所关注的空间轮廓新建裁剪路径，并将其作为遮罩应用于画布。

若所关注的空间范围是整个SVG平面，无需添加遮罩，可跳过此步骤。

所关注的空间轮廓构成Point对象数组，在defs层中新建裁剪路径clipPath的Java示例代码如下：

将裁剪路径clipPath作为遮罩应用于画布canvas，Java示例代码如下：

S3.确定关注范围轮廓的外接矩形的坐标与宽高，设定横向与纵向的网格间距参数，计算关注空间范围内各个网格矩形的坐标与宽高。

根据关注范围轮廓的各点坐标，容易确定外接矩形的左上角顶点坐标(x₀,y₀)与宽width、高height。设定横向网格间距Δx与纵向网格间距Δy，则外接矩形被分割为(width/Δx)×(height/Δy)的网格。依次计算各网格矩形的左上角顶点坐标与宽高，所有网格矩形的宽均为Δx、高均为Δy，第i列j行的网格矩形左上角顶点坐标为：

(x_i,y_j)=(x₀+(i-1)Δx,y₀+(j-1)Δy)

Java示例代码如下：

S4.采集二维空间上N个点第t个周期的标量数据：

(x_i,y_i,v_i，t)，i＝1,2,…,N

通过模拟量测或者数据接口取得二维空间中N个点的当前值。

S5.利用空间插值算法计算各个网格矩形中心点的标量值。

此步骤可选用任何一种空间插值算法进行计算，例如距离倒数乘方法，其原理为根据已知的N个标量场点，计算某点(x_k,y_k)的标量值如下：

$v_{k,t}=\frac{\underset{i=1}{\overset{N}{\mathrm{\Σ}}}\frac{1}{d_{i,k}^2}\·v_{i,t}}{\underset{i=1}{\overset{N}{\mathrm{\Σ}}}\frac{1}{d_{i,k}^2}}$

其中d_i,k为点i与点k之间的距离，即：

$d_{i,k}^2={(x_i-x_k)}^2+{(y_i-y_k)}^2$

应用距离倒数乘方法计算各网格中心点标量值的Java示例代码如下：

S6.利用颜色映射技术，将各个网格矩形中心点的标量值映射为特定的颜色。

此步骤可按需求建立以标量数值作为索引的颜色对照表。标量值与颜色的映射关系可以是多对一映射，也可以是一对一映射。例如，最简单的连续颜色映射方式是将所有标量值进行标幺化处理，得到[0,1]区间内的标幺值，再通过RGB分量插值生成对应颜色。

通过RGB分量插值生成各网格矩形中心点标量值对应颜色的Java示例代码如下：

S7.若t＝1，则在画布上依次创建每一个网格矩形，填充标量值对应的颜色，并添加交互事件响应；若t＞1，则依次将每一个网格矩形的填充色改变为当前标量值所对应的颜色（对于标量值变化不大的网格可不进行改变以提高刷新速度）。

t＝1时，在画布上依次创建每一个网格矩形，Java示例代码如下：

在创建每一个网格矩形时，可添加交互事件响应函数。例如，对标量值超出正常范围的网格添加点击事件（click），从而在出现异常数据时，可通过点击进一步查看详细信息。

t>1时，依次将每一个网格矩形的填充色改变为当前标量值所对应的颜色，其中对于标量值变化不大的网格可不进行改变，以提高刷新速度。Java示例代码如下：

S8.若存在待展示周期，令t=t+1，返回(4)继续展示下一周期数据。

若存在待展示周期，则返回第(4)步动态展示下一周期二维空间数据，否则程序结束。

至此，本发明所提方法实施完毕。

由以上具体实施步骤可见，本发明提出的在SVG中利用颜色映射技术动态展示空间数据的方法充分利用了SVG图形格式矢量化、支持遮罩、支持DOM编程接口的特性，在新建画布上通过空间插值算法、颜色映射技术对二维时变标量场的空间数据进行动态展示。按照本发明所提供的方法，可以在具备DOM接口函数与SVG渲染器的编程语言平台（如Java、C++）上快速开发出用于动态展示二维空间数据的可视化界面，并支持交互事件。此方法可嵌入B/S或C/S软件系统之中，在本地应用或网络应用中均可实施，适用于诸多工业、科研领域。该方法的开发难度小、开发效率高，具有很强的实用性。

需要强调的是，本方法所提出的实施步骤中的空间插值算法、颜色映射表可以灵活选择和定制，交互事件响应更可按照实际展示需求进行添加，可扩展性强。因此，以上实施步骤仅用以说明而非限制本发明的技术方案。不脱离本发明精神和范围的任何修改或局部替换，均应涵盖在本发明的权利要求范围当中。

需要说明的是，流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在不脱离本发明的原理和宗旨的情况下在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (1)

1.一种在SVG中利用颜色映射技术动态展示二维空间数据的方法，其特征在于，包括以下步骤：

S1.采用DOM编程接口访问SVG文档，在文档最上层新建一个g元素作为空白画布；

S2.若所关注的空间范围不是整个SVG平面，则在defs层中根据所关注的空间轮廓新建裁剪路径，并将其作为遮罩应用于画布，若所关注的空间范围是整个SVG平面，在无需添加遮罩，并跳过所述步骤S2；

S3.确定关注范围轮廓的外接矩形的坐标与宽高，设定横向与纵向的网格间距参数，计算关注空间范围内各个网格矩形的坐标与宽高，其中，第i列j行的网格矩形左上角顶点坐标为：

(x_i,y_j)＝(x₀+(i-1)Δx,y₀+(j-1)Δy)，

其中，(x₀,y₀)为外接矩形的左上角顶点坐标，Δx为横向网格间距，Δy为纵向网格间距，网格矩形的宽为Δx、高均Δy；

S4.采集二维空间上N个点第t个周期的标量数据；

S5.利用空间插值算法计算各个网格矩形中心点的标量值，具体包括：根据已知的N个标量场点，计算某点(x_k,y_k)的标量值如下：

$v_{k,t}=\frac{\underset{i=1}{\overset{N}{\Σ}}\frac{1}{d_{i,k}^2}\·v_{i,t}}{\underset{i=1}{\overset{N}{\Σ}}\frac{1}{d_{i,k}^2}},$

其中d_i,k为点i与点k之间的距离，即：

$d_{i,k}^2={(x_i-x_k)}^2+{(y_i-y_k)}^2;$

S6.利用颜色映射技术，将各个网格矩形中心点的标量值映射为特定的颜色，其中，标量值与颜色的映射关系为多对一映射或是一对一映射；

S7.若t＝1，则在画布上依次创建每一个网格矩形，填充标量值对应的颜色，并添加交互事件响应；若t>1，则依次将每一个网格矩形的填充色改变为当前标量值所对应的颜色，其中对于标量值变化不大的网络不进行改变；以及

S8.若存在待展示周期，令t＝t+1，返回S4继续展示下一周期数据。