基于HTML5的WebGIS的研究与应用

２０１２车第４期

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

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

文献标识码：Ａ

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

徐莎，杨帆，徐昌庆

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

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

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

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

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

ｏｆ

ＷｅｂＧＩＳ

ｂａｓｅｄ

ｏｎ

ＩｒＩＩＭＬ５

ｃａｎｖａｓ

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

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

ａ

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

ｃａｎ

ｉｓｎｅｗ

ｔｅｃｈｎｏｌｏｇｙ

ｂｒｏｕ曲ｔ

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

ｊａｖａｓｃｒｉｐｔ

ｔ０

ｓｂｏｗ

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

ｄｅｖｅｌ叩ｍｅｎｔ

ｏｆＷｅｂ

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

ｐａｐｅｒ

ｕｓｅｓ

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

ｍ础ａ

ｉｓ

ｔｈｅ呐ｎｄ

ｏｆｗｅｂ

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

ｒｅｄｕｃｅｓ出ｅ

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

ａｓ

ｃ柚ｖａｓ七０

ｕｓｅｒｓ

ｅｓｔａｂｌ曲Ｇ璐ｏｆ

山ｅＷｅｂＧＩＳ

ＧＳＭｂａｓｅ

Ｉｔ

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

ｒｅｓｐｏｎｓｅ

ｗｅＵ

ａｓ

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

ｓｏ

ｉｎ

ｃｌｉｅｎｔ．

ｓｕｃｃｅｓ８ｆｕＨｙ

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

ｉｍｐ工｛０ｖｅ８

ｔｌｌｅ

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

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

ｓｔａｔｉｏｎ

０

引言

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

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

持‘２一引。

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

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

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

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

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

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

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

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

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

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

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

ＧＩＳ。

～１４９—

万方数据

ｌＨＴＭＬ５

ｃａｎｖａｓ简介

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

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

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

ｓｅｒｖｅｒ

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

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

ＯＳＸＤａｓｈ—

２００８：数据存储。

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

客户端：

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

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

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

的画布。

＜ｃａｎｖａｓ

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

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

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

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

３．１基站的绘制

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

‘２５６’＞

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

Ｖａｒ

ＣａｎＶａＳ＝

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

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

ｓｅｒｖｅｒ

ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｍＢｙＩｄ（‘ｔｅｓｔ’）；

ｖａｒ

ｃｏｎｔｅｘｔ＝ｃ如ｖａｓ．ｇｅｔＣｏｎｔｅ妣（‘２ｄ’）；

ｃｏｎｔｅｘｔ．矗ｌｌＳｔｙｌｅ＝‘ｒｅｄ’；

２００８数据库中。ｊａｖａｓｃｒｉｐｔ发送ｘＭＬＨｔｔｐＲｅ－

ｃｏｎｔｅｘｔ．ｆｉｌｌＲｅｃｔ（１０，１０，４０，４０）；｝

２

ｑｕｅｓｔ请求，与服务器端建立通信，由服务器提取数据库中的数据，最后封装成ｘＭＬ的格式返回给客户端。

表ｌ显示了浏览器刷新时间随基站数目的变化情况。当页面上只显示１万个基站时，传输的数据量约为１．３ｌＭＢ，刷新时间约为１．８６５ｓ；当页面显示５万个基站时，传输的数据量约为６．５２ＭＢ，刷新时间约为４．２１１ｓ。由表１可以推断，随着传输数据量的均匀增大，浏览器刷新时间是等差递增的。

表１

刷新时间随传输数据量的变化

ｗｅｂＧＩｓ系统架构

本文构建的ｗｅｂＧＩｓ系统主要由三个模块构

成：客户端，ｗｅｂ服务器以及数据库。服务器采用２００８作为数据源，以ｃ＃为程序设计语言

来实现服务器端对客户端的各种操作的反应；由于

ＳＱＬ

ｓｅｗｅｒ

ＩＥ不支持＜ｃａｎｖａｓ＞标签，所以客户端采用谷歌ｃｈｒｏｍｅ浏览器作为图形浏览实现的平台，无需专门开发其他的可视化界面，如图１所示。

客户端Ｃｈｒｏｍｅ浏览器

脚请求¨羹蟹

ｗ｜ｅｂ服务器

ＩＩＳ

６．Ｏ

据

曙请求ｌＩ返回有用

数据库ＳＱＬＳｅｒｖｅｒ

图１

２００８

３．２基站标签及小区包络的显示

在网络多媒体时代，用户的需求已经不单单是浏览一些静态的网页，而是希望可以更多的参与互动。目前比较流行的Ｗｅｂ地图９００ｄｅｍ印，只提供

ｗｅｂＧｒＳ体系架构

一１５０一

万方数据

了一些简单的操作，如平移，放大，缩小等。由于

户可以获得与桌面软件相似的使用体验¨Ｊ。

图３是增加了ｇ∞ｇｋｍａｐ底图的ｗｅｂ地理信息系统，结合了基站信息矢量图层和ｃ００９ｌｅｍａｐ栅格图层，提供了大量基站相关信息，具有高度的互动性，大大缩短了用户操作响应时间，收到了很好的用户体验效果。

９００ｄｅ嘲ｐ是直接将一组预先准备好的大小固定的

