Фильтровать результаты getFeatureInfo (плагин wlet листовки)

Question

проблема

С помощью плагина leaflet.wms.js мне удалось отобразить информацию о слоях WMS (используя GetFeatureInfo), просто щелкнув по ним. Проблема в том, что геосервер доставляет данные только в виде простого текста, и, как показано на рисунке ниже, это беспорядок.

Да, это действительно беспорядок

Поэтому я хотел бы отфильтровать результаты запросов GetFeatureInfo, чтобы отображать только полезную информацию. Я написал несколько строк JavaScript, ведьма фильтрует <div> содержащий результаты запросов GetFeatureInfo.

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 класс и редактировать способ, которым класс показывает GetFEatureInfo во всплывающих окнах, используя хук showFeatureInfo, Как это:

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"
    }
);

Как сказал Себастьян, этот метод (среди прочих) есть в документации. И я также обнаружил, что синтаксис ловушки находится в скрипте leaflet.wms.js. RTFM я думаю...:)

Answer 1

Согласно документации Leaflet WMS, вам необходимо расширить класс L.WMS.Source и переопределить хуки (например, showFeatureInfo). Проверьте этот фрагмент и отредактируйте переменную информации, чтобы создать собственное всплывающее окно.

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);