基于HTML5的WebGIS研究-宋婕

GeoJSON 、PNG 等格式 [8]。 PostGIS 是 开 源 的 对 象 关 系 型 数 据 库 ， 是 对 Post鄄 greSQl 的空间扩展 ， 能为 GeoServer 提供开源空间数据
WebGIS 所包含的数据存储到 localStorage ， 便于下次定
位显示用户上次位置 [6]。
绘制矢量图 、 加载栅格图片 、 绘制文本文字或复杂路径 图 ， 由浏览器直接渲染 ， 高效率 ， 能减少对服务器请求 ， 提高网络传输速度 ， 在 WebGIS 中利用 Canvas 实现矢 量数据的可视化可以摆脱对第三方插件的依赖 ， 利用 浏览器原生 API 能够获得更高的效率 。 （1 ） 栅格图像
HTML5 作为 下 一代 HTML 标准正在不 断 地成熟 ，
并 赋予 网页更好的 意义 和结 构 。 得益 于 本 地 存 储 特 性 ， 基 于 HTML5 的 Web App 拥 有更 短 的 启 动时间和更 快 的 联 网速度 ， 能够支持 离 线 Web 应用 。 HTML5 拥 有更高效的服务器推 送 技术 ，
WebStorage 前身为 cookie ， 由 于 cookie 不 适 合 大
量数据的存储， 由每个对服务器的请求传递， 使得
JS 实 现 ，NodeJS 服务器采用 JavaScript 语 言 实 现 ，Web
服务器是 WebGIS 中连接浏览器与地理信息服务器的 重要组件 [7]。 该模型采用 GeoServer 作为 GIS 服务器 ， 负责从空 间数据库中提取相关的空间数据 ， 并将所提取的数据 转 化 为 GeoJSON 格 式 的 文 件 传 递 给 Web 服 务 器 。
关键词 ：
HTML5； WebGIS ； AJAX ； Canvas
1
WebGIS 的主要缺陷及解决途径
WebGIS 是 Web 与 GIS （Geographic Information
一种高并发 、I/O 密集型的 Web 应用 ， 现有的 Web 服务 器端技术并不能很好地满足这些需求 。 当然 ， 目前 WebGIS 所存在的问题远不止以上这 些 ， 只是 上述缺点较为突出 ， 随着技 术 的 发 展 ， 已 经 出 现相关的 解决 方案 。 随着新技术的不 断 进 步 ， 上 文 提 到 的 WebGIS 中 的问题 具备 了 解决 的可能性 。
其中 minLon,minLat,maxLon,maxLat 为 BBOX 数据 ，
2
HTML5 新特性在 WebGIS 中的应用
Canvas [3]， 是 HTML5 提 供 给 浏 览 器 脚 本 语 言 进 行
width,height 为 宽 度和高度 。
若矢量数据图层与底图需要一致， 则公式中
sessionStorage 。 localStorage 方法存储的数据没有时间限制 ， 数据
生命周期比浏览器生命周期长 ， 数据可被同源的每个 窗口或标签页共享 。 在系统中可用作在关闭标签页时
GeoServer 是由 OpenGIS Web 服务器规范的 J2EE 实现
的 Java 程 序 ， 兼 容 OGC 标 准 WMS/WFS 服 务 ， 并 且 支 持 PostgreSQL 、ShapeFile ， 能 够 将 地 图 输 出 为 KML 、
Canvas 对 栅 格 图 像 绘 制 方 法 主 要 为 drawImage (img,x,y,width,height) [4]， 但函数需等图片加载完成后对
其操作 ， 因此将对图像的操作放置在 onload 函数中 ， 一 般绘制过程如下 ：
function mydraw() { var imageObj=new Image();// 生成图片对象 var canvas = document.getElementById('canvas_shijie'); var ctx= canvas.getContext('2d'); // 创建 canvas 上下文 imageObj.src= ”img/url ”; imageObj.onload=function(){ ctx.drawImage(imageObj,0,0); } } // 设置资源路径 // 绘制栅格图片 // 栅格图片绘制函数
WebSocket 技术能够实 现数据 从 服务器推 送到客 户端
的功能 ， 适 合处理长 连接 请求 。 HTML5 增加了新的 图 形图像显示 特性 ， 基于 Canvas 、WebGL 技术 ， 浏览器能 够 直接绘 制矢量 图形 ， 完 全 摆脱 Flash 和 Silverlight 插 件 ， 这 就 为 WebGIS 摆脱第三 方 插 件实现矢量数据的 可视化提 供 了技术基 础 [2]。
摘要 ： 近年来 ， 网络技术的迅速发展 ， 推动着 GIS 在更大范 围内的应用与普及 ，WebGIS 作为网络 GIS 的一种 ， 极大地 促进
GIS 的应用与普及 。 然而由于缺乏有效的支持矢量数据的标准方法 、 没有成熟的地理数据缓存技术等种种因素限制 WebGIS 的 发 展 。 基 于 新 一 代 的 Web 的 标 准 HTML5 新 特 性 Canvas 和 webStorage 、AJAX 技 术 ， 提 出 一 种 新 型 的 WebGIS 实现方案 ，能够有效地改善现有 WebGIS 所存在的缺陷 ，提高 WebGIS 的分析处理能力 。
图 1 Canvas 实现的中 国 地图
（3 ） 路径 在 WebGIS 中 ， 通 常 设计到矢量路径的绘制 ， 使 用
Canvas 标 签 能够 很好 地实现这一 功 能 ，Canvas 标 签 提
供 了 完 善 的路径绘制 API ， 利用 Canvas API 绘制矢量 路径的过程如下 ：
function drawLine(canvasId,point) { // 设置 Canvas 绘图上下文 ctx.beginPath(); // 开启 路径绘制
ctx.moveTo(point[0].x,point[0].y); // 设置路径 起点 for(var i=1;i<point.length,i++) { ctx.lineTo(point[i].x,point[i].y); // 连 接路径 }
…………………………………… . //l 路径样式的设置
储 ， 浏览器刷新会存储数据 ， 关闭浏览器后数据会被删 除 ， 数据只能被创建它的窗口或标签页可用 。 在系统中 主要用作绘制的矢量数据的缓存 。
3
基于 HTML5、NodeJS、Geoserver 的 WebGIS 的模型
针对上文中所提到的 WebGIS 中所存在的问题和
相 应 的 分 析 ， 本 文 提 出 了 基 于 HTML5 、NodeJS 和
WebGIS 主要是采用 B/S 的模式 ， 浏览器负责用户交互
部分， 由服务端负责相关的计算。 当前主要是通过
AJAX 技术来实现服务器与浏览器的数据交互 ， 所有的
请求处理均由 AJAX 传递给服务器等待服务器处理结 果 ，基本摈弃了页面处理能力 。 更重要的是 WebGIS 是
NodeJS 是基于 Chrome V8 引擎 的服务端技术 ， 用
研究与开发
文章编号 ：1007-1423 （2014 ）29-0010-05
DOI：10.3969/j.issn.1007-1423.2014.29.003
基于 HTML5 的 WebGIS 研究
宋婕 1，李宏志 2
（1. 四川大学计算机学院 ， 成都 610065 ； 2. 武汉理工大学软件学院 ， 武汉 430000 ）
cookie 速 度 慢 且 效 率 不 高 ， 在 HTML5 中 ， 数 据 不 是 每
个服务器请求传递的， 只在请求时使用数据， 由此
HTML5 提 供 了 WebStorage API 使 得 页 面 可 存 储 大 量
数据 ， 并且不同网站放置不同区域 ， 每个网站只能访问 自身数据 。 WebStorage 有两种实现方式 ，localStorage 与
ctx.lineWidth="10px"; ctx.stroke();
vas 坐标的转换 [5]， 地理坐标是 X 轴水平向右递增 ，Y 轴
现代计算机
２０14.10 中
趮 趤
研究与开发
ctx.closePath(essionStorage 方 法 针 对 一 个 session 进 行 数 据 存
BBOX 需 取 底 图 BBOX ， 宽 高 也 为 底 图 宽 高 ， 绘 制 的 数
据方 准确 ， 以下是 结合 栅格数据以 及省会 城市的矢量 数据绘制的中 国 地图 ： 图像绘制的一种标记元素 ， 图像绘制操作在脚本语言
( 如 JavaScript) 中实现 ，Canvas 本质上是容器 ， 可以用来
来方 便 地 搭建快 速的 易 于 扩 展的网络应用 。 NodeJS 采
趭 趤
现代计算机
２０14.10 中
研究与开发
用事件驱动机制 ， 非阻塞异步 I/O 模型 ； 事件驱动 机制 是 NodeJS 通 过 内 部 单 线 程 高 效 率 的 维 护 事 件 循 环 队 列来实现的 ， 没有多线程的资源占有和上下文切换 ， 这 意 味 着 面 对 大 规 模 的 HTTP 请 求 ，NodeJS 凭 借 事 件 驱 动能够高效快速地处理 。 NodeJS 适用于高并发 ，I/O 密 集型的 Web 应用 ， 这就为解决 WebGIS 服务端计算瓶 颈提供了可能 。
+ +, ’ ( $%%& ’ (
（2 ） 文本文字
Canvas 文本绘制主要由 fillText(text,x,y,maxwidth) ， strokeText(text,x,y,maxwidth); 两个函数实现 ，操作 Canvas