基于HTML Canvas的电磁态势绘制方法

管英祥　任渊博　向为锋

摘要：该文阐述了一种与地理信息系统（GIS）不相关的在浏览器中绘制电磁态势的原理和方法。以SuperMap iServe Java 6R为例，在B/S模式的浏览器端，使用JavaScript脚本语言，实现了距离反比权值插值算法，得到明确精度的电磁态势栅格数据，按照Canvas 2 D API 规范，在浏览器中客观、形象地绘制出电磁态势。

关键词：地理信息系统；电磁态势；SuperMap；插值；JavaScript canvas

中图分类号：TP391 文献标识码：A 文章编号：1009-3044（2015）14-0068-03

Abstract： An new method and principle for drawing electromagnetism situation in the browser unrelated with the geographic information system（GIS）， is described in this paper. Take example of SuperMap iServe Java 6R， in the browser port of the B/S mode， The inverse distance weighted interpolation method is realized by using the script languge of JavaScript， and the data of the electromagnetism situation grid is achieved， and its precision is specific. Finally， the electromagnetism situation is drawn actually and visually in the browser， according to the Canvas 2 D API criterion.

Key words： geographic； information system； electromagnetism situation； SuperMap； interpolation； JavaScript canvas

随着计算机技术的发展，使用浏览器在地理信息系统中显示电磁态势图得到了广泛的应用。电磁态势图形象直观地显示出指定区域的电磁环境，有助于使用人员了解、分析和判断指定区域内的电磁环境。本文采用B/S模式，以SuperMap iServe Java 6R为例，设计了Java开发环境中在富客户端绘制复杂电磁态势的方法。该方法可以在任何支持B/S模式的地理信息系统中快速、直观的显示出数据的走势和分布情况，为绘制大量栅格数据态势提供了新思路。

在浏览器中，使用JavaScript脚本语言编程，实现了电磁态势栅格数据的插值算法，并生成电磁态势栅格数据，最后按照HTML5标准的canvas规范绘制出某区域的电磁态势。HTML5 Canvas规范定义了二维Canvas（画布）的绘画API，使用这些API使得可以在Web页面上进行立即模式的二维图形绘制[1]。

1 绘制方法研究

现有的绘制电磁态势图的方法主要是在SuperMap地理信息系统的ImageLayer层绘制，本文采用的方法是在浏览器中使用HTML canvas绘制。下面分别介绍了两种绘制方法。

1.1 在ImageLayer层绘制

首先由服务器端的态势计算模型计算出初始电磁态势栅格数据，再由数据插值算法得到指定精度的电磁态势栅格数据，然后将电磁态势栅格数据转换为png格式的图片，最后在浏览器端运行JavaScript脚本，在地理信息系统的ImageLayer层绘制png格式的图片。数据插值算法得到的电磁态势栅格数据的精度为0.1度，每个像素值用4字节表示，那么世界地图范围内生成的png图像的最大为：

（360/0.1）*（180/0.1）*4=25.92MB

1.2使用HTML canvas绘制

HTML Canvas概念最早是由苹果公司提出的，用在Safari 浏览器中，因此基于Gecko1.8 的Firefox和Chrome浏览器也支持这个新元素。通过该元素可以使用JavaScript等脚本语言在浏览器中进行图形绘制。每一个HTML canvas 元素都有一个“上下文（ context ）”，可以通过JavaScript脚本语言调用canvas 元素的API来操作HTML canvas，将栅格数据渲染到HTML canvas元素上形成电磁态势信息。

同样由服务器端的态势计算模型给出初始电磁态势栅格数据，接着将该数据通过网络传输到浏览器端，由浏览器端的JavaScript脚本实现数据插值算法，并按照Canvas 2D API 规范创建电磁态势图像，将创建的图像绘制在Http的canvas 元素内。电磁态势计算模型的计算精度为1字节/度，那么世界地图范围内电磁态势栅格数据最大为：

2 设计与实现

2.1数据准备

通过浏览器端提交给服务器端的经纬度信息和电磁态势计算参数，由布设在服务器端的态势计算模型计算出电磁态势栅格数据，并通过网络回传给浏览器端。本文采用了自定义数据格式发布电磁态势栅格数据，使用JSON（JavaScript Object Notation） 作为电磁态势数据的传输格式。JSON 格式的电磁态势数据以普通的文本形式从服务器端传输到浏览器端，在浏览器中JSON被快速地解析，由JavaScript脚本读取电磁态势栅格数据。

2.2数据插值算法

在服务器端生成的电磁态势栅格数据精度太低，需要在浏览器端做插值计算。使用空间差值方法中的距离反比权值插值方法，可在浏览器端快速生成电磁态势栅格数据集。

距离反比权值插值法是一种典型的数据空间插值算法，通过计算离散点群的平均值计算栅格值，生成电磁态势栅格数据集。它是以插值点与样本点间的距离为权重进行加权平均，离插值点越近的样本点的权重越大[3]。假设已知栅格数据点的坐标为：

2.3软件实现方法

浏览器端接收到电磁态势栅格数据后，调用SuperMap的API接口，将该数据与SuperMap中的经纬度信息相对应，并将HTML Canvas 元素里的屏幕坐标转换成地理坐标，通过canvas的API设定每个屏幕坐标的颜色和透明度即可形成电磁态势图。绘制电磁态势图的软件代码分为服务器端和浏览器端两部分，服务器端代码用Java或C#语言编写，浏览器端可用JavaScript描述语言编写，软件流程如图3所示。

3 结束语

本文将地理信息系统（GIS）融入到了web应用之中，使用HTML Canvas规范，设计和实现了在浏览器端绘制电磁态势的方法。因为绘制电磁态势的方法使用了Canvas 2D API 规范，是在浏览器中完成的绘制，与采用的地理信息系统无关，所以该方法不仅可以在SuperMap地理信息系统中使用，也可以在其他支持B/S模式的地理信息系统中使用。使用该方法相对于使用ImageLayer层绘制的电磁态势更清晰、直观，为电磁态势在B/S模式下的显示提供了一个新的方法。

参考文献：

[1] 北京超图软件股份有限公司. SuperMap iServer Java 从入门到精通[M]. 北京： 清华大学出版社， 2012.

[2] 崔伟， 刘小勇. 基于SuperMap Objects 的等值线绘制方法研究与实现[J]. 测绘与空间地理信息， 2012（9）： 42-44.

[3] W3C Editor's Draft. Canvas 2D API 规范1.0[S]. 2009.

[4] 林建素， 孟康健. Eclipse开发学习笔记[M]. 北京： 电子工业出版社， 2008.

[5] Cay S Horstmann， Gary Cornell. JAVA核心技术卷Ⅰ基础知识[M].叶乃文， 邝劲筠， 杜永萍，译. 北京： 机械工业出版社， 2012.

[6] 鲍尔斯. JavaScript学习指南[M]. 李荣春， 吴兰陟， 甲来安， 译.北京： 人民邮电出版社， 2009.