OpenLayers是一個(gè)開源的js框架，用于在您的瀏覽器中實(shí)現(xiàn)地圖瀏覽的效果和基本的zoom，pan等功能。OpenLayers支持的地圖來(lái)源 包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用簡(jiǎn)單的圖片作為源，在這一方面OPenLayers提供了 非常多的選擇。

要 使用OpenLayers，您可以到它的官方網(wǎng)站http://www.openlayers.org下載他的壓縮包，解壓后可以看到其中的一些目錄和文 件。拷貝dist目錄下的OpenLayer.js、根目錄下的lib目錄、根目錄下的img目錄到你網(wǎng)站的scripts目錄下（當(dāng)然，這個(gè)只是例子， 您網(wǎng)站的目錄結(jié)構(gòu)您自己說(shuō)得算，只要保證OpenLayers.js，/lib，/img在同一目錄中即可）。

接下來(lái)創(chuàng)建一個(gè)index.html作為查看地圖的頁(yè)面。導(dǎo)入OpenLayers.js和你將要?jiǎng)?chuàng)建的js。內(nèi)容需要一個(gè)div，我們給它的id起名叫做area。你有必要在寫一些CSS限定#area的寬度和高度，如果樂意，加上一個(gè)border也是很不錯(cuò)的選擇。

廢話不多說(shuō)，我們首先要?jiǎng)?chuàng)建一個(gè)OpenLayer.Map對(duì)象的實(shí)例:
var map = new OpenLayers.Map("area");
其中的參數(shù)可以傳id，也可以傳ElementObject，當(dāng)然id更加方便一些。

接下來(lái)就是向地圖中添加圖層，通常情況下使用OpenLayers.Layer的子類來(lái)完成圖層的初始化。
OpenLayers提供了一下Layers的擴(kuò)展：

• 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類封裝一個(gè)實(shí)際圖象作為圖曾內(nèi)容
HTTPRequest類可以接收一個(gè)動(dòng)態(tài)生成的圖片，你可以通過(guò)HTTPRequest類的參數(shù)向服務(wù)器發(fā)送參數(shù)
Grid類是HTTPRequest類的子類，提供更加詳細(xì)的方法
WMS類用于連接WMS服務(wù)器以獲得圖象
KaMap類用于連接MapServer
EventPane類作為用于接收用戶操作的圖層
Google類用于從Google獲得圖象，它仍然需要你從Google獲得API KEY，并且include
VirtualEarth類用于操作VirtualEarth的圖層
Markers類用于生成接收和顯示用戶本地標(biāo)記的圖層
Text類用于接收CSV文件
GeoRSS類是Marker類的子類，用于封裝接收GeoRSS并在圖層中作出marker
Boxes同樣也是Marker類的子類，可以用div來(lái)做marker，而非image
TMS用于接收TMS服務(wù)器的地圖

創(chuàng)建完圖層后，可以用Map的addLayer(layer)方法插入，并執(zhí)行Map的zoomToMaxExtent()方法讓地圖合適地顯示。

OpenLayers還提供了豐富的Control類為地圖瀏覽添加一些工具，繼承自O(shè)penLayers.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

這些類的實(shí)例會(huì)在地圖瀏覽的“窗口”上增加一些工具欄或是“按鈕”，增加互動(dòng)性和功能性。

OpenLayers對(duì)常用的數(shù)據(jù)結(jié)構(gòu)進(jìn)行了封裝