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
理解OpenLayers
最新推荐文章于 2024-06-18 10:32:53 发布