筛选的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);