OpenLayers二维地图使用教程

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官方网站下载源代码压缩包，解压后可以看到其中的一些目录和文件。需要拷贝的文件和目录有：根目录下的【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代码中编写如下内容：

（其中的参数“div_map”可以是id，也可以是ElementObject，当然id更加方便一些。另外，在实际应用中，map最好声明成全局变量，便于在其他方法里调用）

4）添加图层显示地图

向地图中添加图层，通常情况下使用yer的子类来完成图层的初始化。OpenLayers提供的Layers扩展子类如图：

以WMS 为例，实例化图层对象的js 如下： var wms_layer = new yer.WMS( "OpenLayers WMS",

"/wms/vmap0", {layers: 'basic'} );

map.addLayers(wms_layer);//将layer 实例对象添加到map 对象中

此处可以简单理解为要以WMS 的格式实例化一个图层类，其中的网址为地图服务的路径参数。（若要使用自己的地图服务或本地图片资源，则需要自己构造或重写一个yer 的子类，并对其中的getUrl 方法按既定规则进行重写）

一个map 对象可以添加多个layer 对象，若希望添加多个layer 对象（如：layer1, layer2, layer3），可用多次调用map.addLayers(),也可以以数组方式添加：

5)添加控件

Openlayers 定义了很多可以直接使用的控件，这些控件都是Openlayers.Control

类的子类。我们可以根据自己的应用需求修改控件的功能或直接自定义自己的控件。控件是通过加载到地图上而起作用的，也算地图表现的一部分。同时，控件需要对地图发生作用，所以每个控件也持有对地图（map

对象）的引用。下面给出调用控件的实例代码：

（注：以上代码是控件最基本的调用方式，在进行开发时根据需要可能要对控件定义各