基于HTML5的WebGIS的研究与应用

２０１２车第４期

文章编号：１００９—２５５２（２０１２）０４一０１４９一０３

中图分类号：１１Ｐ３９３

文献标识码：Ａ

基于ＨＴＭＬ５的ＷｅｂＧＩＳ的研究与应用

徐莎，杨帆，徐昌庆

（上海交通大学电子工程系，上海２００２４０）

摘要：Ｃａｎｖ船是ＨＴＭＬ５引入的新技术之一，它可以被Ｊａｖａｓｃｒｉｐｔ用来进行图形图像的渲染和矢量绘图操作。从提供静态页面到能动态地处理多媒体信息是ｗｅｂ应用的发展趋势，运用Ｈ’ｒＭＬ５ｃａｎｖａｓ新技术撼建了ＧＳＭ基站地理信息系统，在ＷｅｂＧＩＳ客户端进行地理信息的展示和交互，有效地缩短了浏览器响应时间，改进了用户体验。

关键词：Ｈ７ｒＭ【５；ｃａｎｖａｓ；ＷｅｂＧＩＳ；基站

Ｒ髂ｅａｒｃｈａｎｄａｐｐｌｉｃａｔｉｏｎｏｆ（Ｄｑｐａ咖鼬ｔ

Ａｂｓ打ａｃｔ：Ｃ髓ｖａｓ

ｏｆ

ＷｅｂＧＩＳ

ｂａｓｅｄ

ｏｎ

ＩｒＩＩＭＬ５

ｃａｎｖａｓ

ＸＵＳｈａ，ＹＡＮＧＦａｎ，ＸＵＣｈａｎｇ．ｑｉｎｇ

ＥＩｅｄ咖１ｃＥｎｇｉ嘲血ｇ，Ｓｈ蛐ｇｈａｉ

ａ

Ｊｉａｏｔｏｎｇ啪ｖ啊氓ＳｈａｎｇＩＩａｉ砒４０，Ｃｈｉｎａ）

ｃａｎ

ｉｓｎｅｗ

ｔｅｃｈｎｏｌｏｇｙ

ｂｒｏｕ曲ｔ

ｉｎｂｙＨＴＭｌ５．Ｉｔｂｅｕ∞ｄｂｙ

ｊａｖａｓｃｒｉｐｔ

ｔ０

ｓｂｏｗ

ｐｈｏｔｏｓａｎｄｄ瑚ｗｇｒａｐｈｉｃｓ．Ｔｈｅｄｙｌｌａｍｉｃ

ｄｅｖｅｌ叩ｍｅｎｔ

ｏｆＷｅｂ

ｔｌＩａｔ￡舢ｐｒｏｖｉｄｉｎｇ

ｐａｐｅｒ

ｕｓｅｓ

ｓｔａｔｉｃｗｅｂｐａｇｅｓｔｏｄｅａｌｉｎｇｗｉ山

ｍ础ａ

ｉｓ

ｔｈｅ呐ｎｄ

ｏｆｗｅｂ

ａｐｐｌｉｃａｔｉｏｎ．ｎｅ

ｒｅｄｕｃｅｓ出ｅ

ｔｌｌｅｎｅｗｔｅｃｈｎｏｌ０韶ｏｆＨＩ’ＭＬ５

ａｓ

ｃ柚ｖａｓ七０

ｕｓｅｒｓ

ｅｓｔａｂｌ曲Ｇ璐ｏｆ

山ｅＷｅｂＧＩＳ

ＧＳＭｂａｓｅ

Ｉｔ

ｓ嘶ｏｎｓ，ａｎｄｓｈｏｗｓｇｅｏ舭ｐｈｉｃａｌｉ舶ｎｎａｔｉｏｎ

ｒｅｓｐｏｎｓｅ

ｗｅＵ

ａｓ

ｉｎｔｅｒａｃｔｓ“ｔ１１

ｓｏ

ｉｎ

ｃｌｉｅｎｔ．

ｓｕｃｃｅｓ８ｆｕＨｙ

ｔｉｍｅｏｆｄｌｅｂｒｏｗｓｅｒａｎｄ

ｉｍｐ工｛０ｖｅ８

ｔｌｌｅ

ｅｘｐｅｄｅｎｃｅ《ｕｓｅｒｓ．

Ｋｅｙ啪ｒｄｓ：ＨＴＭ巧；ｃａｎｖａｓ；ＷｅｂＧＩＳ；ｂａｓｅ

ｓｔａｔｉｏｎ

０

引言

ｗｅｂＧＩｓ是在Ｉｎｔｅｍｅｔ或Ｉｍ砌ｅｔ网络环境下一

行起来。而ＶＭＬ除了ＩＥ，其它浏览器都不支

持‘２一引。

种显示和分析处理地理信息的计算机信息系统，它的基本思想就是在互联网上提供地理信息，让用户通过浏览器浏览并获得一个地理信息系统中的数据和功能服务”Ｊ。经过多年发展，ｗｅｂＧＩｓ的系统架构已趋于成熟，通常采用Ｂ／Ｓ结构，即由浏览器、ＧＩＳ服务器、数据库等三部分构成。

客户端是联系用户和ＧＩｓ服务的桥梁，现在比较流行的ｗｅｂＧＩｓ客户端技术有Ｊａｖａ

Ａｐｐｌｅｔ，Ｆ１ａｓｈ，

