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

随机推荐

刷题总结——天使玩偶（bzoj2716）
题目: Description Input Output HINT 题解: 学了cdq后近期最后一道题···然而tm还是搞了1个半小时才tm搞出来······ 先说思路:对于绝对值,我们采取类似于旋转 ...
Java实现一致性Hash算法
Java代码实现了一致性Hash算法,并加入虚拟节点.,具体代码为: package com.baijob.commonTools; import java.util.Collection; im ...
下拉菜单的option的value属性值问题
下拉菜单的所有option都必须有value值,如果没有value会将标签中间的值传上去: 比如: <span class="el_spans">试卷级别:</s ...
【MFC】Button控件和Picture Control的鼠标事件执行顺序
1.Button控件鼠标事件执行顺序 (1) WM_LBUTTONDOWN (2) WM_LBUTTONUP (3) OnBnClickedButton1(); 2.Picture Control的鼠 ...
x86 下的 struct 變數 member 擺放位置
2 int main() 3 { 4 struct _test { 5 int a; 6 int b; 7 int c; 8 }; 9 10 struct _test test; 11 test.a ...
hdu 4506(数学,循环节+快速幂)
小明系列故事——师兄帮帮忙 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tot ...
AC日记——最小路径覆盖问题洛谷 P2764
题目描述 «问题描述: 给定有向图G=(V,E).设P 是G 的一个简单路(顶点不相交)的集合.如果V 中每个顶点恰好在P 的一条路上,则称P是G 的一个路径覆盖.P 中路径可以从V 的任何一个顶点开 ...
vue 权限控制按钮3种样式、内容、以及跳转事件
最近碰到一个因为要根据权限来给一个按钮变成不同功能, 简单写出3个按钮然后用v-if也能实现这个功能,但是在加载页面时,如果延迟过高则会把按钮按照DOM顺序加载出来,这是个很不好的效果思索了下,把三 ...
L2-3. 悄悄关注【STL+结构体排序】
L2-3. 悄悄关注时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者陈越新浪微博上有个“悄悄关注”,一个用户悄悄关注的人,不出现在 ...
NEERC15
2015-2016 ACM-ICPC Northeastern European Regional Contest 再开一个新坑吧目前姿势有限,C.H.I仍然处于弃坑状态代码戳这里 Problem ...

Openlayers中layer介绍

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

随机推荐

热门专题