栅格图从地图服务器端下载到浏览器端，所以对地图上的具体位置无法提供更多的信息，满足不了用户日益增长的砒Ａ需求。

用ｃ眦ｖａｓ画布，结合Ｊａｖ黔ｃｒｉｐｔ脚本语言绘制的矢量地图可以对地图上的具体位置提供更多的描述信息，具有高度的互动性，丰富用户体验。

小区包络用来描述一个ＧＳＭ基站的信号覆盖范围及服务区域，采用著名的Ｆ０ｒｎｌｎｅ’ｓＶｏｒｏｎｏｉ算法，可以得到描述基站包络的多边形数据。直接在

浏览器端使用Ｊａｖａｓｅ却ｔ实现该算法，并运用得出的

数据在ｃ舳ｖ鹊中绘制多边形包络，可以缩短响应时间。图２显示了当用户点击地图上某基站时显示的描述基站信息的标签，为了清晰起见，暂时没有增加

鲫ｇＩｅ啪ｐ底图。

图３添加伊ｏｄｅｍ叩的基站ＷｅｂＧｌＳ

４

结束语

本文运用ＨＴＭ【５

ｃ删新技术构建了ＧｓＭ基

站地理信息系统，在ｗｅｂＧＩＳ客户端进行地理信息的展示和交互。将矢量图层和栅格图层有效地结合起来，通过与用户交互，提供大量地理信息，同时有效地缩短了浏览器响应时问，改进了用户体验。参考文献：

［１］房体盈．基于Ｊａ让ｓｃｄｐｔ技术的ｗ曲Ｇ玛设计与实现［Ｄ】．大连理

工大学，瑚８．

图２基于ｃ蜘ｖ聃的ＷｃｂＧ璐矢量地图

［２］吴磊．张福庆．基于Ⅲ嗍ＬｃⅢｍ的ｗｅｂａｓ客户靖技术研

３．３增加９００９１ｅｍ印底图

究［Ｊ］．地理信息世界，２唧，７（３）：７８—８２．

［３］栾绍鹏，朱长青．＾ｊ“在ＷｅｂＧｌｓ中的应用研究［Ｊ］．澍绘科学，

２０ａ７。３２（５）：１５８—１∞．

ｃ删鹊标签既可以用于绘制自己的图形，也可

以直接载人外部图像，用作图片合成或者制作背景等。图片来源不是简单的ｕＲＬ路径，而是一个Ｊａｖａｓｃ咖ｔ的Ｉ删唔ｅ对象引用；然后用ｄｒ洲ＩＩｎａｇｅ方法将图像插入到ｃ蚰ｖ鹊中。

［４］弛洒‰ｅ瑚幽．Ｅ词ｕ砒ｉ嘲ｑｆ砌ｍＬ５

ｐＫｅｄ蹦∞％。２０ｌＯ．

ｔｈｅ砒

Ｍ哪ｉｎｇｃｌｉ眦０ｐ百ＩＩ丑ｙ啪［Ｄ］。“蛐ｌｌａｌｌ胁ｕｎｉ删ｔｙ。ｆ峥

ｆｏｒｉ协ｕ∞ｉＩＩ

［５】Ｍ＾葶ｅｄＮＫ髓越Ｂ∞ｌ帼。Ｊ击Ｉ呵’Ｆ们瓠，Ｊｉ蜘ｙ丑Ｇ∞ｇ，Ｐ衄ｇＹ呻．

ａ胡傩ｏｌＩｌｉ∞ｍａｐｐｉ嵋［Ｊ］．ｈＩｔ哪ｌ硝ｏｎａｌ如ｍ■０ｆ

开放式地图服务应用程序接口一Ｇ咄Ｍ印ｓ

ｃｏ时ｅ公司于２００５年发布了用于二次开发的

ＡＰＩ，

Ｗ曲∞ｉ．Ｉ刚∞Ⅷ：踟心衄ｄｔｌＩｅ伽啪ｄ姗硎ｋｉ姗

Ｈ瞳ｌｔｌｌＧｅＤ－

至今已经发展到第３版。基于Ｇ００９ｌｅＭ印ｓＡＰＩ，通过Ｊａｖ鹪ｃ矗ｐｔ语言将功能强大的Ｇｏｏｇｌｅ地图服务潜入到自己的ｗｅｂＧＩｓ中。ＧｏｏｇｋＭ印ｓＡＰＩ是基于ＮＡｘ的地图应用，所以更新数据无需刷新页面，用

卿Ｉｌｉ啊，加ｌＯ，９：Ａｎ．Ｎｏ．１４．

［６］任民。张兴伟，王志德．等．基于Ｇ伽出№即ＡＨ的烟草种质资源

ｗｅｈＧ玲开发研究【Ｊ］．植物遗传资探学报。２０ＩＯ，ｌｌ（５）：５２２—

５２６．

责任嗣辑：刘新影

万方数据

一１５ｌ一

基于HTML5的WebGIS的研究与应用

作者：作者单位：刊名：英文刊名：年，卷(期)：

徐莎， 杨帆， 徐昌庆， XU Sha， YANG Fan， XU Chang-qing上海交通大学电子工程系,上海,200240信息技术

Information Technology2012(4)

本文链接：/Periodical_xxjs201204045.aspx

本文来源：https://www.bwwdw.com/article/n7ae.html