码迷,mamicode.com
首页 > 其他好文 > 详细

OpenLayers图层

时间:2019-07-12 12:39:07      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:asc   link   theme   tab   aci   type   color   选择   ash   

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

OpenLayers图层

标签:asc   link   theme   tab   aci   type   color   选择   ash   

原文地址:https://www.cnblogs.com/Jeely/p/11175313.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!