<!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. iotop实时监控磁盘io

    介绍 Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦. iotop 是一个用来监视磁盘 I/O 使用状况 ...

  2. Spring_用Spring容器创建对象并给属性赋值

    创建spring配置文件:spring-config.xml.对象的创建和赋值都在这里进行配置. 创建实体类,设置属性 import java.util.List; import java.util. ...

  3. webpack打包css文件

    1. 安装css-loader 与 style-loader npm install style-loader css-loader --save-dev 2. 在webpack.config.js中 ...

  4. visual studio 2013 打开失败 ，报错：未能完成操作，不支持此接口

    因为从新安装了.net 4.0版本,再打开visual studio 2013时,提示报错:未能完成此操作,不支持接口 解决办法:从microsoft官网下载了最新4.5版本进行安装后.即可成功打开.

  5. jeecms系统_自定义对象流程

    库内新增对象Products 的流程说明: 第一步: com.jeecms.cms.entity.assist.base下建立模型基础类,BaseCmsProducts.java com.jeecms ...

  6. vector容量器的应用

    vector容器的应用,感觉最近做的题目还用的挺多 vector与常用数组大部分是相同的,可以进行插入,删除之类的,但是,有些题目,用普通的数组就很容易爆掉,而vector可以动态的根据你所需要的来调 ...

  7. 责任链模式(Chain of Responsibility、Handler)（请求处理建立链）

    (使多个对象都有机会处理请求,从而避免了请求的发送者和接受者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有对象处理它为止.) 从名字中看出 ,系统中将会存在多个有类似处理能力的对 ...

  8. sqoop的数据抽取过程记录

    今天公司抽取了4千万的表大概十几G 用sqoop抽取是30--40分钟 开了两个map.模型是oracle----hdfs(hive).以前只抽过几十万级别,所以千万级别感觉还是spilt做好切分和定 ...

  9. reduce个数问题

    reduce的数目到底和哪些因素有关 1.我们知道map的数量和文件数.文件大小.块大小.以及split大小有关,而reduce的数量跟哪些因素有关呢?  设置mapred.tasktracker.r ...

  10. Luogu P1311 选择客栈(前缀和)

    P1311 选择客栈 题意 题目描述 丽江河边有\(n\)家很有特色的客栈,客栈按照其位置顺序从\(1\)到\(n\)编号.每家客栈都按照某一种色调进行装饰(总共\(k\)种,用整数\(0\)~\(k ...