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

基于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 it’s 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元素上形成电磁态势信息。 　　同样