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

摘要

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

主权项

一种在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}{\Sigma }}\frac{1}{d_{i,k}^2}·v_{i,t}}{\underset{i=1}{\overset{N}{\Sigma }}\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继续展示下一周期数据。