Openlayers中layer介绍

1.base layers & overlay layers

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

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

2.使用layer的步骤：

创建layer
把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介绍的更多相关文章

OpenLayers中的Layer概念和实践--Openlayers调用WMS服务
整理转自:http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b 本章我认为是这本书的真正开端,终于开始讲一些有意思的东西了.. 在这一 ...
OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
OpenLayers中的图层（转载）
作者:田念明出处:http://www.cnblogs.com/nianming/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法 ...
openlayers中单击获取要素
openlayers中单击获取要素分类专栏: GIS 总结 OpenLayers 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
POP动画引擎中Layer与CALayer的一点区别
POP动画引擎是facebook提供的一个开源框架, 可以实现很多的动画效果, 这里就不一一介绍啦, 有兴趣的童鞋请移步: https://github.com/facebook/pop 下面简单的讲 ...
OpenLayers中的球面墨卡托投影
最近看OpenLayers,研究到地图投影时找到官方的文档,就翻译了一下,由于英文能力差,翻译不好的地方,请看原文原文地址:http://docs.openlayers.org/library/sp ...
OpenLayers中地图缩放级别的设置方法
来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述在OpenLayers中,地图必须具有一个缩放级别的 ...
[BIM]BIM中IDM介绍
参考:http://blog.fang.com/25866228/10613454/articledetail.htm IDM的全称是Information Delivery Manual,信息交付手 ...
关于js-binding中Layer触摸事件的优化
关于js-binding中Layer触摸事件的优化 cocos2d-x 3.7 1. 目前js中监听触摸事件带来的不便(特别是cocosbuilder) 在目前的js-binding中,如果要监听la ...

随机推荐

NOIP2012开车旅行【倍增】
题目小 A 和小 B 决定利用假期外出旅行,他们将想去的城市从 1 到 N 编号,且编号较小的城市在编号较大的城市的西边,已知各个城市的海拔高度互不相同,记城市 i 的海拔高度为Hi,城市 i 和城 ...
浅谈android反调试之转发端口
反调试方案: 我们最通常使用的动态工具是IDA, IDA的动态调试端口默认为23946,我们可以通过/pro/net/tcp 查看android 系统所有TCP Socket 启动android_se ...
iOS-sqlite3&FMDB使用代码示范
数据库操作是我们使用十分频繁的一份操作,在iOS中如何使用数据库,使用什么数据库,是我们不得不考虑的一个问题. 小型数据我们可以使用plist文件,或者NSUserDefaults存储.数据量比较多得 ...
ServletContext ActionContext ServletActionContext
1> ServletContext--------->SessionContext>RequestContext>PageContext 一个 WEB 运用程序只有一个 Ser ...
jq 的replaceWith方法在360下面会出现兼容问题
弄的繁琐点, 先remove旧的元素,然后append就好了
关于C++的new是否会对内存初始化的问题
先把结论放上来: C++在new时的初始化的规律可能为:对于有构造函数的类,不论有没有括号,都用构造函数进行初始化:如果没有构造函数,则不加括号的new只分配内存空间,不进行内存的初始化,而加了括号的 ...
Nginx没有启动文件、nginx服务不支持chkconfig、nginx无法自启
Nginx没有启动文件.nginx服务不支持chkconfig.nginx无法自启问题描述: Nginx安装后,当想要设置Ngixn为开机启动时, 就需要把nginx的启动命令路径放到/etc/rc ...
js-解决移动端点击事件的延迟问题
众所周知,在手机上的点击事件会有延迟300ms的问题.但在做手机端某些点击小游戏时,我们就需要取消这个延迟的问题: 第一步:禁止页面的缩放 <meta name="viewport&q ...
django中表变更后migrate无效的问题
问题描述: 已有的model,修改之后,想重新建模,于是将migrations文件夹中除__init__.py之外其他文件都删掉,再次执行以下步骤python manage.py makemigrat ...
python3 - 多线程和协程速率测试对比
多线程和协程都属于IO密集型,我通过以下用例测试多线程和协程的实际速率对比. 实例:通过socket客户端以多线程并发模式请求不同服务器端(这里服务器端分2种写法:第一种服务器通过协程实现,第二种服务 ...

Openlayers中layer介绍

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

随机推荐

热门专题