zoukankan      html  css  js  c++  java
  • Openlayers中layer介绍

    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='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='800; height: 600px;'>
          </div>
      </body>
      </html>

    程序运行后的结果为:


          

  • 相关阅读:
    css3hover效果
    相册集效果
    原生进度条
    原生放大镜效果
    字符串变数组
    原生弹幕模拟
    圣杯与双飞翼布局
    三级联动
    Redis 基础、高级特性与性能调优
    如何完美回答面试官问的Mybatis初始化原理!!!
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6797980.html
Copyright © 2011-2022 走看看