OpenLayers Map理解

偏执的太偏执、 2022-09-18 15:54 189阅读 0赞

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][http_labs.metacarta.com_wms_vmap0]?", \{layers: 'basic'\},                options);  
  
2，   创建图层对象  
  
a)        newArguments：name："OpenLayers WMS", url："[http://labs.metacarta.com/wms/vmap0][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

图例一

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>window </strong></p> </td> 
  </tr> 
  <tr> 
   <td>DOMMouseScroll</td> 
   <td>Handler.MouseWheel.wheelListener</td> 
  </tr> 
  <tr> 
   <td>mousewheel</td> 
   <td>Handler.MouseWheel.wheelListener</td> 
  </tr> 
  <tr> 
   <td>unload</td> 
   <td>Map.unloadDestroy</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>document </strong></p> </td> 
  </tr> 
  <tr> 
   <td>mousewheel</td> 
   <td>Handler.MouseWheel.wheelListener</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong><span style="font-family:'Times New Roman'">Div:</span> <span style="font-family:'Times New Roman'">map</span> </strong></p> <strong><span style="font-family:'Times New Roman'">Div:</span> Layer.WMS </strong> </td> 
  </tr> 
  <tr> 
   <td> <p>blur </p> </td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>click</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>dblclick</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>dragstart </p> </td> 
   <td> <p>OpenLayers.Event.stop </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>mousedown</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>mousemove</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>mouseout</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>mouseover</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>mouseup</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td> <p>Map.handleBrowserEvent </p> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><span style="font-family:'Times New Roman'"><strong>Div: OpenLayers_Control_PanZoom_panup </strong></span></p> <span style="font-size:14px"><span style="font-family:'Times New Roman'"><strong>Div: OpenLayers_Control_PanZoom_panleft</strong> </span></span><span style="font-size:14px"><span style="font-family:'Times New Roman'"><strong>Div: OpenLayers_Control_PanZoom_panright</strong> </span></span><span style="font-size:14px"><span style="font-family:'Times New Roman'"><strong>Div: OpenLayers_Control_PanZoom_pandown</strong> </span></span><span style="font-size:14px"><span style="font-family:'Times New Roman'"><strong>Div: OpenLayers_Control_PanZoom_zoomin</strong> </span></span><span style="font-size:14px"><span style="font-family:'Times New Roman'"><strong>Div: OpenLayers_Control_PanZoom_zoomworld</strong> </span></span><span style="font-size:14px"><span style="font-family:'Times New Roman'"><strong>Div: OpenLayers_Control_PanZoom_zoomout</strong> </span></span></td> 
  </tr> 
  <tr> 
   <td>click</td> 
   <td>Control.PanZoom.doubleClick</td> 
  </tr> 
  <tr> 
   <td>dblclick</td> 
   <td>Control.PanZoom.doubleClick</td> 
  </tr> 
  <tr> 
   <td>mousedown</td> 
   <td>Control.PanZoom.buttonDown</td> 
  </tr> 
 </tbody> 
</table>

图例

<table style="width:595px"> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>Map.events.listeners </strong></p> </td> 
  </tr> 
  <tr> 
   <td>Addlayer</td> 
   <td>Control.Attribution, Control.Attribution.updateAttribution</td> 
  </tr> 
  <tr> 
   <td> <p>addmarker </p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>Blur </p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>changebaselayer</td> 
   <td>Control.Attribution, Control.Attribution.updateAttribution</td> 
  </tr> 
  <tr> 
   <td>changelayer</td> 
   <td>Control.Attribution, Control.Attribution.updateAttribution</td> 
  </tr> 
  <tr> 
   <td>clearmarkers</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>Click </p> </td> 
   <td>Handler.Drag, handler.Drag.setEvent Handler.Drag, handler.Drag.click Handler.Drag, handler.Drag.setEvent Handler.Drag, handler.Drag.click &nbsp;</td> 
  </tr> 
  <tr> 
   <td>Dblclick</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>Drag </p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>Dragend</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>dragstart </p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>Focus </p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>mousedown</td> 
   <td>Handler.Drag, handler.Drag.setEvent <p>Handler.Drag, handler.Drag. <span style="font-family:'Times New Roman'; font-size:14px"> mousedown</span> </p> 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. <span style="font-size:14px"><span style="font-family:'Times New Roman'">mousedown </span></span>Handler.Drag, handler.Drag.setEvent <p>Handler.Drag, handler.Drag. <span style="font-family:'Times New Roman'; font-size:14px"> mousedown</span> </p> &nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>mousemove </p> </td> 
   <td>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 &nbsp;</td> 
  </tr> 
  <tr> 
   <td>Mouseout</td> 
   <td>Handler.Drag, handler.Drag.setEvent Handler.Drag, handler.Drag.mouseout Handler.Drag, handler.Drag.setEvent Handler.Drag, handler.Drag.mouseout &nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>mouseover </p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td> <p>Mouseup </p> </td> 
   <td>Handler.Drag, handler.Drag.setEvent Handler.Drag, handler.Drag.mouseup Handler.Drag, handler.Drag.setEvent Handler.Drag, handler.Drag.mouseup &nbsp;</td> 
  </tr> 
  <tr> 
   <td>Move</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>Moveend</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>movestart</td> 
   <td><span style="font-family:'Times New Roman'; font-size:14px">Map</span> , <span style="font-family:'Times New Roman'; font-size:14px">map.</span> updateSize &nbsp;</td> 
  </tr> 
  <tr> 
   <td>popupclose</td> 
   <td><span style="font-family:'Times New Roman'; font-size:14px">&nbsp;</span></td> 
  </tr> 
  <tr> 
   <td>popupopen</td> 
   <td><span style="font-family:'Times New Roman'; font-size:14px">&nbsp;</span></td> 
  </tr> 
  <tr> 
   <td>preaddlayer</td> 
   <td><span style="font-family:'Times New Roman'; font-size:14px">&nbsp;</span></td> 
  </tr> 
  <tr> 
   <td>removelayer</td> 
   <td> <p>Control.Attribution, Control.Attribution.updateAttribution </p> </td> 
  </tr> 
  <tr> 
   <td>removemarker</td> 
   <td><span style="font-family:'Times New Roman'; font-size:14px">&nbsp;</span></td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td> <p><span style="font-family:'Times New Roman'; font-size:14px">Map</span> , <span style="font-family:'Times New Roman'; font-size:14px"> map.</span> updateSize </p> <span style="font-family:'Times New Roman'; font-size:14px">&nbsp;</span></td> 
  </tr> 
  <tr> 
   <td>Zoomend</td> 
   <td><span style="font-family:'Times New Roman'; font-size:14px">&nbsp;</span></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>Layer.WMS.events.listeners </strong></p> </td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>click</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>dblclick</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>loadcancel</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>loadend</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>loadstart</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>mousedown</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>mousemove</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>mouseout</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>mouseover</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>mouseup</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>tileloaded</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>visibilitychanged</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

图例

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>Control.Navigation.events.listeners </strong></p> </td> 
  </tr> 
  <tr> 
   <td>active</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>deactive</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>Control.PanZoom.events.listeners </strong></p> </td> 
  </tr> 
  <tr> 
   <td>active</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>deactive</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>Control.ArgParser.events.listeners </strong></p> </td> 
  </tr> 
  <tr> 
   <td>active</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>deactive</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="2"> <p><strong>Control.Attribution.events.listeners </strong></p> </td> 
  </tr> 
  <tr> 
   <td>active</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>deactive</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

[http_labs.metacarta.com_wms_vmap0]: http://labs.metacarta.com/wms/vmap0