<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>理解基础层和非基础层</title>
<link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
<script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
//初始化左侧地图
//应用特定DOM元素创建地图
var map_a = new OpenLayers.Map("base_nonbase_map_a");
//添加WMS层
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0",
{
layers: 'basic'
},
{
isBaseLayer: true
});
map_a.addLayer(wms);
// 添加WMS层
var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx",
{
layers: "DRG"
},
{
opacity: 0.5,
isBaseLayer: false
});
map_a.addLayer(topo);
//添加层选择控件
map_a.addControl(new OpenLayers.Control.LayerSwitcher());
//将地图视图范围设置为全图视窗
//注意:如果没有一个基础层,将创建失败
map_a.setCenter(new OpenLayers.LonLat(-100, 40), 5);
//初始化右侧地图
//应用特定DOM元素创建地图
var map_b = new OpenLayers.Map("base_nonbase_map_b");
// 添加WMS层
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://vmap0.tiles.osgeo.org/wms/vmap0",
{
layers: 'basic'
});
map_b.addLayer(wms);
// 添加WMS层
var topo = new OpenLayers.Layer.WMS("USA Topo Maps", "http://terraservice.net/ogcmap.ashx",
{
layers: "DRG"
});
map_b.addLayer(topo);
//添加层选择控件
map_b.addControl(new OpenLayers.Control.LayerSwitcher());
//将地图视图范围设置为全图视窗
//注意:如果没有一个基础层,将创建失败
map_b.setCenter(new OpenLayers.LonLat(-100, 40), 5);
}
</script>
</head>
<body onload="init()">
<table style="width: 100%; height: 95%;">
<tr>
<td>
<p>Map with one non base layer:</p>
<div id="base_nonbase_map_a" style="width: 100%; height: 500px;"></div>
</td>
<td>
<p>Map with two base layers</p>
<div id="base_nonbase_map_b" style="width: 100%; height: 500px;"></div>
</td>
</tr>
</table>
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>
Map with one non base layer: | Map with two base layers |