理解openlayers

1，視口座標的原點在左上角，水平向右爲x軸正向，垂直向下爲y軸正向；
2，地圖座標原點爲初始圖層的中心點，水平向右爲x軸正向，垂直向上爲y軸正向；
3，視口中心點永遠與地圖中心點重合，不一定與瓦片中心點重合；
4，拖動圖層的邏輯描述：地圖是不動的，視口移動從而展示不同的地圖區域；  
Resolution：解析度 = 地圖尺寸/視口尺寸好比攝像機，鏡頭拉得越近解析度越小，地圖看得越清晰。  
map.calculateBounds()：地圖當前被查看區域邊界
map.centerLayerContainer():設置圖層的左和上邊距，保證圖層中心點與地圖中心點重合
map.getCenter()：地圖中心點座標（地圖座標，經緯度）
map.getCurrentSize()：取視口尺寸
map.getExtent()：地圖當前欲被查看區域；地圖中心所在區域（經緯度）、視口尺寸乘以解析度
map.getLonLatFromViewPortPx()：視口座標轉地圖座標
map.getMaxExtent()：地圖最大可被查看區域（經緯度），視口中心點不可以移出該區域
map.getResolution()：地圖當前解析度
map.getSize()：視口尺寸
map.getViewPortPxFromLonLat()：地圖座標轉成視口座標
map.getZoom()：當前縮放級別
map.pan(x軸方向, y軸方向, options)：移動地圖map.setCenter(新的地圖中心點, 縮放級別, 拖動, 強制縮放級別改變)：重新設置地圖中心、縮放比例   
openlayers加載過程
map = new OpenLayers.Map('map');
1，   創建map對象，參數爲展示地圖的Dom元素的id
a)        定義tileSize（默認256*256）
b)        定義maxExtent（默認-180, -90, 180, 90）
c)        定義paddingForPopups（15, 15, 15, 15）
d)        定義theme（默認theme/default/style.css）
e)        定義id："OpenLayers.Map_"+序號
f)        定義div：爲展示地圖的Dom元素
g)        定義viewPortDiv：視口Dom元素（id："OpenLayers.Map_"+ 序號 + "_OpenLayers_ViewPort；OVERFLOW： hidden； POSITION： relative；width："100%"；height："100%"；className： "olMapViewport"；），作爲div的子元素
h)        定義layerContainerDiv：存放圖層的Dom元素（id："OpenLayers.Map_"+ 序號 + " _OpenLayers_Container"；zIndex：this.Z_INDEX_BASE['Popup']-1;），作爲viewPortDiv的子元素。Z_INDEX_BASE: { BaseLayer: 100, Overlay: 325, Popup: 750, Control: 1000 }定義events：object：map；element：div；EVENT_TYPES： [ "preaddlayer", "addlayer", "removelayer", "changelayer", "movestart","move", "moveend", "zoomend", "popupopen", "popupclose", "addmarker", "removemarker", "clearmarkers", "mouseover", "mouseout", "mousemove", "dragstart", "drag", "dragend", "changebaselayer"]
i)        定義events：object： map；element：div； eventTypes：EVENT_TYPES；fallThrough：true 
                     i.              定義object：事件對應的js腳本對象
                   ii.              定義element：響應瀏覽器事件的Dom元素
                iii.              定義eventTypes：事件類型
                   iv.              定義fallThrough：是否穿透（停止事件傳播）
                      v.              定義listeners：事件監聽者
                   vi.              定義eventHandler：定義事件處理者：handleBrowserEvent
                vii.              向listeners中註冊EVENT_TYPES
             viii.              將BROWSER_EVENTS註冊到EVENT_TYPES，在Dom元素element上註冊BROWSER_EVENTS瀏覽器監聽事件執行eventHandler，在Dom元素element上註冊"dragstart"事件執行OpenLayers.Event.stop。BROWSER_EVENTS: ["mouseover", "mouseout","mousedown", "mouseup", "mousemove","click","dblclick","resize", "focus", "blur"]j)        updateSize響應"movestart"事件；updateSize響應"resize"事件；
k)        確保加載theme主題css樣式；
l)        定義layers：圖層；
m)        定義controls：（默認：Navigation、PanZoom、ArgParser、Attribution），設置control內部的map對象，將controls添加到map中
                      i.              Navigation：displayClass：olControlNavigation；events：active/deactive；id：OpenLayers.Control.Navigation_序號；map：地圖對象；handlers.click：dblclick；dragPan、zoomBox；handlers.wheel：MouseWheel；將要監聽的事件添加到map的listeners中；
                   ii.              PanZoom：position：（4，4）；displayClass：olControlPanZoom；events：active/deactive；id：OpenLayers.Control.PanZoom_序號；…；添加到viewPortDiv中；
                iii.              ArgParser：displayClass：olControlArgParser；events：active/deactive；id：OpenLayers.Control.ArgParser_序號；…；添加到viewPortDiv中；
                   iv.              Attribution：displayClass：olControlAttribution；events：active/deactive；id：OpenLayers.Control.Attribution_序號；…；添加到viewPortDiv中；
n)        unloadDestroy：響應瀏覽器卸載事件 var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},                options); 
2，   創建圖層對象
a)        newArguments：name："OpenLayers WMS", url："http://labs.metacarta.com/wms/vmap0?", params：{layers: 'basic'}, options：resolutions: [1.40625,0.703125,0.3515625]；
b)        OpenLayers.Layer.Grid.prototype.initialize： map.addLayers([ol_wms]) 
3，   將圖層加入到地圖中
a)        layer.div添加到layerContainerDiv