1，視口坐標(biāo)的原點(diǎn)在左上角，水平向右為x軸正向，垂直向下為y 軸正向；
2，地圖坐標(biāo)原點(diǎn)為初始圖層的中心點(diǎn)，水平向右為x軸正向，垂直向上為y軸正向；
3，視口中心點(diǎn)永遠(yuǎn)與地圖中心點(diǎn)重合，不一定與瓦片中心點(diǎn)重合；
4，拖動(dòng)圖層的邏輯描述：地圖是不動(dòng)的，視口移動(dòng)從而展示不同的地圖區(qū)域；?
Resolution：解析度 = 地圖尺寸/視口尺寸好比攝像機(jī)，鏡頭拉得越近解析度越小，地圖看得越清晰。?
map.calculateBounds()：地圖當(dāng)前被查看區(qū)域邊界
map.centerLayerContainer():設(shè)置圖層的左和上邊距，保證圖層中心點(diǎn)與地圖中心點(diǎn)重合
map.getCenter()：地圖中心點(diǎn)坐標(biāo)（地圖坐標(biāo)，經(jīng)緯度）
map.getCurrentSize()：取視口尺寸
map.getExtent()：地圖當(dāng)前欲被查看區(qū)域；地圖中心所在區(qū)域（經(jīng)緯度）、視口尺寸乘以解析度
map.getLonLatFromViewPortPx()：視口坐標(biāo)轉(zhuǎn)地圖坐標(biāo)
map.getMaxExtent()：地圖最大可被查看區(qū)域（經(jīng)緯度），視口中心點(diǎn)不可以移出該區(qū)域
map.getResolution()：地圖當(dāng)前解析度
map.getSize()：視口尺寸
map.getViewPortPxFromLonLat()：地圖坐標(biāo)轉(zhuǎn)成視口坐標(biāo)
map.getZoom()：當(dāng)前縮放級(jí)別
map.pan(x軸方向, y軸方向, options)：移動(dòng)地圖map.setCenter(新的地圖中心點(diǎn), 縮放級(jí)別, 拖動(dòng), 強(qiáng)制縮放級(jí)別改變)：重新設(shè)置地圖中心、縮放比例??
openlayers加載過程
map = new OpenLayers.Map('map');
1，?? 創(chuàng)建map對(duì)象，參數(shù)為展示地圖的Dom元素的id
a)??????? 定義tileSize（默認(rèn)256*256）
b)??????? 定義maxExtent（默認(rèn)-180, -90, 180, 90）
c)??????? 定義paddingForPopups（15, 15, 15, 15）
d)??????? 定義theme（默認(rèn)theme/default/style.css）
e)??????? 定義id："OpenLayers.Map_"+序號(hào)
f)??????? 定義div：為展示地圖的Dom元素
g)??????? 定義viewPortDiv：視口Dom元素（id："OpenLayers.Map_"+ 序號(hào) + "_OpenLayers_ViewPort；OVERFLOW： hidden； POSITION： relative；width："100%"；height："100%"；className： "olMapViewport"；），作為div的子元素
h)??????? 定義layerContainerDiv：存放圖層的Dom元素（id："OpenLayers.Map_"+ 序號(hào) + " _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：事件對(duì)應(yīng)的js腳本對(duì)象
?????????????????? ii.????????????? 定義element：響應(yīng)瀏覽器事件的Dom元素
??????????????? iii.????????????? 定義eventTypes：事件類型
?????????????????? iv.????????????? 定義fallThrough：是否穿透（停止事件傳播）
????????????????????? v.????????????? 定義listeners：事件監(jiān)聽者
?????????????????? vi.????????????? 定義eventHandler：定義事件處理者：handleBrowserEvent
??????????????? vii.????????????? 向listeners中注冊(cè)EVENT_TYPES
???????????? viii.????????????? 將BROWSER_EVENTS注冊(cè)到EVENT_TYPES，在Dom元素element上注冊(cè)BROWSER_EVENTS瀏覽器監(jiān)聽事件執(zhí)行 eventHandler，在Dom元素element上注冊(cè)"dragstart"事件執(zhí)行OpenLayers.Event.stop。
BROWSER_EVENTS: ["mouseover", "mouseout","mousedown", "mouseup", "mousemove","click","dblclick","resize", "focus", "blur"]j)??????? updateSize響應(yīng)"movestart"事件；updateSize響應(yīng)"resize"事件；
k)??????? 確保加載theme主題css樣式；
l)??????? 定義layers：圖層；
m)??????? 定義controls：（默認(rèn)：Navigation、PanZoom、ArgParser、Attribution），設(shè)置control內(nèi)部的 map對(duì)象，將controls添加到map中
????????????????????? i.????????????? Navigation：displayClass：olControlNavigation；events：active/deactive；
id：OpenLayers.Control.Navigation_ 序號(hào)；
map：地圖對(duì)象；handlers.click：dblclick；dragPan、 zoomBox；handlers.wheel：MouseWheel；將要監(jiān)聽的事件添加到map的listeners中；
?????????????????? ii.????????????? PanZoom：position：（4，4）；displayClass：olControlPanZoom；events：active/deactive；id：OpenLayers.Control.PanZoom_ 序號(hào)；…；添加到viewPortDiv中；
??????????????? iii.????????????? ArgParser：displayClass：olControlArgParser；events：active/deactive；id：OpenLayers.Control.ArgParser_ 序號(hào)；…；添加到viewPortDiv中；
?????????????????? iv.????????????? Attribution：displayClass：olControlAttribution；events：active/deactive；id：OpenLayers.Control.Attribution_ 序號(hào)；…；添加到viewPortDiv中；
n)??????? unloadDestroy：響應(yīng)瀏覽器卸載事件 var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",??????????????? "
2，?? 創(chuàng)建圖層對(duì)象
a)??????? newArguments：name："OpenLayers WMS", url："b)??????? OpenLayers.Layer.Grid.prototype.initialize： map.addLayers([ol_wms])
3，?? 將圖層加入到地圖中
a)??????? layer.div添加到layerContainerDiv
圖例一
|
window
|
|
DOMMouseScroll
|
Handler.MouseWheel.wheelListener
|
|
mousewheel
|
Handler.MouseWheel.wheelListener
|
|
unload
|
Map.unloadDestroy
|
?
|
document
|
|
mousewheel
|
Handler.MouseWheel.wheelListener
|
?
?
|
Div:
map
Div:
Layer.WMS
|
|
blur
|
Map.handleBrowserEvent
?
|
|
click
|
Map.handleBrowserEvent
?
|
|
dblclick
|
Map.handleBrowserEvent
?
|
|
dragstart
|
OpenLayers.Event.stop
?
|
|
focus
|
Map.handleBrowserEvent
?
|
|
mousedown
|
Map.handleBrowserEvent
?
|
|
mousemove
|
Map.handleBrowserEvent
?
|
|
mouseout
|
Map.handleBrowserEvent
?
|
|
mouseover
|
Map.handleBrowserEvent
?
|
|
mouseup
|
Map.handleBrowserEvent
?
|
|
resize
|
Map.handleBrowserEvent
?
|
?
?
?
|
Div:
OpenLayers_Control_PanZoom_panup
Div:
OpenLayers_Control_PanZoom_panleft
Div:
OpenLayers_Control_PanZoom_panright
Div:
OpenLayers_Control_PanZoom_pandown
Div:
OpenLayers_Control_PanZoom_zoomin
Div:
OpenLayers_Control_PanZoom_zoomworld
Div:
OpenLayers_Control_PanZoom_zoomout
|
|
click
|
Control.PanZoom.doubleClick
|
|
dblclick
|
Control.PanZoom.doubleClick
|
|
mousedown
|
Control.PanZoom.buttonDown
|
?
?
?
圖例
|
Map.events.listeners
|
|
Addlayer
|
Control.Attribution, Control.Attribution.updateAttribution
|
|
addmarker
|
?
|
|
Blur
|
?
|
|
changebaselayer
|
Control.Attribution, Control.Attribution.updateAttribution
|
|
changelayer
|
Control.Attribution, Control.Attribution.updateAttribution
|
|
clearmarkers
|
?
|
|
Click
|
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.click
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.click
?
|
|
Dblclick
|
?
|
|
Drag
|
?
|
|
Dragend
|
?
|
|
dragstart
|
?
|
|
Focus
|
?
|
|
mousedown
|
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.
mousedown
Handler.Click, handler.Click.setEvent
Handler.Click, handler.Click.dblclick
Handler.Click, handler.Click.setEvent
Handler.Click, handler.Click.click
Handler.Click, handler.Click.setEvent
Handler.Click, handler.Click.
mousedown
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.
mousedown
?
|
|
mousemove
|
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.mousemove
Handler.MouseWheel, Handler.MouseWheel.setEven
Handler.MouseWheel, Handler.MouseWheel.mousemove
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.mousemove
?
|
|
Mouseout
|
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.mouseout
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.mouseout
?
|
|
mouseover
|
?
|
|
Mouseup
|
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.mouseup
Handler.Drag, handler.Drag.setEvent
Handler.Drag, handler.Drag.mouseup
?
|
|
Move
|
?
|
|
Moveend
|
?
|
|
movestart
|
Map
,
map.
updateSize
?
|
|
popupclose
|
?
|
|
popupopen
|
?
|
|
preaddlayer
|
?
|
|
removelayer
|
Control.Attribution, Control.Attribution.updateAttribution
|
|
removemarker
|
?
|
|
resize
|
Map
,
map.
updateSize
?
|
|
Zoomend
|
?
|
?
|
Layer.WMS.events.listeners
|
|
blur
|
?
|
|
click
|
?
|
|
dblclick
|
?
|
|
focus
|
?
|
|
loadcancel
|
?
|
|
loadend
|
?
|
|
loadstart
|
?
|
|
mousedown
|
?
|
|
mousemove
|
?
|
|
mouseout
|
?
|
|
mouseover
|
?
|
|
mouseup
|
?
|
|
resize
|
?
|
|
tileloaded
|
?
|
|
visibilitychanged
|
?
|
?
?
?
圖例
|
Control.Navigation.events.listeners
|
|
active
|
?
|
|
deactive
|
?
|
?
|
Control.PanZoom.events.listeners
|
|
active
|
?
|
|
deactive
|
?
|
?
|
Control.ArgParser.events.listeners
|
|
active
|
?
|
|
deactive
|
?
|
?
|
Control.Attribution.events.listeners
|
|
active
|
?
|
|
deactive
|
?
|
?
圖例二
44f2fa42-4b6b-4bba-94ae-b821651e3c3a|0|.0
?