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>

OpenLayers图层的更多相关文章

openlayers图层加标注
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
OpenLayers中的图层（转载）
作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法 ...
Openlayers离线载入天地图
概述: 经过一个春节的休整,今天最终開始了! 任何时候.都不要忘记学习.学习是一辈子的事情!今天,我来说说怎样实现天地图的离线以及Openlayers载入离线数据实现天地图数据的展示. 实现: 1.获 ...
OpenLayers学习笔记（五）— 拖拽Feature图层
参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至作者:狐狸家的鱼本文链接:拖拽Feature图层全部代码 <!DOCTYPE html> <html& ...
OpenLayers 3 之切换图层控件
OpenLayers 3 之切换图层控件 openlayers 3中并没有默认的图层切换控件,GitHub中有一个项目实现了我们需要的控件-------- ol3-layerswitcher . 可 ...
openlayers自定义图层控制的实现
好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...
openlayers筛选图层
很多时候需要筛选图层,例如选择交互(ol.interaction.Select). 图片来自官方:https://openlayers.org/en/v4.6.5/apidoc/ol.interact ...
OpenLayers在多个矢量图层编辑要素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

随机推荐

【牛客挑战赛31D】雷的打字机
题目首先看到这个出现长度至少为\(2\)的回文子串这就等价于不能出现两个连续且相同的字符于是我们用概率生成函数来搞设\(g_i\)表示\(i\)次操作后游戏没有结束的概率,\(f_{i,j}\ ...
使用RequestsCookieJar自动保存并传递cookie
使用python的requests开发爬虫程序的时候,经常需要将之前请求返回的cookie值作为下一个请求的cookie进行调用,比如模拟登录之后的返回的sessionID,就是需要作为后续请求的co ...
js 实现音频播放与暂停
html: <script src="js/jquery-2.1.3.min.js"></script> <div id="soundIco ...
Redis Set ZSet类型的学习
Linux常用命令的缩写含义
命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户rpm:redhat package manager 红帽子打包管 ...
JZOJ5965【NOIP2018提高组D2T2】填数游戏
题目作为NOIP2018的题目,我觉得不需要把题目贴出来了. 大意就是,在一个n∗mn*mn∗m的010101矩阵中,从左上角到右下角的路径中,对于任意的两条,上面的那条小于下面的那条.问满足这样的 ...
O(N)求出1~n逆元
这是一个黑科技. 可以将某些题目硬生生地压到O(N) 不过这求的是1~n的逆元,多了不行-- 结论接下来放式子: inv[i]=(M-M/i)*inv[M%i]%M; 用数学方法来表示: i−1=( ...
autoreleasing的用法介绍：
在c/c++,objective-c内存管理中有一条是:谁分配谁释放. __autoreleasing则可以使对像延迟释放.比如你想传一个未初始化地对像引用到一个方法当中,在此方法中实始化此对像,那么 ...
Intelij Idea 2016破解
在注册时选择License server,输入http://www.iteblog.com/idea/key.php,点击OK
windows2008解决必须使用角色管理工具安装或配置 NET3.5 sp1问题
win2008系统安装网站环境系统的时候常常提示:必须使用角色管理工具安装或配置microsoft.net framework 3.5 sp1 ,导致安装不成功. 原因在于windows2008系统 ...

OpenLayers图层

OpenLayers图层的更多相关文章

随机推荐

热门专题