OpenLayers中layer图层概念和实践

最新推荐文章于 2024-08-13 08:54:47 发布

AbbottKilig

最新推荐文章于 2024-08-13 08:54:47 发布

阅读量6.2k

点赞数 2

分类专栏： WebGis&&Geoserver&&OpenLayers 文章标签：地图 gis webgis html

本文链接：https://blog.csdn.net/u010166404/article/details/51108017

版权

WebGis&&Geoserver&&OpenLayers 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

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 οnlοad="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 οnlοad='init();'>  
      <div id='map_element' style='width:800; height: 600px;'>  
      </div>  
  </body>  
  </html>

运行结果如下图