console
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset='utf-8' />
5: <title>创建多个图层的地图</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: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
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>