理解openlayers
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
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lichengxian/archive/2010/05/24/5619126.aspx
转载自：https://blog.csdn.net/dazhi_1314/article/details/5790487
