<!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图层的更多相关文章

  1. openlayers图层加标注

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. OpenLayers中的图层

    OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...

  3. OpenLayers中的图层（转载）

    作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法 ...

  4. Openlayers离线载入天地图

    概述: 经过一个春节的休整,今天最终開始了! 任何时候.都不要忘记学习.学习是一辈子的事情!今天,我来说说怎样实现天地图的离线以及Openlayers载入离线数据实现天地图数据的展示. 实现: 1.获 ...

  5. OpenLayers学习笔记（五）— 拖拽Feature图层

    参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...

  6. OpenLayers 3 之 切换图层控件

    OpenLayers 3 之 切换图层控件 openlayers 3中并没有默认的图层切换控件,GitHub中有一个项目实现了我们需要的控件-------- ol3-layerswitcher . 可 ...

  7. openlayers自定义图层控制的实现

    好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...

  8. openlayers筛选图层

    很多时候需要筛选图层,例如选择交互(ol.interaction.Select). 图片来自官方:https://openlayers.org/en/v4.6.5/apidoc/ol.interact ...

  9. OpenLayers在多个矢量图层编辑要素

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

随机推荐

  1. adb环境部署及与模拟器的连接

    1.下载adt-bundle-windows-x64安装包,下载网址https://www.7down.com/soft/293453.html 2.对安装包进行解压缩 3.配置环境变量,将adb的路 ...

  2. wpf之渐变色LinearGradientBrush

    xmal代码: <Grid Name="grid1"> <Grid.Background> <LinearGradientBrush> < ...

  3. mybatis和hibernate的特点

    第一方面:开发速度的对比 就开发速度而言,Hibernate的真正掌握要比Mybatis来得难些.Mybatis框架相对简单很容易上手,但也相对简陋些.个人觉得要用好Mybatis还是首先要先理解好H ...

  4. 初学C#的简单编程题合集(更新)

    一 编写一个控制台应用程序,要求完成下列功能. 1)   接收一个整数 n. 2)   如果接收的值 n 为正数,输出 1 到 n 间的全部整数. 3)   如果接收的值为负值,用 break 或者 ...

  5. 工控安全入门（四）—— DNP3协议

    我们之前看过了法国施耐德的Modbus.德国西门子的S7comm,这次就让我们把目光投到美洲,看看加拿大的HARRIS的DNP3有什么特别之处. 这次选用的流量包部分来自w3h的gitbub: htt ...

  6. https://github.com/ronggang/transmission-web-control

    首先需要保证你的电脑可以链接国际互联网 如果只能链接大型局域网,那么请您带着电脑出国以便于可以顺利安装https://github.com/ronggang/transmission-web-cont ...

  7. VS2010中Cocos2d-x中文乱码问题

    不罗嗦,直接进入主题,VS2010的默认编码是"GB2312",那么以创建一个label为例,当我们使用 CCLabelTTF::create(const char *label, ...

  8. 彭亮—Python学习

    1.1 Python简单介绍 1.2 安装Python和配置环境 1.配置Python      1.1 下载Python(直接去官网下载就可以)      1.2 安装Python(点解默认安装即可 ...

  9. bootstrap--栅格系统布局

    栅格布局使用例子: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  10. js的剪贴板事件

    定义 剪贴板操作包括剪切(cut).复制(copy)和粘贴(paste)这三个操作,快捷键分别是ctrl+x.ctrl+c.ctrl+v.当然也可以使用鼠标右键菜单进行操作 关于这3个操作共对应下列6 ...