一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

OpenLayers系列(2)

 primivite_ 2017-11-16

工具的使用步驟請參考 OpenLayers系列(1)——入門示例 一節(jié)。

多圖層地圖的構(gòu)成

    多圖層的地圖由兩種圖層構(gòu)成:base layeroverlay layer 。

    Base layer: 任何一個(gè)地圖中都存在至少一個(gè)圖層,否則你的應(yīng)用將呈現(xiàn)空白,我們把最基本的一個(gè)圖層稱為base layer。Base layer不止一種或一個(gè),你可以選擇任意一個(gè)圖層作為應(yīng)用的base layer,但是任何時(shí)候base layer都只能有一個(gè)是turn on的,如果程序在打開一個(gè)base layer時(shí)發(fā)現(xiàn)已經(jīng)存在另一個(gè)打開著的base layer,則應(yīng)用會(huì)關(guān)掉之前的base layer而使用最近打開的一個(gè)。所以base layer在地圖中的概念就像是(radio button)一個(gè)單選按鈕。

    Overlay layer: 非base layer的圖層統(tǒng)稱為overlay layer。應(yīng)用中可使用并同時(shí)打開任何多的overlay layer,你可以使用參數(shù)設(shè)置該層是否顯示。Overlay layer在地圖中的概念就像是(checkbox)多選框。

    以上概念你可以在OpenLayers提供的一個(gè)圖層切換器上形象地看到。

示例1

    以下是一個(gè)包含兩個(gè)圖層和圖層切換器的示例,該示例在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( //定義第一個(gè)層  
  14.             'Base layer',  
  15.             'http://vmap0.tiles./wms/vmap0',  
  16.             {layers: 'basic'},//向map server請求basic層  
  17.             {isBaseLayer: true}//設(shè)置該層為basic層  
  18.           );  
  19.   
  20.           var wms_layer_labels = new OpenLayers.Layer.WMS(//定義第二個(gè)層  
  21.             'Location Labels',  
  22.             'http://vmap0.tiles./wms/vmap0',  
  23.             {layers: 'clabel,ctylabel,statelabel',  
  24.             transparent: true},  
  25.             {opacity: .5}//設(shè)置透明度為50%  
  26.           );  
  27.   
  28.           map.addLayers([wms_layer_map, wms_layer_labels]);//以數(shù)組形式將多個(gè)層加入map對象  
  29.   
  30.           map.addControl(new OpenLayers.Control.LayerSwitcher({}));//添加一個(gè)層切換器  
  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主要展示部分圖層參數(shù)的效果,該示例一共有5個(gè)圖層,第個(gè)圖層有不同效果,可以不斷放大查看。


代碼如下:

  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}//默認(rèn)不顯示該層(但可以圖層切換器中打開)  
  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,  //設(shè)置該層不顯示在圖層切換器中  
  34.               minScale: 13841995.078125}//設(shè)置一個(gè)最小尺度,只有當(dāng)?shù)貓D在縮放時(shí)達(dá)到這個(gè)最小尺度時(shí)才顯示該圖層信息  
  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'}//讓該圖層在縮放時(shí)呈現(xiàn)重新計(jì)算的效果  
  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>  


     

    本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    国产精品成人又粗又长又爽| 国产内射一级一片内射高清视频 | 欧美精品一区久久精品| 富婆又大又白又丰满又紧又硬| 九九热视频免费在线视频| 欧美激情一区二区亚洲专区| 精品人妻精品一区二区三区| 东京热加勒比一区二区三区| 国产一区二区熟女精品免费| 91人妻人澡人人爽人人精品| 亚洲中文字幕熟女丝袜久久| 国产精品99一区二区三区| 国产午夜精品久久福利| 日韩一区二区三区在线欧洲| 中文字幕亚洲精品在线播放| 激情内射日本一区二区三区| 热情的邻居在线中文字幕| 黄色片一区二区三区高清| 人人妻在人人看人人澡| 国产精品国产亚洲区久久| 日韩成人动画在线观看| 久久免费精品拍拍一区二区| 国产精品日韩欧美第一页| 深夜福利欲求不满的人妻| 亚洲一二三四区免费视频| 精品al亚洲麻豆一区| 欧美乱码精品一区二区三| 日本在线不卡高清欧美| 九七人妻一区二区三区| 日本福利写真在线观看| 99国产高清不卡视频| 国产免费一区二区三区av大片| 极品少妇一区二区三区精品视频 | 老鸭窝老鸭窝一区二区| 午夜国产成人福利视频| 一区二区三区18禁看| 日韩精品一级片免费看| 午夜精品福利视频观看| 黄片三级免费在线观看| 国产欧美日韩视频91| 日韩精品中文在线观看|