OpenLayers Map理解

转载 2013年12月05日 15:00:05
  

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  

 

OpenLayers深入浅出(1)----添加地图map

在页面上添加地图,首先要引入相应的OpenLayers的函数库,而后创建地图Map对象,为Map对象添加地图服务后,页面就可以显示地图了。代码如下:     Insert tit...

openlayers 中的一些方法

OpenLayers.Layer:   initialize:创建层Div,注册事件 destroy:注销 clone:克隆当前层 setName:设置层name addOptions:...

Openlayers入门经典例子

openlayers入门经典例子
  • linlzk
  • linlzk
  • 2013年12月11日 15:18
  • 48428

OpenLayers 3 之 地图图层(Layers) 详解

如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层...

Openlayers通过feature获取Layer以及通过点获取线feature

Openlayers虽然提供了很多方法, 一般是从图层(Layer)获取获取元素(feature),或者从元素(Feature)获取坐标(Coordinate)。获取到的一般都是集合。但是想要反着通过...

OpenLayers 学习(五) 根据经纬度用Marker在地图上添加标记

根据经纬度在地图上添加标记 html, body { width: 100%; height: 100%...
  • Stonesk
  • Stonesk
  • 2016年06月09日 00:32
  • 4800

openlayers3添加地图控件

//添加属性控件 map.addControl(new ol.control.Attribution()); //添加鼠标定位控件 map.addControl(new ol.control.M...

Openlayers中热力图的实现

本文讲述结合heatmap.js,在Openlayers中如何实现热力图。

Openlayers中layer介绍

1.base layers & overlay layers base layer:最底层的layer,其他的图层是在他之上,最先加入的图层默认作为base layer. overlay laye...

openlayers-map

  • 2010年10月27日 08:06
  • 7.47MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:OpenLayers Map理解
举报原因:
原因补充:

(最多只允许输入30个字)