篩選的GetFeatureInfo結果（單張WMS插件）

Question

問題

隨着leaflet.wms.js插件，我已經成功只是通過點擊來顯示（使用的GetFeatureInfo）WMS圖層信息。問題是地理服務器僅以純文本格式提供數據，如下圖所示，這是一團糟。

Yep, it is a mess indeed

因此我想過濾的GetFeatureInfo查詢的結果，以便只顯示有用信息。我寫了一堆JavaScript行，過濾包含GetFeatureInfo請求結果的<div>。

var GetFeatureInfo = document.getElementsByClassName("leaflet-popup-content")[0].innerHTML; 
tipo = GetFeatureInfo.split(/'/)[21]; 
legenda = GetFeatureInfo.split(/'/)[27]; 
document.getElementsByClassName("leaflet-popup-content")[0].innerHTML = tipo + ":<br/>PERICOLOSITÀ " + legenda; 

我試圖在腳本底部添加這些行來調用和配置地圖，但它不起作用。我想這些行不是在正確的時刻執行的。

解決方案

感謝Sebastian Schulz，我已經成功地篩選的GetFeatureInfo查詢的結果。我們需要擴展L.WMS.Source類，並使用掛鉤showFeatureInfo編輯類在彈出窗口中顯示GetFEatureInfo的方式。就像這樣：

var CleanInfoSource = L.WMS.Source.extend({ 
    'showFeatureInfo': function(latlng, info){ 
     if (!this._map){return;} 
     tipo = info.split(/'/)[21]; 
     legenda = info.split(/'/)[27]; 
     info = tipo + ":<br/>PERICOLOSITÀ " + legenda; 
     this._map.openPopup(info, latlng); 
    } 
}); 

var minambPAI = new CleanInfoSource("http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/WMS_v1.3/Vettoriali/PAI_pericolosita.map",{ 
     format: "image/png", 
     transparent: true, 
     attribution: "<a href='http://www.pcn.minambiente.it'>Ministero dell&#8217;Ambiente</a>", 
     info_format: "text/plain" 
    } 
); 

塞巴斯蒂安說，這種方法（等等）是在documentation。我還發現鉤子語法在leaflet.wms.js腳本中。 RTFM我猜... :)

Answer 1

根據單張WMS documentation您需要擴展類L.WMS.Source並覆蓋掛鉤（例如showFeatureInfo）。檢查此片段並編輯info變量以創建自定義彈出窗口。

var map = L.map('map').setView([43.53, 10.32], 13); 
var openTopoMap = L.tileLayer(
    'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', 
    {attribution: '<a href="https://opentopomap.org/copyright">OpenTopoMap</a>'}).addTo(map); 
var MySource = L.WMS.Source.extend({ 
    'showFeatureInfo': function(latlng, info) { 
     if (!this._map) { 
      return; 
     } 
     // do whatever you like with info 
     console.log(info) 
     this._map.openPopup(info, latlng); 
    } 
}); 
var minambPAI = new MySource("http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/WMS_v1.3/Vettoriali/PAI_pericolosita.map", 
    { 
     format: "image/png", 
     transparent: true, 
     attribution: "<a href='http://www.pcn.minambiente.it'>Ministero dell&#8217;Ambiente</a>", 
     info_format: "text/plain" 
    } 
); 
var periAlluvioneMME = minambPAI.getLayer('RN.PAI.PERICOLOSITA.ALLUVIONE').addTo(map); 
var periFranaMME = minambPAI.getLayer('RN.PAI.PERICOLOSITA.FRANA_01'); 
var control = L.control.layers({}, { 
    'Pericolosità Alluvioni: moderata a molto elevata': periAlluvioneMME, 
    'Pericolosità Frane: moderata a molto elevata': periFranaMME 
}) 
control.addTo(map);