599
Openlayers中layer介紹
1.base layers & overlay layers
base layer:最底層的layer，其他的圖層是在他之上，最先加入的圖層默認作為base layer.
overlay layer:不是base layer的layer就是overlay layer
2.使用layer的步驟：
- 創建layer
- 把layer添加到Map中，可以用map.addlayer(layer)或map.addLayers([layer1,layer2,.....]
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<meta charset='utf-8' />
<title>Base 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',
'https://vmap0.tiles.osgeo.org/wms/vmap0',
{layers:'basic'},
{isBaseLayer:true}
);
var wmsLayersLabels = new OpenLayers.Layer.WMS(
'Location Labels',
'https://vmap0.tiles.osgeo.org/wms/vmap0',
{layers:'clabel,ctylabel,statelabel',
transparent:true},
{opacity:.5}
);
map.addLayers([wmsLayerMap,wmsLayersLabels]);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
if(!map.getCenter())
{
map.zoomToMaxExtent();
}
}
</script>
</head>
<body >
<div id='map_element' style='width:800; height: 600px;'>
</div>
</body>
</html>
運行代碼，得到如下結果：
4.Layer.WMS類解析
首先看一下Layer.WMS類的參數：
| 參數 | 描述 |
| name | {string},表示圖層名稱 |
| url | {string}，表示WMS的基地址 |
| params | {object},代表獲取地圖的查詢字符串及參數取值 |
| options | {object},添加在圖層上的其他選項的哈希表 |
Name參數：
Layer.WMS類的第一個參數，表示圖層名稱，string類型。圖層名稱要放在引用裏麵用以代表它是string類型。名稱是自己任意取的。如果在地圖中添加了圖層切換控件，圖層名諱出現在該控件中。記住在引用之後有一個逗號。
URL參數：
代表網絡地圖服務的URL地址
Params參數：
是一個包含鍵：值對的匿名對象（object？）該參數指定服務端的設置，這些設置影響WMS服務器返回的地圖圖像。當Openlayers向地圖服務器發出請求時，這些鍵：值對將會附加到openlayers生成的URL地址之後。
可能的鍵：值對有：
layers:指定WMS服務器需要返回的圖層
transparent:為標注圖層等圖層請求透明的圖片
srs:指定投影類型
Options:
包含客戶端Openlaysers圖層對象的屬性，所有的圖層都具有這些參數，主要有：isBaseLayer,opacity,visibility,由於圖層屬性是客戶端的設置，因此WMS服務器（或其他服務器）不知道這些參數。
5.配置圖層參數示例i：
<!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',
'https://vmap0.tiles.osgeo.org/wms/vmap0',
{layers:'basic'},
{isBaseLayer:true}
);
var wmsLayersLabels = new OpenLayers.Layer.WMS(
'Location Labels',
'https://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',
'https://labs.metacarta.com/wms/vmap0',
{layers:'stateboundary',
transparent:true},
{
minScale:13841995.078125}
);
wmsWaterDepth = new OpenLayers.Layer.WMS(
'Water Depth',
'https://labs.metacarta.com/wms/vmap0',
{layers:'depthcontour',
transparent:true},
{opacity:0.8}
);
wmsRoads = new OpenLayers.Layer.WMS(
'Roads',
'https://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 >
<div id='map_element' style='width:800; height: 600px;'>
</div>
</body>
</html>
程序執行後的結果為：
最後更新：2017-04-03 05:40:10