Author : BobTian
Source : http://nianming.cnblogs.com/
OpenLayers a plurality of layers of different classes, each of which may be connected to a different map server. For example, can be connected to the WMS map server through Layer.WMS class, you can connect to the Google Maps server by Layer.Google class. OpenLayers in each layer is independent, it does not affect the operation of the one to another.
Whatever the purpose of the map application is a useful map requires at least one layer, at least one substrate layer . Other layers above the base layer called overlay layer . And the base layer are two superimposed layers of OpenLayers layer type.
The base layer
The base layer at the bottom of the list of layers, all other layers on top of it. Other layers may be changed sequentially, but always in the base layer superposed layers below. By default, the first layer added to the map is considered to be the base layer, however, can isBaseLayer set the layer to True, to make it as a base layer. Sometimes, there may be multiple substrate layers, but only one base layer is active. When a substrate layer to open, the other closed base layer is necessary. However draped layers do not, open or close an overlay layer without affecting the other draped layers. It's like radio buttons and checkbox in html, while only choose a radio, and checkbox may be multiple choice.
Superimposed layers
Not the base layer of the layer are called overlay layer, sequentially stacked layers is important, each layer is added to the map, will be placed on top of the existing layer.
Create Layer
Layer 2 operation steps comprising:
1. Create layers.
2. Add a layer to the map. May be added in a single layer map.addLayer (layer), may be used map.addLayers ([layer1, layer2, ...]) to add a set of layers.
The following look at how to create layers. By way of example, this creates a WMS layer based on the specific method is to instantiate Layer.WMS class code is as follows:
1: var wms_layer_map = new OpenLayers.Layer.WMS(
2: 'Base layer',
3: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
4: { layers: 'basic' },
5: { isBaseLayer: true }
6: );
OpenLayers.Layer.WMS类
Open the following URL: http://dev.openlayers.org/docs/files/OpenLayers/Layer/WMS-js.html , look OpenLayers.Layer.WMS this class.
From the above chart you can see an example OpenLayers.Layer.WMS used to display data from the OGC Web Map Service, created with the constructor OpenLayers.Layer.WMS a new WMS layer. Here's a look at the constructor OpenLayers.Layer.WMS.
| parameter | description |
| name | {String} name layers |
| url | {String} Web Map Service Url (eg: http: //wms.jpl.nasa.gov/wms.cgi) |
| params | {Object} value pairs comprising: anonymous object (key value), the server returns the server specifies WMS map image configuration. |
| options | {Object} anonymous key object specified layer configuration. |
params object contains the keys depends on the map service uses. This series of reading notes using only part of the WMS parameters -layers, transparent, srs. By adding SERVICE behind the URL request = WMS and REQUEST = GETCAPABILITIES you can get all the layers from the WMS service. As shown in the following URL:
http://vmap0.tiles.osgeo.org/wms/vmap0?SERVICE=WMS&REQUEST=GETCAPABILITIES
options object layer contains OpenLayers client object attributes comprising: isBaseLayer, opacity, and visibility and the like. Because the property is the client configuration, WMS server does not know them. These properties can be found through the following links:
http://dev.openlayers.org/docs/files/OpenLayers/Layer-js.html
Examples of multiple layers to create a map
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset='utf-8' />
5: < title > to create multiple layers of maps </ title >
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>
Finally run, the effect shown below
The upper right corner is a blue Switcher Control, you can see Location Labels are not displayed, which is in front of the code set visibility: the effect of false. There stateboundary layer does not appear in the Switcher Control, this is because the layer set displayInLayerSwitcher: false. Also out on the map, you can see the boundary lines disappear, this is the role of minScale set, and only up to a certain scale boundary line will be displayed.