필터 대하여 GetFeatureInfo 결과 (전단지가 플러그인을 WMS) 나는 그냥 클릭 (대하여 GetFeatureInfo 사용) WMS 레이어에 대한 정보를 표시하기 위해 관리 한 <a href="http://github.com/heigeo/leaflet.wms" rel="nofollow noreferrer">leaflet.wms.js</a> 플러그인

Question

문제

. 문제는 지리 서버가 일반 텍스트로만 데이터를 전달하며 아래 이미지와 같이 데이터가 엉망이라는 것입니다.

Yep, it is a mess indeed

따라서 I에만 유용한 정보를 표시하기 위하여, 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

Leaflet WMS documentation에 따르면 L.WMS.Source 클래스와 override 후크 (예 : 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);