當我點擊地圖時顯示多個信息框（GeoServer圖層）

我已經使用GeoServer中添加的圖層創建了一個地圖。當我點擊地圖時顯示多個信息框（GeoServer圖層）

我創建了GetFeatureInfoUrl函數來在點擊圖層時獲取屬性表。但是當我點擊地圖時，所有圖層的所有信息框都顯示出來。即使一個圖層（位於另一圖層頂部）被關閉，它的屬性信息也會出現。

我怎樣才能讓它一次只顯示一個信息框？（因此，如果兩個圖層彼此重疊並且用戶點擊地圖，則將顯示在另一個之上的圖層的屬性信息。）

一位用戶在線向我解釋瞭如何做到這一點，但是沒有提供代碼。他提出瞭如下的解釋：每一層上

環比圖層列表
調用get（「可見」），以獲得可見性狀態由層交換機
每個可見層設置，追加其名稱添加到可見圖層名稱列表中
將可見圖層名稱列表添加到包含逗號分隔圖層名稱的單個字符串中
傳遞逗號分隔的可見圖層名稱字符串作爲附加參數QUERY_LAYERS在地圖中testSource.getGetFeature的最後一個參數InfoUrl「

如何創建此代碼？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Map</title> 
     <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css"> 
     <link rel="stylesheet" href="ol3-layerswitcher.css"> 
     <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script> 
     <script src="ol3-layerswitcher.js"></script> 

    </head> 
    <body> 
    <div id="map" style="width:100%;"></div> 
    <script src="javascript4.js"></script> 
    <div id="info2"></div> 
    <div id="info3"></div> 
    </body> 
</html>

的JavaScript：

var testSource2 = new ol.source.TileWMS({ 
url: 'http://localhost:8080/geoserver/wms', 
params: {'LAYERS': 'Marine:Great_Britain', 'TILED': true}, 
    serverType: 'geoserver' 
}); 

var testSource3 = new ol.source.TileWMS({ 
url: 'http://localhost:8080/geoserver/wms', 
params: {'LAYERS': 'Marine:Bedrock_Geology', 'TILED': true}, 
    serverType: 'geoserver' 
}); 

var layers = [ 
    new ol.layer.Tile({ 
     source: new ol.source.MapQuest({layer: 'osm'}) 
    }), 

     new ol.layer.Group({ 
      title: 'Layers', 
      layers: [ 

       //Implementing layers 

       new ol.layer.Tile({ 
        title: 'Great Britain', 
        source: testSource2 
       }), 

       new ol.layer.Tile({ 
        title: 'Geology - Bedrock', 
        source: testSource3 
       }), 
      ] 
     }) 
    ]; 

    var map = new ol.Map({ 
    layers: layers, 
    target: 'map', 
    view: new ol.View({ 
     center: [51480.6, 7216744.2], //UK 
     zoom: 5 
    }) 
    }); 



//Function to get features from layer 
map.on('singleclick', function(evt) { 
    document.getElementById('info2').innerHTML = ''; 
    viewResolution = map.getView().getResolution(); 
    var url = testSource2.getGetFeatureInfoUrl(
     evt.coordinate, viewResolution, 'EPSG:3857', 
     {'INFO_FORMAT': 'text/html'}); 
    if (url) { 
     document.getElementById('info2').innerHTML = 
      '<iframe seamless src="' + url + '"></iframe>'; 
    } 
}); 

//Function to get features from layer 
map.on('singleclick', function(evt) { 
    document.getElementById('info3').innerHTML = ''; 
    viewResolution = map.getView().getResolution(); 
    var url = testSource3.getGetFeatureInfoUrl(
     evt.coordinate, viewResolution, 'EPSG:3857', 
     {'INFO_FORMAT': 'text/html'}); 
    if (url) { 
     document.getElementById('info3').innerHTML = 
      '<iframe seamless src="' + url + '"></iframe>'; 
    } 
}); 


    //Layer switcher to turn layers on and off 
    var layerSwitcher = new ol.control.LayerSwitcher({ 
    tipLabel: 'Legend' 
}); 
map.addControl(layerSwitcher);

來源

2016-01-16 OliBoi

我認爲問題在於，你不要在您map.on('singleclick')用於檢查被點擊的哪一層。創建一個單一的map.on('singleclick')處理程序，因爲您在兩個偵聽器中的代碼都完全相同。

map.forEachFeatureAtPixel(e.pixel, function (feature, layer) { 
    var source = layer.getSource();   
    ... 
});

現在你會得到你已經點擊並能夠使用與您提到的代碼層的來源。

來源

2016-04-11 13:33:29 Werner

當我點擊地圖時顯示多個信息框（GeoServer圖層）

回答

相關問題