基于HTML5的WebGIS的研究与应用(2)

时间：2025-07-09

ｌＨＴＭＬ５

ｃａｎｖａｓ简介

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

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

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

ｓｅｒｖｅｒ

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

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

ＯＳＸＤａｓｈ—

２００８：数据存储。

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

客户端：

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

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

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

的画布。

＜ｃａｎｖａｓ

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

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

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

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

３．１基站的绘制

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

‘２５６’＞

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

Ｖａｒ

ＣａｎＶａＳ＝

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

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

ｓｅｒｖｅｒ

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

ｖａｒ

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

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

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

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

２

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

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

表１