OpenLayers

OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了非常多的选择。

 

要使用OpenLayers，您可以到它的官方网站http://www.openlayers.org下载他的压缩包，解压后可以看到其中的一些目录和文件。拷贝dist目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的scripts目录下（当然，这个只是例子，您网站的目录结构您自己说得算，只要保证OpenLayers.js，/lib，/img在同一目录中即可）。

 

接下来创建一个index.html作为查看地图的页面。导入OpenLayers.js和你将要创建的js。内容需要一个div，我们给它的id起名叫做area。你有必要在写一些CSS限定#area的宽度和高度，如果乐意，加上一个border也是很不错的选择。

 

废话不多说，我们首先要创建一个OpenLayer.Map对象的实例:

var map = new OpenLayers.Map("area");

其中的参数可以传id，也可以传ElementObject，当然id更加方便一些。

 

接下来就是向地图中添加图层，通常情况下使用OpenLayers.Layer的子类来完成图层的初始化。

OpenLayers提供了一下Layers的扩展：

OpenLayers.Layer.Image

OpenLayers.Layer.HTTPRequest

OpenLayers.Layer.Grid

OpenLayers.Layer.WMS

OpenLayers.Layer.KaMap

OpenLayers.Layer.EventPane

OpenLayers.Layer.Google

OpenLayers.Layer.VirtualEarth

OpenLayers.Layer.Markers

OpenLayers.Layer.Text

OpenLayers.Layer.GeoRSS

OpenLayers.Layer.Boxes

OpenLayers.Layer.TMS

Image类封装一个实际图象作为图曾内容

HTTPRequest类可以接收一个动态生成的图片，你可以通过HTTPRequest类的参数向服务器发送参数

Grid类是HTTPRequest类的子类，提供更加详细的方法

WMS类用于连接WMS服务器以获得图象

KaMap类用于连接MapServer

EventPane类作为用于接收用户操作的图层

Google类用于从Google获得图象，它仍然需要你从Google获得API KEY，并且include

VirtualEarth类用于操作VirtualEarth的图层

Markers类用于生成接收和显示用户本地标记的图层

Text类用于接收CSV文件

GeoRSS类是Marker类的子类，用于封装接收GeoRSS并在图层中作出marker

Boxes同样也是Marker类的子类，可以用div来做marker，而非image

TMS用于接收TMS服务器的地图

 

创建完图层后，可以用Map的addLayer(layer)方法插入，并执行Map的zoomToMaxExtent()方法让地图合适地显示。

 

OpenLayers还提供了丰富的Control类为地图浏览添加一些工具，继承自OpenLayers.Control类

OpenLayers.Control.LayerSwitcher

OpenLayers.Control.MouseDefaults

OpenLayers.Control.MousePosition

OpenLayers.Control.MouseToolbar

OpenLayers.Control.OverviewMap

OpenLayers.Control.PanZoom

OpenLayers.Control.PanZoomBar

OpenLayers.Control.Permalink

OpenLayers.Control.Scale

这些类的实例会在地图浏览的“窗口”上增加一些工具栏或是“按钮”，增加互动性和功能性。

 

OpenLayers对常用的数据结构进行了封装

OpenLayers.LonLat

OpenLayers.Size

OpenLayers.Pixel

OpenLayers.Bounds

以便于操作。

 

此外OpenLayers.Util类可以对图片载入错误时图片框的颜色和图片框中默认的图片进行自定义，这一点是非常方便的。OpenLayers的Ajax类对创建XHR对象的过程进行了封装，可以使用它进行简单的Ajax操作。