OpenLayers Map理解

时间：2024-08-04 13:07:56

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

图例一


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  

相关文章