著者：BobTian
出典：http://nianming.cnblogs.com/
OpenLayersを異なる地図サーバに接続することができるそれぞれが異なるクラスの複数の層。例えば、Layer.WMSクラスを通じてWMSマップサーバに接続することができ、あなたはLayer.GoogleクラスでGoogleマップサーバーに接続することができます。各層のOpenLayersをは独立しており、それは別の操作には影響を与えません。
どのような地図アプリケーションの目的は、有用な地図は、少なくとも一つの層、少なくとも一つ必要とする基材層。呼ばれるベース層の上に他の層オーバーレイ層。ベース層は、OpenLayersを層型の2つのつの重ね合わされた層です。
ベース層
層のリストの一番下にあるベース層、その上に他のすべての層。他の層は順次変更が、常に以下の層を重ね、ベース層であってもよいです。デフォルトでは、マップに追加された最初の層は、ベース層と考えられている、しかし、isBaseLayerは、下地層としてそれを作るために、Trueにレイヤを設定することができます。時々、そこに複数の基板層であるが、唯一つのベースレイヤがアクティブであることができます。基材層が開くようにするとき、他の閉じたベース層が必要です。しかし、ドレープの層は、開かないか、他のドレープ層に影響を与えることなく、オーバーレイ層を閉じます。唯一の無線機を選択しながら、それは、HTMLのラジオボタンやチェックボックスのようなものだ、とチェックボックスは、複数の選択肢かもしれません。
重畳層
層の下地層は、オーバーレイ層、が順次積層された層と呼ばれていないそれぞれの層がマップに追加され、重要であり、既存の層の上に配置されます。
レイヤーを作成します。
備えるレイヤ2つの操作手順：
1.レイヤーを作成します。
2.マップにレイヤを追加します。単層map.addLayer（層）に添加してもよく、層の組を追加するmap.addLayers（[レイヤ1、レイヤ2を、...]）を使用することができます。
レイヤーを作成する方法で、以下の表情。一例として、これは、特定の方法に基づいて、WMS層は次のようにLayer.WMSクラスコードがインスタンス化され作成されます。
1： VARのwms_layer_mapは= 新しいOpenLayers.Layer.WMS（
2： 'ベース層'、
3： 'http://vmap0.tiles.osgeo.org/wms/vmap0'
4：{層：'基本的な'}、
5：{isBaseLayer：真}
6：）。
OpenLayers.Layer.WMS类
以下のURLを開き：http://dev.openlayers.org/docs/files/OpenLayers/Layer/WMS-js.htmlを、OpenLayers.Layer.WMSこのクラスを見て。
上記のグラフからは、コンストラクタOpenLayers.Layer.WMS新しいWMSレイヤを使用して作成OGCのWeb地図サービスからのデータを、表示するために使用される例OpenLayers.Layer.WMSを見ることができます。ここでは、コンストラクタOpenLayers.Layer.WMSを見てです。
| パラメータ | 説明 |
| 名 | {文字列}名層 |
| URL | {文字列}のWebマップサービスのURL（例：のhttp：//wms.jpl.nasa.gov/wms.cgi） |
| params | {}オブジェクトと値のペアであって匿名オブジェクト（キー値）、サーバは、サーバがWMSマップ画像の設定を指定し返します。 |
| オプション | {オブジェクト}匿名鍵オブジェクト指定された層構成。 |
paramsオブジェクトは、マップサービスの用途に依存したキーが含まれています。WMSパラメータ-layers、透明、SRSの一部のみを使用してノートを読んでこの一連の。URL要求= WMSとREQUESTの後ろにサービスを追加することで=は、GetCapabilitiesあなたはWMSサービスからすべての層を得ることができます。以下のURLに示すように：
http://vmap0.tiles.osgeo.org/wms/vmap0?SERVICE=WMS&REQUEST=GETCAPABILITIES
isBaseLayer、不透明度、および可視性など：オプションは、層がOpenLayersをクライアントオブジェクトがあって属性を含むオブジェクト。プロパティは、クライアント構成であるため、WMSサーバはそれらを知っていません。これらのプロパティは、以下のリンクから確認できます。
http://dev.openlayers.org/docs/files/OpenLayers/Layer-js.html
マップを作成するために、複数の層の例
1： <！DOCTYPE HTML >
2： < HTML >
3： < 頭>
4： < メタのcharset = 'UTF-8' />
5： < タイトル>マップの複数の層を作成するための</ タイトル>
6: <script src="OpenLayers.js" type="text/javascript"></script>
7: <script type="text/javascript">
8: var map;
9: function init() {
10: map = new OpenLayers.Map('map', {});
11: //创建基底图层
12: //layers:'basic' 向WMS服务请求basic图层
13: //isBaseLayer: 将图层设为基底图层
14: var wms_layer_map = new OpenLayers.Layer.WMS(
15: 'Base layer',
16: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
17: { layers: 'basic' },
18: { isBaseLayer: true }
19: );
20: //创建叠加图层
21: //layers: 'clabel,ctylabel,statelabel' 向WMS服务请求一些不同的label图层
22: //transparent:true 从服务器返回的地图图像是透明的
23: //opacity:.5 客户端图层半透明
24: var wms_layer_labels = new OpenLayers.Layer.WMS(
25: 'Location Labels',
26: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
27: { layers: 'clabel,ctylabel,statelabel', transparent: true },
28: { opacity: 1 }
29: );
30: //添加图层到地图
31: map.addLayers([wms_layer_map, wms_layer_labels]);
32: if (!map.getCenter()) {
33: map.zoomToMaxExtent();
34: }
35: }
36: </script>
37: </head>
38: <body onload="init()">
39: <div id='map' style='width: 500px; height: 500px;'>
40: </div>
41: </body>
42: </html>
以上代码的解释我都写成了注释。
运行效果如下图所示：
实例2 配置options参数
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta content="charset=utf-8" />
5: <title>配置options参数</title>
6: <script src="OpenLayers.js" type="text/javascript"></script>
7: <script type="text/javascript">
8: //东经120°
9: var lon = 120;
10: //北纬39°
11: var lat = 39;
12: //缩放级别6
13: var zoom = 6;
14: var map;
15: function init() {
16: map = new OpenLayers.Map('map', {});
17: //创建基底图层
18: var wms_layer_map = new OpenLayers.Layer.WMS(
19: "Base layer",
20: "http://vmap0.tiles.osgeo.org/wms/vmap0",
21: { layers: "basic" },
22: { isBaseLayer: true }
23: );
24: //创建Label图层
25: //设置options的visibility:false使图层不显示
26: var wms_layer_labels = new OpenLayers.Layer.WMS(
27: "Location Labels",
28: "http://vmap0.tiles.osgeo.org/wms/vmap0",
29: { layers: "clabel,ctylabel,statelabel", transparent: true },
30: { visibility: false, opacity: .5 }
31: );
32: //创建stateboundary图层
33: //layers:stateboundary 向WMS服务请求stateboundary图层
34: //设置optioins的displayInLayerSwitcher:false使该图层不显示在Switcher Control
35: //minScale表示只有达到一定的缩放比例该图层才会显示
36: var wms_state_lines = new OpenLayers.Layer.WMS(
37: "State Line Layer",
38: "http://labs.metacarta.com/wms/vmap0",
39: { layers: "stateboundary", transparent: true },
40: { displayInLayerSwitcher: false, minScale: 13841995.078125 }
41: );
42: //创建depthcontour图层
43: //设置opacity:.8
44: var wms_water_depth = new OpenLayers.Layer.WMS(
45: "Water Depth",
46: "http://labs.metacarta.com/wms/vmap0",
47: { layers: "depthcontour", transparent: true },
48: { opacity: .8 }
49: );
50: //创建一些road图层,包括一级公路、二级公路和铁路
51: //设置options的transitionEffect: "resize"，使图层放大或缩小时产生调整大小的动画效果
52: var wms_roads = new OpenLayers.Layer.WMS(
53: "Roads",
54: "http://labs.metacarta.com/wms/vmap0",
55: { layers: "priroad,secroad,rail", transparent: true },
56: { transitionEffect: "resize" }
57: );
58: map.addLayers([wms_layer_map, wms_layer_labels, wms_state_lines, wms_water_depth, wms_roads]);
59: //设置地图的中心位置
60: map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
61: //添加Switcher Control
62: map.addControl(new OpenLayers.Control.LayerSwitcher());
63: }
64: </script>
65: </head>
66: <body onload="init()">
67: <div id="map" style="width: 1000px; height: 600px;">
68: </div>
69: </body>
70： </ HTML >
最後に、以下のような効果を実行します
偽の効果：右上隅には、あなたが場所ラベルは、コードセットの可視性の目の前にある、表示されません見ることができ、青色のスイッチャーコントロールです。偽：そこstateboundary層は層がdisplayInLayerSwitcher設定しているため、これは、スイッチャーコントロールに表示されません。また、アウト地図上、あなたは境界線が消えて見ることができ、これはminScaleセットの役割である、とだけ一定規模の境界線まで表示されます。