OpenLayers
1 OpenLayers简介
OpenLayers是由MetaCarta公司开发的,用于WebGIS客户端的JavaScript包。它实现访问地理空间数据的方法都符合行业标准,比如OpenGIS的WMS和WFS规范,OpenLayers采用纯面向对象的JavaScript方式开发,同时借用了Prototype框架和Rico库的一些组件。采用OpenLayers作为客户端不存在浏览器依赖性。由于OpenLayers采用JavaScript语言实
现,而应用于Web浏览器中的DOM(文档对象模型)由JavaScript实现,同时,Web浏览器(比如IE,FF等)都支持DOM。OpenLayers APIs采用动态类型脚本语言JavaScript编写,实现了类似与Ajax功能的无刷新更新页面,能够带给用户丰富的桌面体验(它本身就有一个Ajax类,用于实现Ajax功能)。 目前,OpenLayers所能够支持的Format有:XML、GML、GeoJSON、GeoRSS、JSON、
KML、WFS、WKT(Well-Known Text)。在OPenlayers.Format名称空间下的各个类里,实现了具体读/写这些Format的解析器。OpenLayers所能够利用的地图数据资源“丰富多彩”,在这方面提供给拥护较多的选择,比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。当然,也可以用简单的图片作为源。
在操作方面,OpenLayers 除了可以在浏览器中帮助开发者实现地图浏览的基本效果,比如放大(Zoom In)、缩小(Zoom Out)、平移(Pan)等常用操作之外,还可以进行选取面、选取线、要素选择、图层叠加等不同的操作,甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充,为其赋予更多的功能。例如,它可以为OpenLayers 添加网络处理服务WPS 的操作接口,从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。同时,在OpenLayers提供的类库当中,它还使用了类库Prototype.js 和Rico 中的部分组件,为地图浏览操作客户端增加Ajax效果。
2 Openlayers基本使用方法
Openlayers是使用Javascript编写的脚本,与网页设计技术密切相关,因此在使用之前需要掌握一定得相关知识,例如html、css、javascript等。编辑工具推荐使用:EditPlus。
1)下载并拷贝源代码即相关文件
到Openlayers官方网站http://www.openlayers.org 下载源代码压缩包,解压后可以看到其中的一些目录和文件。需要拷贝的文件和目录有:根目录下的【OpenLayer.js】文件、根目录下的【lib】目录、根目录下的【img】目录、根目录下的【theme】目录。将这4项内容拷贝到你网站的Scripts目录下(当然,这个只是例子,自己的网站程序目录结构自己说了算,只要保证OpenLayers.js,/lib,/img,/theme在同一目录中即可)。
(注:在以后的使用过程中不可避免的要对原始功能进行扩展、修改,这时候可能要重写一些类和方法,建议重写的和新建的类都写到一个新的js文件中,尽量不要在原始Openlayers.js中进行修改。)
2)在页面中引用JS
创建一个网页作为使用openlayers查看地图的页面,这个页面可以是html静态页面,也可以是jsp、aspx等动态页面,这个根据自己网站的需要选择。在网页的head部分添加对openlayers.js的引用,如下:
......
......
(注:Openlayers.js的路径以自己网站程序的实际路径为准,自己将要编写的代码可以写在本页面,也可以写到一个单独的外部js文件中。测试时js代码写到本页面如上标红的位置即可,后期整理时将页面中的js代码全部整理到外部js文件中)
3)创建地图OpenLayer.Map对象
在要显示的网页中创建一个用于显示地图对象的div,给它起个ID,比如“div_map”。你有必要再写一些CSS限定#div_map的宽度和高度。然后在js代码中编写如下内容:
var map = new OpenLayers.Map('div_map '); (其中的参数“div_map”可以是id,也可以是ElementObject,当然id更加方便一些。另外,在实际应用中,map最好声明成全局变量,便于在其他方法里调用)
4)添加图层显示地图
向地图中添加图层,通常情况下使用OpenLayers.Layer的子类来完成图层的初始化。OpenLayers提供的Layers扩展子类如图:
以WMS为例,实例化图层对象的js如下:
var wms_layer = new OpenLayers.Layer.WMS( \"OpenLayers WMS\
\"http://labs.metacarta.com/wms/vmap0\
map.addLayers(wms_layer);//将layer实例对象添加到map对象中
此处可以简单理解为要以WMS的格式实例化一个图层类,其中的网址为地图服务的路径参数。(若要使用自己的地图服务或本地图片资源,则需要自己构造或重写一个OpenLayers.Layer的子类,并对其中的getUrl方法按既定规则进行重写)
一个map对象可以添加多个layer对象,若希望添加多个layer对象(如:layer1, layer2, layer3),可用多次调用map.addLayers(),也可以以数组方式添加:
5)添加控件
Openlayers定义了很多可以直接使用的控件,这些控件都是Openlayers.Control类的子类。我们可以根据自己的应用需求修改控件的功能或直接自定义自己的控件。控件是通过加载到地图上而起作用的,也算地图表现的一部分。同时,控件需要对地图发生作用,所以每个控件也持有对地图(map对象)的引用。下面给出调用控件的实例代码:
var MyControl = new OpenLayers.Control.LayerSwitcher();// 图层开关 map.addControl( MyControl); (注:以上代码是控件最基本的调用方式,在进行开发时根据需要可能要对控件定义各
种复杂的初始化参数,在没有设置参数时,控件的实例对象会以默认参数形式呈现,顺便说一句,OpenLayers中的控件有些是需要图标的,可以看到,像EditingToolbar;有些是不需要的图标的,当然也看不到,像OpenLayers. Control. DragPan)
6)一个完整的演示代码
创建一个简单的电子地图
3 源代码总体结构分析
如图所示为Openlayers官网API Documentation的索引结构截图,从中我们可以初步了解一下Openlayers面向对象源代码的整体组织结构(一级一级继承)。我们看到在类的顶层“高高在上”的是OpenLayers,它为整个项目实现提供名称空间(JavaScript语言没有名称空间一说,但是它确实有自己的机制实现类似的功能,后面会说明),它直接拥有一常量 VERSION_NUMBER,以标识版本。文档中的类是按字母顺序排列的,以下也按这个顺序进行分析。
Ajax:顾名思义,用于实现Ajax功能,只是OpenLayers的开发者们把它单独写到一个
类里了,其中用到了Prototype.js框架里的一些东西。同时,设计的时候也考虑了跨浏览器的问题。
BaseTypes:这里定制了OpenLayers中用到的string,number 和 function。比如,
OpenLayers. String. startsWith,用于测试一个字符串是否一以另一个字符串开头;OpenLayers. Number. limitSigDigs,用于整数的有效数位;OpenLayers. Function.bind,用于把某一函数绑定于对象等等。
Console:OpenLayers.Console,此名称空间用于调试和把错误等输出到“控制台”上,
需要结合使用../Firebug/firebug.js。 Control:我们通常所说的控件类,它提供各种各样的控件,比如图层开关LayerSwitcher,
编辑工具条EditingToolbar等等。
Events:用于实现OpenLayers的事件机制。具体来说,OpenLayers中的事件分为两
种,一种是浏览器事件,例如mouseup,mousedown之类的;另外一种是自定义的,如addLayer之类的。OpenLayers中的事件机制是非常值得我们学习的,后面将具体讨论。 Feature:我们知道:Feature是geography 和attributes的集合。在OpenLayers中,特别地OpenLayers.Feature 类由一个marker 和一个lonla组成。OpenLayers. Feature.WFS
与OpenLayers. Feature. Vector继承于它。
Format:此类用于读/写各种格式的数据,它的子类都分别创建了各个格式的解析器。
这些格式有:XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text )。 Geometry:是对地理对象的描述。它的子类有Collection、Curve、LinearRing、LineString、
MultiLineString、MultiPoint、MultiPolygon、Point、Polygon、Rectangle、Surface,正是这些类的实例,构成了我们看到的地图。 Handler:这个类用于处理序列事件,可被激活和取消。同时,它也有命名类似于浏
览器事件的方法。当一个handler 被激活,处理事件的方法就会被注册到浏览器listener ,以响应相应的事件;当一个handler被取消,这些方法在事件中也会相应的被取消注册。Handler通过控件control被创建,而control通过icon表现。 Icon:在计算机屏幕上以图标的形式呈现,有url、尺寸size和位置position3个属性。
一般情况,它与 OpenLayers.Marker结合应用,表现为一个Marker。
Layer:图层。
Map:网业中动态地图。它就像容器,可向里面添加图层Layer和控件Control。实际上,
单个Map是毫无意义的,正是Layer和Control成就了它。 Marker:它的实例是OpenLayers.LonLat 和OpenLayers.Icon的集合。通俗一点儿说,
Icon附上一定的经纬度就是Marker。它们的组合关系是:
Popup:地图上一个小巧的层,实现地图“开关”功能。使用例子:
Class = new OpenLayers.Popup(\"chicken\
new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200), \"example popup\ true); map.addPopup(popup);
Renderer:渲染类。在OpenLayers中,渲染功能是作为矢量图层的一个属性存在的,
我们称之为渲染器,矢量图层就是通过这个渲染器提供的方法将矢量数据显示出来。以SVG和VML为例,继承关系是这样的:
Tile:设计这个类用于指明单个“瓦片”Tile,或者更小的分辨率。Tiles存储它们自身的
信息,比如url和size等。它的类继承关系如下:
Util:“跑龙套”的类。