随着网络的快速发展，越来越多的桌面应用转向Ｗｅｂ平台。人们也希望日益丰富的ｗｅｂ服务能做到简单、高效并具有良好的可交互性。为了适应这种需求，ｗＨ，ＡＴＷＧ（ｗｅｂ超文本应用技术工作

组）于２００４年发起了Ｈｎ心，通过引进了一些新的

标签和ＡＰＩ，大大降低了ｗｅｂ对浏览器插件的依赖

程度。本文主要是通过对ＨＴＭｌ５和ＷｅｂＧＩＳ的研

究，构建基于ｃ髓ｖａｓ新技术的网页ＧＳＭ基站信息系统，由于基站信息的绘制及部分用户操作的响应都是在客户端由Ｊａｖａ８ｃｒｉｐｔ直接完成，无须通过刷新浏览器或者向服务器再发出请求，因此大大缩短了响应时间，改进了用户体验。

收稿日期：２０ｌｌ一１１一∞

ｓＶＧ，ＶＭＬ等。由于ｎａｓｌｌＰｌａｙｅｒ插件在浏览器上得到广泛安装，文件传输小，交互性能良好等特性，使得ｎａｓｈ得到广泛的应用。但ｎａｓｈ是一个相对封闭的技术，与其他开放标准之间没有一个完全融合的方案。而ＪａｙａＡｐｐｌｅｔ在客户端的使用需要安装Ｊａｖａ虚拟机，限制了它的广泛使用。ｓＶＧ的交互性能取决于运行环境的厂家支持程度，最终也没有流

作者简介：徐莎（１９８７一），女，硕士研究生，主要研究方向为ｗｅｂ－

ＧＩＳ。

～１４９—

万方数据

ｌＨＴＭＬ５

ｃａｎｖａｓ简介

具体的服务器端／客户端软件配置如下：服务器端：

ｃ＃：获取数据库数据并与客户端通信。

ＩＩＳ６．０：Ｗｅｂ服务器。ＳＱＬ

ｓｅｒｖｅｒ

＜ｃａｎｖａｓ＞标签是ＨＴＭＬ５引入的新的ＡＰＩ之一，这个元素可以被Ｊａｖａｓｃｒｉｐｔ语言用来进行图形图像的渲染和绘图操作。

＜ｃａｎｖａｓ＞最先在苹果公司的Ｍａｃ

ＯＳＸＤａｓｈ—

２００８：数据存储。

ｂｏａｒｄ上被引人，而后被应用于ｓａｆ蕊。如今大部分

客户端：

浏览器都已经支持，包括Ｆｉｒｅｆｏｘ，Ｓａ觚，ｃｈｒｏｍｅ，０ｐ—

ｅｒａ，Ｉｐｈｏｎｅ，Ａｎｄｍｉｄ等‘４。１，ＩＥ７和ＩＥ８暂且还不支持ｃａＪｌｖａｓ标签。

＜ｃａｎｖａｓ＞标签在被浏览器解析时与其它标签没有什么不同，可以通过ｗｉｄｔ｝ｌ和ｈｅ培ｈｔ属性改变画布大小，ｓ够ｌｅ设置画布风格，例如，在ＨＴＭＬ正文中加入如下标签，可绘制一个长宽分别为５１２和２５６

的画布。

＜ｃａｎｖａｓ

Ｃｈｍｍｅ浏览器：提供ｗｅｂＧＩＳ浏览服务。ＪＳ程序：绘图，响应用户操作并与服务器通信。３

基于ｃ跏ａｓ的ＷｅｂＧＩＳ实现过程分析

本文通过ｗｅｂＣＩＳ实现ＣＳＭ（全球移动通讯系

统）基站信息的显示和查询等功能。对于传统的地理信息系统，图形的显示，用户操作的响应等任务大都由服务器端完成，然后将生成的数据或是图片通过网络发送到浏览器，由于地理信息系统往往涵盖的数据量很大，所以经常造成白屏，等待时间过长等现象，用户体验较差。

３．１基站的绘制

ｉｄ＝‘ｔｅｓｔ’ｗｉｄｔｌｌ＝‘５１２’ｈｅｉｇｈｔ＝

‘２５６’＞

实际的绘图工作由Ｊａｖａｓｃｒｉｐｔ完成，通过调用ｃａｎｖａｓ．ｇｅｔＣｏｎｔｅｘｔ（ｃｏｎｔｅｘⅡｄ）方法可以在画布上进行绘图及图形图像渲染等操作，例如，下面的函数介绍如何在画布上绘制一个矩形。Ｆｕｎｃ石ｏｎ（ｈｗＯｎＣａｎｖａｓ（）｛

Ｖａｒ

ＣａｎＶａＳ＝

实验通过ｃａｎｖａｓ画布，在浏览器端使用Ｊａｖａｓ．ｃｒｉｐｔ绘制矢量类型的基站，基站大小，形状等都可定制。不像ｓＶＧ，ｃａｎｖａｓ只支持一种基本形状——矩形。所以其他形状都是由一个或多个路径组合而成，但是通过一组路径绘制函数，可以绘制相当复杂的形状。如，伽Ｒｅｃｔ（）可绘制矩形，ａｒｃ（）可用于绘制弧形等。

基站的位置，名称，频点等数据存储在ｓＱＬ

ｓｅｒｖｅｒ

ｄｏｃｕｍｅｎｔ．ｇｅ …… 此处隐藏：3203字，全部文档内容请下载后查看。喜欢就下载吧 ……