logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

OpenLayers系列(2)

 primivite_ 2017-11-16

工具的使用步骤请参考 OpenLayers系列(1)——入门示例 一节。

多图层地图的构成

    多图层的地图由两种图层构成：base layer 和overlay layer 。

    Base layer: 任何一个地图中都存在至少一个图层，否则你的应用将呈现空白，我们把最基本的一个图层称为base layer。Base layer不止一种或一个，你可以选择任意一个图层作为应用的base layer，但是任何时候base layer都只能有一个是turn on的，如果程序在打开一个base layer时发现已经存在另一个打开着的base layer，则应用会关掉之前的base layer而使用最近打开的一个。所以base layer在地图中的概念就像是(radio button)一个单选按钮。

    Overlay layer: 非base layer的图层统称为overlay layer。应用中可使用并同时打开任何多的overlay layer，你可以使用参数设置该层是否显示。Overlay layer在地图中的概念就像是(checkbox)多选框。

    以上概念你可以在OpenLayers提供的一个图层切换器上形象地看到。

示例1

    以下是一个包含两个图层和图层切换器的示例，该示例在base layer上加上了国家，城市，洲名层：

打开图层切换器：

示例1代码：

  1. <!DOCTYPE html>  
  2. <html lang='en'>  
  3. <head>  
  4.     <meta charset='utf-8' />  
  5.    <title>My OpenLayers Map</title>  
  6.     <script type='text/javascript' src='OpenLayers.js'></script>  
  7.     <script type='text/javascript'>  
  8.   
  9.         var map;  
  10.   
  11.        function init() {  
  12.           map = new OpenLayers.Map('map_element', {});//初始化map对象  
  13.           var wms_layer_map = new OpenLayers.Layer.WMS( //定义第一个层  
  14.             'Base layer',  
  15.             'http://vmap0.tiles./wms/vmap0',  
  16.             {layers: 'basic'},//向map server请求basic层  
  17.             {isBaseLayer: true}//设置该层为basic层  
  18.           );  
  19.   
  20.           var wms_layer_labels = new OpenLayers.Layer.WMS(//定义第二个层  
  21.             'Location Labels',  
  22.             'http://vmap0.tiles./wms/vmap0',  
  23.             {layers: 'clabel,ctylabel,statelabel',  
  24.             transparent: true},  
  25.             {opacity: .5}//设置透明度为50%  
  26.           );  
  27.   
  28.           map.addLayers([wms_layer_map, wms_layer_labels]);//以数组形式将多个层加入map对象  
  29.   
  30.           map.addControl(new OpenLayers.Control.LayerSwitcher({}));//添加一个层切换器  
  31.   
  32.           if(!map.getCenter()){  
  33.               map.zoomToMaxExtent();  
  34.             }  
  35.        }  
  36.   
  37.     </script>  
  38. </head>  
  39.   
  40. <body onload='init();'>  
  41.     <div id='map_element' style='width: 500px; height: 500px;'>  
  42.     </div>  
  43. </body>  
  44. </html>  

示例2

示例2主要展示部分图层参数的效果，该示例一共有5个图层，第个图层有不同效果，可以不断放大查看。


代码如下：

  1. <!DOCTYPE html>  
  2. <html lang='en'>  
  3. <head>  
  4.     <meta charset='utf-8' />  
  5.    <title>My OpenLayers Map</title>  
  6.     <script type='text/javascript' src='OpenLayers.js'></script>  
  7.     <script type='text/javascript'>  
  8.   
  9.         var map;  
  10.   
  11.        function init() {  
  12.           map = new OpenLayers.Map('map_element', {});  
  13.           var wms_layer_map = new OpenLayers.Layer.WMS(//base layer  
  14.               'Base layer',  
  15.               'http://vmap0.tiles./wms/vmap0',  
  16.               {layers: 'basic'},  
  17.               {isBaseLayer: true}  
  18.             );  
  19.   
  20.           var wms_layer_labels = new OpenLayers.Layer.WMS(//国家，洲，城市名层  
  21.               'Location Labels',  
  22.               'http://vmap0.tiles./wms/vmap0',  
  23.               {layers: 'clabel,ctylabel,statelabel',  
  24.               transparent: true},  
  25.               {visibility: false, opacity:0.5}//默认不显示该层(但可以图层切换器中打开)  
  26.             );  
  27.   
  28.          var wms_state_lines = new OpenLayers.Layer.WMS(//洲界层  
  29.               'State Line Layer',  
  30.               'http://labs./wms/vmap0',  
  31.               {layers: 'stateboundary',  
  32.                 transparent: true},  
  33.               {displayInLayerSwitcher: false,  //设置该层不显示在图层切换器中  
  34.               minScale: 13841995.078125}//设置一个最小尺度，只有当地图在缩放时达到这个最小尺度时才显示该图层信息  
  35.             );  
  36.   
  37.          var wms_water_depth = new OpenLayers.Layer.WMS(  
  38.              'Water Depth',  
  39.              'http://labs./wms/vmap0',  
  40.              {layers: 'depthcontour',  
  41.              transparent: true},  
  42.              {opacity:0.8}  
  43.             );  
  44.   
  45.          var wms_roads = new OpenLayers.Layer.WMS(  
  46.              'Roads',  
  47.              'http://labs./wms/vmap0',  
  48.              {layers: 'priroad,secroad,rail',  
  49.              transparent: true},  
  50.              {transistionEffect:'resize'}//让该图层在缩放时呈现重新计算的效果  
  51.             );  
  52.   
  53.         map.addLayers([  
  54.           wms_layer_map,  
  55.           wms_layer_labels,  
  56.           wms_state_lines,  
  57.           wms_water_depth,  
  58.           wms_roads]);  
  59.   
  60.           map.addControl(new OpenLayers.Control.LayerSwitcher({}));  
  61.   
  62.           if(!map.getCenter()){  
  63.               map.zoomToMaxExtent();  
  64.             }  
  65.        }  
  66.   
  67.     </script>  
  68. </head>  
  69.   
  70. <body onload='init();'>  
  71.     <div id='map_element' style='width: 500px; height: 500px;'>  
  72.     </div>  
  73. </body>  
  74. </html>  


     

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： primivite_ > 《geoserver》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多