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對常用的數據結構進行了封裝