前端开源库推荐-开源WebGIS设计与开发教程

进行前端开发，比较著名的有OpenLayers、OpenScales、WebGL。其中OpenLayers是一个专为WebGIS客户端开发提供的JavaScript类库包，用于实现标准格式发布的地图数据访问。OpenScales算是OpenLayers的ActionScript翻版，对于Flex前端开发来说是一个不错的选择。WebGL可以为HTML5 Canvas提供硬件3D加速渲染。另外，还有ExtMap、Mapbuilder等前端开源库。

图2-9　简单的WebGIS框架

1.OpenLayers

OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件，为客户端的地图浏览操作增加AJAX效果，用于实现标准格式发布的地图数据访问。OpenLayers支持的地图来源包括Google Maps、Yahoo!Maps、Bing Map等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers中进行叠加，在这一方面OpenLayers提供了非常多的选择。

除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers支持Open GIS协会制定的WMS(Web Mapping Service，网络地图服务)和WFS(Web Feature Service，网络要素服务)等网络服务规范，可以通过远程服务的方式，将以OGC服务形式发布的地图数据加载到基于浏览器的OpenLayers客户端中进行显示。

在操作方面，OpenLayers除了可以在浏览器中帮助开发者实现地图浏览的基本效果(图2-10)，如放大(zoom in)、缩小(zoom out)、平移(pan)等常用操作之外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以对已有的OpenLayers操作和数据支持类型进行扩充，为其赋予更多的功能。

2.Leaflet

Leaflet是一个为建设移动设备友好的互动地图，而开发的现代、开源的JavaScript库。它是由Vladimir Agafonkin带领一个专业贡献者团队开发，代码量很小，但具有开发人员开发在线地图的大部分功能，适用于开发中大型在线GIS应用。

Leaflet的设计坚持简便、高性能和可用性好的原则，在所有主要桌面和移动平台能高效运作，在现代浏览器上利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单、可读的源代码。

图2-10　OpenLayers界面演示

Leaflet采用面向对象设计，封装性好，并且提供了很多专业的第三方JavaScript插件来扩展自身的功能，从而满足WebGIS对地图的各种查询、分析、渲染等操作(图2-11)。其核心是Map类，Map是一个地图容器，可以在其中放置地图控件、添加图层、添加标注、添加符号、绑定事件等。Leaflet默认采用“L”作为命名空间，使用类似于jQuery的链式编码结构，代码更加精简，并且可读性强。(www.xing528.com)

图2-11　Leaflet界面演示

3.Cesium

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎(图2-12)。Cesium支持3D、2D、2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和移动端。Cesium有如下3个特点。

图2-12　Cesium界面演示

(1)一个API，三种视图:Cesium支持三维地球(3D)，二维地图(2D)以及2.5D哥伦布视图(2.5D)。

(2)动态地理空间数据的可视化。

(3)高性能和高精度:优化的WebGL，充分利用硬件渲染图形，使用低级别的几何和渲染程序。

4.GISLite

GISLite是基于开源GIS技术(包括MapServer、MapProxy、Leaflet)开发，使用静态网站形式对GIS数据进行发布的应用程序(图2-13)。目的是用于解决发布较多数量的地图时的数据更新、样式修改，以及不同样式组合应用的问题；尽量实现数据源唯一，使用XLSX文件定义样式；主要实现GIS数据图层的发布，但也实现了多源数据发布为单个地图切片，以及多个图层发布为图层分组的功能。

图2-13　GIS Lite演示网站