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 ...
随机推荐
- 单例/单体模式(Singleton)
单例/单体模式(Singleton) 首先,单例模式是对象的创建模式之一,此外还包括工厂模式. 单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3, ...
- centons7编译安装zabbix3.4【转https://www.cnblogs.com/kowloon/p/7771495.html】
或者参考官方文档:https://www.zabbix.com/documentation/3.4/manual/installation/install 一.预编译环境准备 1.lamp安装和启动 ...
- MGW——美团点评高性能四层负载均衡
转自美团点评技术博客:https://tech.meituan.com/MGW.html 前言 在高速发展的移动互联网时代,负载均衡有着举足轻重的地位,它是应用流量的入口,对应用的可靠性和性能起着决定 ...
- SpringBoot使用Junit4单元测试
SpringBoot2.0笔记 本篇介绍Springboot单元测试的一些基本操作,有人说一个合格的程序员必须熟练使用单元测试,接下来我们一起在Springboot项目中整合Junit4单元测试. 本 ...
- 【CF1020A】New Building for SIS(签到)
题意: 有n栋楼,从一栋楼某个地方,到大另一栋楼的某个地方,每栋楼给了连接楼的天桥,每走一层或者穿个一栋楼花费一分钟,求出起点到大目的点最少花费的时间 n,h<=1e8,q<=1e4 思路 ...
- 【HDOJ5974】A Simple Math Problem(构造,解方程)
题意:给定A与B,要求构造出一组X,Y,使得X+Y=A,lcm(X,Y)=B A<=2e4,B<=1e9 思路:A的范围较小,考虑以A为突破口 枚举A的约数k,复杂度O(sqrt(A)) ...
- mybatis动态sql片段与分页,排序,传参的使用与一对多映射与resultMap使用
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...
- 手機 停充的種類 與 量測 power consumption 功率 使用 bq25896 bq25890
Precondition : 配有 power path 功能的 BQ2589 手機. 接上 pc usb port. Origin : 今天有同事問我, 手機是否可以在接上 pc usb port ...
- 本地hosts文件
(1)什么是Hosts文件? Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登录的网 ...
- ping++微信渠道,第二次拉起不能进行支付返回订单号重复问题
项目中用到了支付功能,采用的是ping++实现的,上线运行一年多都很正常,但是最近突然出现有买家反映说不能进行支付的情况 通过了解和沟通之后发现发现是重复拉起失败,然后我们对问题进行了排查. 测试过程 ...