基于HTML5的WebGIS的研究与应用.docVIP

基于HTML5的WebGIS的研究与应用

２０１２车第４期

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

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

文献标识码：Ａ

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

徐莎，杨帆，徐昌庆

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

ｌＨＴＭＬ５

ｃａｎｖａｓ简介

详细的效劳器端／客户端软件配置如下：效劳器端：

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

ＩＩＳ６．０：Ｗｅｂ效劳器。ＳＱＬ

ｓｅｒｖｅｒ

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

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

ＯＳＸＤａｓｈ—

２００８：数据存储。

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

客户端：

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

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

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

的画布。

＜ｃａｎｖａｓ

Ｃｈｍｍｅ扫瞄器：供应ｗｅｂＧＩＳ扫瞄效劳。ＪＳ程序：绘图，响应用户操作并与效劳器通信。３

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

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

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

３．１基站的绘制

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

‘２５６’＞

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

Ｖａｒ

ＣａｎＶａＳ＝

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

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

ｓｅｒｖｅｒ

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

ｖａｒ

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

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

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

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

２

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

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

表１

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

ｗｅｂＧＩｓ系统架构

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

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

来实现效劳器端对客户端的各种操作的反响；由于

ＳＱＬ

ｓｅｗｅｒ

ＩＥ不支持＜ｃａｎｖａｓ＞标签，所以客户端采纳谷歌ｃｈｒｏｍｅ扫瞄器作为图