OpenLayers中layer图层概念和实践
来源:互联网 发布:中山大学网络新ip 编辑:程序博客网 时间:2024/05/18 03:24
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器。例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器。OpenLayers中的每个图层都是独立的,对一个的操作不会影响到另外一个。
不管地图应用的目的是什么,一个有用的地图至少需要有一个图层,至少一个基底图层。其他基底图层之上的图层称之为叠加图层。基底图层和叠加图层是OpenLayers中的两种图层类型。
基底图层
基底图层在图层列表的最下方,其他图层都在其之上。其他图层的顺序可以改变,但是基底图层总是在叠加图层下面。默认情况下,添加到地图的第一个图层被认为是基底图层,然而可以通过设置图层的isBaseLayer为True,使之作为基底图层。有时,也有可能有多个基底图层,但是每次只有一个基底图层是活动的。当一个基底图层打开,其他的基底图层就要关闭。然而叠加图层不这样,打开或关闭一个叠加图层不会影响到其他叠加图层。这就像html中的radio按钮和checkbox,radio同时只能选择一个,而checkbox可以多选。
叠加图层
不是基底图层的图层都称为叠加图层,叠加图层的顺序很重要,每次给地图添加图层,都会放到现有图层的上面。
创建图层
操作图层包括2步:
1.创建图层。
2.将图层添加到地图上。可以使用map.addLayer(layer)添加一个图层,也可以使用map.addLayers([layer1,layer2,…])添加一组图层。
下面来看一下如何创建图层。作为例子,这里创建一个基于WMS的图层,具体方法就是实例化Layer.WMS类,代码如下:
var wms_layer_map = new OpenLayers.Layer.WMS('Base layer','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers:'basic'},{isBaseLayer:true});
OpenLayers.Layer.WMS类
打开如下网址:http://dev.openlayers.org/docs/files/OpenLayers/Layer/WMS-js.html,来看一下OpenLayers.Layer.WMS这个类。
从上面的图可以看到OpenLayers.Layer.WMS的实例用来显示来自OGC网络地图服务的数据,使用OpenLayers.Layer.WMS构造函数创建一个新的WMS图层。下面来看一下OpenLayers.Layer.WMS的构造函数。
参数描述name{String} 图层的名称url{String} 网络地图服务的Url(如:http://wms.jpl.nasa.gov/wms.cgi)params{Object} 包含键值对(key:value)的匿名对象,指定WMS服务器返回地图图像的服务器端配置。options{Object} 键值对匿名对象,指定图层的配置。params对象包括的键值依赖于使用的地图服务。本系列读书笔记只使用部分WMS参数—layers,transparent,srs。通过在请求的URL后面添加SERVICE=WMS和REQUEST=GETCAPABILITIES就可以获得来自WMS服务的所有图层。如下面的URL所示:
http://vmap0.tiles.osgeo.org/wms/vmap0?SERVICE=WMS&REQUEST=GETCAPABILITIES
options对象包含客户端OpenLayers图层对象的属性,这些属性包括:isBaseLayer,opacity和visibility等。因为属性是客户端配置,WMS服务端并不知道它们。通过下面的链接可以找到这些属性:
http://dev.openlayers.org/docs/files/OpenLayers/Layer-js.html
实例一 创建多个图层的地图
<!DOCTYPE html><html><head><meta charset='utf-8' /><title>创建多个图层的地图</title><script src="OpenLayers.js" type="text/javascript"></script><script type="text/javascript">var map;function init(){map = new OpenLayers.Map('map',{});//创建底层地图//layers:'basic'向WMS服务请求basic图层//isBaseLayer:将图层设为底层图层var wms_layer_map = new OpenLayers.Layer.WMS('Base Layer','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers:'basic'},{isBaseLayer:true})//创建叠加图层//layers: 'clabel,ctylabel,statelabel' 向WMS服务请求一些不同的label图层//opacity:1 客户端图层半透明var wms_layer_lables = new OpenLayers.Layer.WMS('Location Lables','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers:'clabel,ctylabel,statelabel',transparent:true},{opacity:1})//添加图层到地图map.addLayers([wms_layer_map,wms_layer_lables]);if(!map.getCenter()){map.zoomToMaxExtent();}}</script></head><body onload="init()"><div id='map' style='width:100%;height:500px;'></div></body></html>
以上代码的解释我都写成了注释。
运行效果如下图所示:
配置opitons参数<!DOCTYPE html> <html lang='zh-cn'> <head> <meta charset='utf-8' /> <title>Layer Test</title> <script type='text/javascript' src='OpenLayers.js'></script> <script type='text/javascript'> var map; function init() { map = new OpenLayers.Map('map_element',{}); var wmsLayerMap = new OpenLayers.Layer.WMS( 'Base layer', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers:'basic'}, {isBaseLayer:true} ); var wmsLayersLabels = new OpenLayers.Layer.WMS( 'Location Labels', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers:'clabel,ctylabel,statelabel', transparent:true}, {visibility:false,opacity:.5} ); var wmsStateLines = new OpenLayers.Layer.WMS( 'State Line Layer', 'http://labs.metacarta.com/wms/vmap0', {layers:'stateboundary', transparent:true}, { minScale:13841995.078125} ); wmsWaterDepth = new OpenLayers.Layer.WMS( 'Water Depth', 'http://labs.metacarta.com/wms/vmap0', {layers:'depthcontour', transparent:true}, {opacity:0.8} ); wmsRoads = new OpenLayers.Layer.WMS( 'Roads', 'http://labs.metacarta.com/wms/vmap0', {layers:'priroad,secroad,rail', transparent:true}, {transistionEffect:'resize'} ); map.addLayers([wmsLayerMap,wmsLayersLabels,wmsStateLines,wmsWaterDepth,wmsRoads]); map.addControl(new OpenLayers.Control.LayerSwitcher({})); if(!map.getCenter()) { map.zoomToMaxExtent(); } } </script> </head> <body onload='init();'> <div id='map_element' style='width:800; height: 600px;'> </div> </body> </html>
运行结果如下图
- OpenLayers中layer图层概念和实践
- Openlayers中layer介绍
- OpenLayers中的图层
- OpenLayers中的图层
- openlayers的layer和Control类
- AD10中plane和layer层的性质
- 图层Layer
- iOS图层layer
- caffe中layer层介绍
- Unity中Layer的概念
- Openlayers学习笔记——Vector Layer Rules和Filter
- openlayers.layer.WMS
- OpenLayers.Layer.Grid
- OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解
- OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解,openlayersvector
- OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解,openlayersvector
- Openlayers如何刷新过滤图层
- openlayers自定义图层控制的实现
- Hadoop矩阵相乘
- 枚举、结构、类
- Unslider – 轻量的响应式 jQuery 内容滑块插件
- 先验与后验概率
- windows下的php、nginx、mysql配置记录和问题汇总
- OpenLayers中layer图层概念和实践
- c++第三次作业
- android面试经典(3)
- cocos2d-JS (四)如何学习
- C#预处理器指令学习
- Java配置环境变量
- 图的数组表示方法
- Codeforces 630R Game
- leetcode Valid Sudoku