OpenLayers图层

<!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>

<!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>