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

图例一

图例

  图例