OpenLayers系列(2)——多个图层 - bob007abc的专栏 - 博客频道 - CSDN.NET
下面例子包含了多个图层构成，可设置最小显示比例，只有在当地图在缩放的这个最小比例时才显示该图层信息。
多图层的地图由两种图层构成：base layer 和overlay layer 。
Base layer: 任何一个地图中都存在至少一个图层，否则你的应用将呈现空白，我们把最基本的一个图层称为base layer。Base layer不止一种或一个，你可以选择任意一个图层作为应用的base layer，但是任何时候base layer都只能有一个是turn on的，如果程序在打开一个base layer时发现已经存在另一个打开着的base layer，则应用会关掉之前的base layer而使用最近打开的一个。所以base layer在地图中的概念就像是(radio button)一个单选按钮。
Overlay layer: 非base layer的图层统称为overlay layer。应用中可使用并同时打开任何多的overlay layer，你可以使用参数设置该层是否显示。Overlay layer在地图中的概念就像是(checkbox)多选框。
- <!DOCTYPE html>
- <html lang='en'>
- <head>
- <meta charset='utf-8' />
- <title>My OpenLayers Map</title>
- <script type='text/javascript' src='OpenLayers.js'></script>
- <script type='text/javascript'>
- var map;
- function init() {
- map = new OpenLayers.Map('map_element', {});
- var wms_layer_map = new OpenLayers.Layer.WMS(//base layer
- 'Base layer',
- 'http://vmap0.tiles.osgeo.org/wms/vmap0',
- {layers: 'basic'},
- {isBaseLayer: true}
- );
- var wms_layer_labels = new OpenLayers.Layer.WMS(//国家，洲，城市名层
- 'Location Labels',
- 'http://vmap0.tiles.osgeo.org/wms/vmap0',
- {layers: 'clabel,ctylabel,statelabel',
- transparent: true},
- {visibility: false, opacity:0.5}//默认不显示该层(但可以图层切换器中打开)
- );
- var wms_state_lines = new OpenLayers.Layer.WMS(//洲界层
- 'State Line Layer',
- 'http://labs.metacarta.com/wms/vmap0',
- {layers: 'stateboundary',
- transparent: true},
- {displayInLayerSwitcher: false, //设置该层不显示在图层切换器中
- minScale: 13841995.078125}//设置一个最小尺度，只有当地图在缩放时达到这个最小尺度时才显示该图层信息
- );
- var wms_water_depth = new OpenLayers.Layer.WMS(
- 'Water Depth',
- 'http://labs.metacarta.com/wms/vmap0',
- {layers: 'depthcontour',
- transparent: true},
- {opacity:0.8}
- );
- var wms_roads = new OpenLayers.Layer.WMS(
- 'Roads',
- 'http://labs.metacarta.com/wms/vmap0',
- {layers: 'priroad,secroad,rail',
- transparent: true},
- {transistionEffect:'resize'}//让该图层在缩放时呈现重新计算的效果
- );
- map.addLayers([
- wms_layer_map,
- wms_layer_labels,
- wms_state_lines,
- wms_water_depth,
- wms_roads]);
- map.addControl(new OpenLayers.Control.LayerSwitcher({}));
- if(!map.getCenter()){
- map.zoomToMaxExtent();
- }
- }
- </script>
- </head>
- <body onload='init();'>
- <div id='map_element' style='width: 500px; height: 500px;'>
- </div>
- </body>
- </html>
Openlayers 鼠标点击事件不响应注意：（
marker.events.register('mousedown', marker, function(evt) { alert(evt); OpenLayers.Event.stop(evt); });
）
把 map.addLayers([ol_wms, markers, drawlayer]); 改为
map.addLayers([ol_wms, drawlayer, markers]);
即Vector 放在 markers 之前，可能是图层覆盖的原因，要响应的图层，应放在最后；
否则像之前那样，点击的是 drawlayer 图层；