过滤 getFeatureInfo 结果（传单 wms 插件）

Question

问题

借助 leaflet.wms.js 插件，我已经成功地通过单击它们来显示有关 WMS 图层的信息（使用 GetFeatureInfo）。问题是地理服务器仅以纯文本形式传送数据，如下图所示，一团糟。

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;

我尝试在脚本底部添加这些行调用和配置地图，但没有成功。我想这些行没有在正确的时刻执行。

解决方案

感谢，我成功地过滤了 GetFeatureInfo 查询的结果。我们需要扩展 L.WMS.Source class 并使用挂钩 showFeatureInfo 编辑 class 在弹出窗口中显示 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. And I also found that the hook syntax is in the leaflet.wms.js 脚本中。 RTFM 我猜... :)

Answer 1

根据 Leaflet WMS documentation，您需要扩展 class 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);

过滤 getFeatureInfo 结果（传单 wms 插件）

Filter getFeatureInfo results (leaflet wms plugin)

javascript

wms

getfeatureinfo

leaflet