<!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. fastjson对Date类型的格式化

    @JSONField(format="yyyy-MM-dd HH:mm:ss.SSS") private Date sendMqDate; //MQ发送时间

  2. 11-2-break

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 记录下sparkStream的做法(scala)

    一直用storm做实时流的开发,之前系统学过spark但是一直没做个模版出来用,国庆节有时间准备做个sparkStream的模板用来防止以后公司要用.(功能模拟华为日常需求,db入库hadoop环境) ...

  4. Windows API 25篇 TerminateProcess

    导语:结束一个进程的方法通常有:exit(), ExitProcess, TerminateProcess. 通常一个进程在正常情况下结束的话,系统会调用 ExitProcess函数结束进程,但有时候 ...

  5. [转]C# 委托、事件，lamda表达式

    1. 委托Delegate C#中的Delegate对应于C中的指针,但是又有所不同C中的指针既可以指向方法,又可以指向变量,并且可以进行类型转换, C中的指针实际上就是内存地址变量,他是可以直接操作 ...

  6. LUOGU 9月 月赛

    T1 签到题 传送门 解题思路 将原式化简一下,让n个1变成 (10^n-1)/9 ,然后再移项,变成了高次同余形式,用bsgs求解.交了好几次都是80,后来才被告知要快速乘. 代码 #include ...

  7. springboot核心技术(二)-----自动配置原理、日志

    自动配置原理 配置文件能配置的属性参照 1.自动配置原理: 1).SpringBoot启动的时候加载主配置类,开启了自动配置功能 @EnableAutoConfiguration 2).@Enable ...

  8. spring cloud深入学习(八)-----配置中心svn示例和refresh

    svn版本 同样先示例server端的代码,基本步骤一样. 1.添加依赖 <dependencies> <dependency> <groupId>org.spri ...

  9. JAVA_环境配置

    1:系统环境 windows10 64位 jdk版本:jdk-8u131-windows-x64.exe,下载地址:http://www.oracle.com/technetwork/java/jav ...

  10. --1.plsql中学习job

    --1.plsql中学习job --学习job --建表 create table test_job(para_date date); commit; insert into test_job val ...