整理转自:http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b

本章我认为是这本书的真正开端,终于开始讲一些有意思的东西了。。

在这一章中我们将要学到

什么是OpenLayers中的Layer(图层)

基层和覆盖层之间的区别

学习Layers对象,以及对象上的属性

学习WMS Layer类

了解Layer对象描述的属性

讲解其他的Layer类

讲解Layer中的方法

什么是Layer

书上有个例子,说如果我们有两个透明的玻璃板,一个板子上用绿色的线描述一个地方的自行车路线,而另一个板子用蓝色的板子来描述汽车

可以行驶的路线,那么当我们将两个板子和在一起,我们就知道这做城市那些地方可以骑自行车,那些地方可以行驶汽车,那么这两个板子我们

就可以认为是Map上的Layer,也就是图层的概念。

至于在OpenLayers中,这个javascript框架拥有很多的Layer类,当我们需要请求WMS Map服务时,使用WMS layer类,当我门使用Google Map时,就使用Layer.google 类。

最后把层添加到Map上,理论上你相加多少层都行,但是考虑到性能的问题,还是加适当的层,这关键取决你电脑的性能。

BaseLayer

我们需要在一个地图上,标示一个基础图层,而别的图层都覆盖到他的上方,默认的情况下第一个添加到Map对象中的Layer,是BaseLayer,也可使用

isBaseLayer属性指定。

需要注意是在一个Map中,只能有一个BaseLayer.但是可以有很多的覆盖层。

Overlay Layers(我们刚提到的覆盖层)

一般称不是基层的所有图层都叫做覆盖层,唯一的区别就是顺序,添加的早的永远在下面。

来我们试着创建一个多层的Map,文件结构不变

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layer in OpenLayers</title>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">
var map;
function initMap(){
// 创建Map
map = new OpenLayers.Map('map',{});
//创建BaseLayer,并明确的在初始化时指出来. isBaseLayer:true
var baseLayer = new OpenLayers.Layer.WMS(
'basic layer',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers:'basic'},
{isBaseLayer:true}
);
var wms_layer_labels = new OpenLayers.Layer.WMS(
'Location Labels',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers:'clabel,ctylabel,statelabel',transparent:true},
{opacity:.5}
);
/*
* 向map中添加Layers,这里我们不在使用前两章中的addLayer方法,
* 需要注意的是这个方法的参数,没错是Layer对象的数组
*/
map.addLayers([baseLayer,wms_layer_labels]);
/**
* 现在,我们手动的添加地图的第一控件 Layer Switcher,图层选择器.
* 其中参数也有个匿名对象,不知道要什么参数,或者是继承来的
*/
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
/**
* 最后依然需要设置,地图显示区域 ,如果没有什么特殊的要求,我们可以使用前两章
* 的方法map.zoomToMaxExtent();
* 这里我把地图显示到河北 ,使用坐标和缩放等级的方法,缩放到河北大概在lon 116 lat 39左右
* //lon 经度 lat 纬度
* map.setCenter(new OpenLayers.LonLat(-116,56));
* map.zoomTo(5);
* 或者 map.zoomToExent(new OpenLayers.Bounds([minX,minY,maxX,maxY]));//设置了一个矩形用于显示,
*/
map.setCenter(new OpenLayers.LonLat(116,39));
map.zoomTo(7); }
</script>
</head>
<body onload="initMap()">
<div id="map" style="width: 500px;height: 500px"></div>
</body>
</html>
 

显示效果

我们可以使用图层选择器来完成覆盖层的显示。值得注意的是我们虽然看到图层显示器里面虽然只显示两个图层,但这只是OpenLayers的概念,

实际上他使用了server端4个图层。大家尝试可以使用FireBug观察和检查代码。

OpenLayers中的Layer概念和实践--Openlayers调用WMS服务的更多相关文章

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

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

  2. Openlayers中layer介绍

    1.base layers & overlay layers base layer:最底层的layer,其它的图层是在他之上,最先增加的图层默认作为base layer. overlay la ...

  3. OpenLayers中的图层

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

  4. OpenLayers中的图层(转载)

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

  5. openlayers中的自定制工具栏,包含画点、线、面

    先是在projectquantan-master这个项目中有一个EditingPanel这个工具条,也挺好的,功能挺全的,但是有一点就是只有画多边形的一个按钮,没有point和path俩个的,所以就想 ...

  6. openlayers中单击获取要素

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

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

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

  8. openlayers中实现自定冒泡的效果

    自定义的Openlayers.Popup.FreshCloud继承自Openlayers.Popup.Framed,实现了比较简洁的冒泡效果,详细代码如下 /** * Class: OpenLayer ...

  9. OpenLayers 6 学习笔记2 WMS服务避坑记录

    心血来潮,花1小时安装软件写代码+复习api,顺便熟悉一波wms 再次强化认知了wms获取要素的能力没有wfs强,有待考究 原文链接(转载请声明@秋意正寒  博客园/知乎/B站/csdn/小专栏):h ...

随机推荐

  1. js实现遮罩以及弹出可移动登录窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 1 ubuntu下装setuptools

    setuptools可以让程序员更方便的创建和发布 Python 包,特别是那些对其它包具有依赖性的状况,分享以下我在ubuntu下装setuptools的过程 系统:ubuntu 语言:python ...

  3. 北大ACM(POJ1006-Biorhythms)

    Question:http://poj.org/problem?id=1006 问题点:孙子定理 Memory: 248K Time: 0MS Language: C++ Result: Accept ...

  4. Windows 10 (or 8)Chrome 观看视频发生flash不能加载,即"could't load plugins"原因之一

    最近一直如题,不能看视频,后来发现从一个已经使用管理员权限打开的应用转到Chrome就可以加载flash,而从桌面打开Chrome就加载不了. 今天再次查找信息,从Ubuntu下Chrome不能加载f ...

  5. 使用Eclipse maven构建springmvc项目

    Eclipse maven构建springmvc项目 Listener 监听器 架构 使用Log4J监控系统日志邮件警报 2014-12-16 13:09:16 控制器在完成逻辑处理后,通常会产生一些 ...

  6. (转).NET Memory Profiler 使用简介

    1         简介 .Net Memory Profiler(以下简称Profiler):专门针对于.NET程序,功能最全的内存分析工具,最大的特点是具有内存动态分析(Automatic Mem ...

  7. Requirejs学习笔记(一)

    中文api 和 英文api网上都有的我就不翻译了,我的学习方法是先看英文api,然后看不懂的就比对中文api看一遍. requirejs可以帮助js代码模块化开发,模块化意味了解决了代码凌乱的问题,方 ...

  8. Python's Exception 层级结构

    BaseException +-- SystemExit +-- KeyboardInterrupt +-- GeneratorExit +-- Exception +-- StopIteration ...

  9. iOS 系统架构及常用框架

    1.iOS基于UNIX系统,因此从系统的稳定性上来说它要比其他操作系统的产品好很多 2.iOS的系统架构分为四层,由上到下一次为:可触摸层(Cocoa Touch layer).媒体层(Media l ...

  10. Git错误non-fast-forward后的冲突解决(转载)

    文章转载自:http://blog.csdn.net/chain2012/article/details/7476493 当要push代码到git时,出现提示: error:failed to pus ...