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

随机推荐

day72test
目录 models模型类路由配置视图配置序列化组件配置基于ModelSerializer类,完成Car资源的单查,群查,单增接口序列化:显示车名,车的颜色,车的价格,车的海报,车的品牌反序 ...
Django项目：CRM(客户关系管理系统)--78--68PerfectCRM实现CRM业务流程(bpm)报名缴费分页
# pagination.py # ————————68PerfectCRM实现CRM业务流程(bpm)报名缴费分页———————— from django.utils.safestring impo ...
jsx简介
react文档笔记 jsx简介 jsx是一种javascript的语法扩展,jsx用来声明React当中的元素. 在jsx中使用表达式 jsx当中的表达式要包含在大括号里.例如2+2,user.fir ...
19-10-23-L-Mor
ZJ一下: 挺好,T2打表差点出规律(最近拿PFGYL硬卡提升自己几乎没有的打表水平) T1竟然……是个××题 T3的Floyd写死了. T1 简单思考会发现……直接全异或起来就AC 话说T1真叫最大 ...
深入浅出 Java Concurrency (1) : J.U.C的整体认识[转]
去年年底有一个Guice的研究计划,可惜由于工作“繁忙”加上实际工作中没有用上导致“无疾而终”,最终只是完成了Guice的初步学习教程,深入的研究没有继续进行下去. 最近一直用的比较多的就是java. ...
spring cloud深入学习(十)-----配置中心和消息总线（配置中心终结版）
如果需要客户端获取到最新的配置信息需要执行refresh,我们可以利用webhook的机制每次提交代码发送请求来刷新客户端,当客户端越来越多的时候,需要每个客户端都执行一遍,这种方案就不太适合了.使用 ...
DSP日志打印 LOG_printf
LOG_printf 依托BIOS环境,需要引用下列头文件: #include <std.h> #include <log.h> 并且,要在.tcf环境中添加一个LOG ...
PHP的cURL扩展库使用详解
在还没有接触curl的时候,相信大家在获取网页内容的时,使用得最多的一个函数就是:file_get_contents(),但是它的可控制性不够灵活,无法处理错误情况,对于各种复杂情况的采集更是显得有点 ...
BZOJ1491:1491: [NOI2007]社交网络
1491: [NOI2007]社交网络 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2204 Solved: 1175[Submit][Status ...
更好用的集群限流功能，Sentinel 发布 v1.4.2
摘要: 感谢 Sentinel 社区的贡献者们 ️ Sentinel 发布 v1.4.2 正式发布,该版本主要变更如下: 特性/功能改进新增 Zuul 1.x 适配模块(sentinel-zuul- ...

OpenLayers图层

OpenLayers图层的更多相关文章

随机推荐

热门专题