OpenLayers图层

Stella981
• 阅读 714
<!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>
        理解基础层和非基础层                                                           
               

Map with one non base layer:

               
           
               

Map with two base layers

               
           
   
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
JS获取表单元素的值
<html<head<metahttpequiv"contenttype"content"text/html;charsetutf8"<title测试</title</head<body<formid"form1"name"form1"文本框
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这