OpenLayers Map理解

最新推荐文章于 2024-04-04 10:34:40 发布

a671933544

最新推荐文章于 2024-04-04 10:34:40 发布

阅读量188

点赞数

原文链接：http://www.cnblogs.com/lanmaoluliu/p/3328637.html

版权

OpenLayers Map理解

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