关闭

OpenLayers Map理解

1190人阅读 评论(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?", {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  

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:192858次
    • 积分:2417
    • 等级:
    • 排名:第15433名
    • 原创:10篇
    • 转载:257篇
    • 译文:0篇
    • 评论:6条
    最新评论