開源的OpenLayers架構，很不錯！！！

Using OpenLayers to develop a WebGIS Client
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操作。