1.base layers & overlay layers

base layer:最底层的layer，其它的图层是在他之上，最先增加的图层默认作为base layer.

overlay layer:不是base layer的layer就是overlay layer

2.使用layer的步骤：

  1. 创建layer
  2. 把layer加入到Map中，能够用map.addlayer(layer)或map.addLayers([layer1,layer2,.....]

3.例子：创建一个多图层的地图

 <!DOCTYPE html>

<html lang='zh-cn'>

<head>

    <meta charset='utf-8' />

      <title>Base Layer Test</title>

      <script type='text/javascript' src='OpenLayers.js'></script>

      <script type='text/javascript'>

          var map;

          function init() {

				map = new OpenLayers.Map('map_element',{});

              var wmsLayerMap = new OpenLayers.Layer.WMS(

			      'Base layer',

				  'http://vmap0.tiles.osgeo.org/wms/vmap0',

				  {layers:'basic'},

				  {isBaseLayer:true}

				  );

			  var wmsLayersLabels = new OpenLayers.Layer.WMS(

				   'Location Labels',

				   'http://vmap0.tiles.osgeo.org/wms/vmap0',

				   {layers:'clabel,ctylabel,statelabel',

				   transparent:true},

				   {opacity:.5}

				);

				map.addLayers([wmsLayerMap,wmsLayersLabels]);

				map.addControl(new OpenLayers.Control.LayerSwitcher({}));

				if(!map.getCenter())

				{

					map.zoomToMaxExtent();

				}

              }

      </script>

  </head>

  <body onload='init();'>

      <div id='map_element' style='width:800; height: 600px;'>

      </div>

  </body>

  </html>

执行代码。得到例如以下结果：

4.Layer.WMS类解析

首先看一下Layer.WMS类的參数：

參数 描写叙述
name {string},表示图层名称
url {string}，表示WMS的基地址
params {object},代表获取地图的查询字符串及參数取值
options {object},加入在图层上的其它选项的哈希表

Name參数：

Layer.WMS类的第一个參数，表示图层名称。string类型。图层名称要放在引用里面用以代表它是string类型。名称是自己随意取的。

假设在地图中加入了图层切换控件，图层名讳出如今该控件中。记住在引用之后有一个逗号。

URL參数：

代表网络地图服务的URL地址

Params參数：

是一个包括键：值对的匿名对象（object？）该參数指定服务端的设置，这些设置影响WMSserver返回的地图图像。当Openlayers向地图server发出请求时，这些键：值对将会附加到openlayers生成的URL地址之后。

可能的键：值对有：

layers:指定WMSserver须要返回的图层

transparent:为标注图层等图层请求透明的图片

srs:指定投影类型

Options:

包括clientOpenlaysers图层对象的属性，全部的图层都具有这些參数。主要有：isBaseLayer,opacity,visibility,因为图层属性是client的设置，因此WMSserver（或其它server）不知道这些參数。

5.配置图层參数演示样例i：

 <!DOCTYPE html>

<html lang='zh-cn'>

<head>

    <meta charset='utf-8' />

      <title>Layer Test</title>

      <script type='text/javascript' src='OpenLayers.js'></script>

      <script type='text/javascript'>

          var map;

          function init() {

				map = new OpenLayers.Map('map_element',{});

              var wmsLayerMap = new OpenLayers.Layer.WMS(

			      'Base layer',

				  'http://vmap0.tiles.osgeo.org/wms/vmap0',

				  {layers:'basic'},

				  {isBaseLayer:true}

				  );

			  var wmsLayersLabels = new OpenLayers.Layer.WMS(

				   'Location Labels',

				   'http://vmap0.tiles.osgeo.org/wms/vmap0',

				   {layers:'clabel,ctylabel,statelabel',

				   transparent:true},

				   {visibility:false,opacity:.5}

				);

				var wmsStateLines = new OpenLayers.Layer.WMS(

					'State Line Layer',

					'http://labs.metacarta.com/wms/vmap0',

					{layers:'stateboundary',

					transparent:true},

					{

					minScale:13841995.078125}

				);

				wmsWaterDepth = new OpenLayers.Layer.WMS(

					'Water Depth',

					'http://labs.metacarta.com/wms/vmap0',

					{layers:'depthcontour',

					transparent:true},

					{opacity:0.8}

				);

				wmsRoads = new OpenLayers.Layer.WMS(

				'Roads',

				'http://labs.metacarta.com/wms/vmap0',

				{layers:'priroad,secroad,rail',

				transparent:true},

				{transistionEffect:'resize'}

				);

				map.addLayers([wmsLayerMap,wmsLayersLabels,wmsStateLines,wmsWaterDepth,wmsRoads]);

				map.addControl(new OpenLayers.Control.LayerSwitcher({}));

				if(!map.getCenter())

				{

					map.zoomToMaxExtent();

				}

              }

      </script>

  </head>

  <body onload='init();'>

      <div id='map_element' style='width:800; height: 600px;'>

      </div>

  </body>

  </html>

程序运行后的结果为：

Openlayers中layer介绍的更多相关文章

  1. OpenLayers中的Layer概念和实践--Openlayers调用WMS服务

    整理转自:http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b 本章我认为是这本书的真正开端,终于开始讲一些有意思的东西了.. 在这一 ...

  2. OpenLayers中的图层

    OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...

  3. OpenLayers中的图层（转载）

    作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法 ...

  4. openlayers中单击获取要素

    openlayers中单击获取要素 分类专栏: GIS 总结 OpenLayers   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...

  5. POP动画引擎中Layer与CALayer的一点区别

    POP动画引擎是facebook提供的一个开源框架, 可以实现很多的动画效果, 这里就不一一介绍啦, 有兴趣的童鞋请移步: https://github.com/facebook/pop 下面简单的讲 ...

  6. OpenLayers中的球面墨卡托投影

    最近看OpenLayers,研究到地图投影时找到官方的文档,就翻译了一下,由于英文能力差,翻译不好的地方,请看原文 原文地址:http://docs.openlayers.org/library/sp ...

  7. OpenLayers中地图缩放级别的设置方法

    来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述 在OpenLayers中,地图必须具有一个缩放级别的 ...

  8. [BIM]BIM中IDM介绍

    参考:http://blog.fang.com/25866228/10613454/articledetail.htm IDM的全称是Information Delivery Manual,信息交付手 ...

  9. 关于js-binding中Layer触摸事件的优化

    关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...

随机推荐

  1. BZOJ2653 middle 【二分 + 主席树】

    题目 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个 长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右端点在[c ...

  2. 【bzoj5110】Yazid的新生舞会

    这里是 $THUWC$ 选拔时间 模拟赛的时候犯 $SB$ 了,写了所有的部分分,然后直接跑过了 $4$ 个大样例(一个大样例是一个特殊情况)…… 我还以为我非常叼,部分分都写对了,于是就不管了…… ...

  3. MockMvc详解

    ★  MockMvc - SpringMVC单元测试的独立测试: 一.简介 为何使用MockMvc?         对模块进行集成测试时,希望能够通过输入URL对Controller进行测试,如果通 ...

  4. 使用UltraEdit 替换解决---文字中含有逗号的文件，如何把逗号自动转换成为：回车换行呢？

    实际工作中有时经常遇到一个问题: 一行文字中含有逗号,如何把逗号自动转换成为:回车换行呢? 普遍存在的问题,用Ultredit中^r^n(回车换行)也可以完成.提供大家参考. 王乐,李宏宇,张志鹏,刘 ...

  5. 【NOIP2017】逛公园（最短路图，拓扑排序，计数DP）

    题意: 策策同学特别喜欢逛公园. 公园可以看成一张 N 个点 M 条边构成的有向图,且没有自环和重边.其中 1 号点是公园的入口, N 号点是公园的出口,每条边有一个非负权值,代表策策经过这条边所要花 ...

  6. dpkg --add-architecture i386 && apt-get update && > apt-get install wine32

    dpkg --add-architecture i386 && apt-get update &&> apt-get install wine32

  7. AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服 ...

  8. Windows下php环境变量的配置

    1.找到php的路径比如"E:\php_env\PHP".    2.需要保证该目录下php.ini的配置是正确的,如果是刚下载的php包,则可能需要修改相应的一些配置:将php目 ...

  9. L1-2. 点赞【求多组数据中出现次数最多的】

    L1-2. 点赞 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 微博上有个“点赞”功能,你可以为你喜欢的博文点个赞表示支持.每 ...

  10. 2013 ACM/ICPC 亚洲区 杭州站

    题目链接  2013杭州区域赛 Problem A Problem B 这题我用的是SPFA+ mask dp 首先跑5次SPFA: 1次是求出每个起点和其他所有点的最短距离 4次是求出每个输入的点和 ...