筛选的GetFeatureInfo结果(单张WMS插件)
问题描述:
问题筛选的GetFeatureInfo结果(单张WMS插件)
随着leaflet.wms.js插件,我已经成功只是通过点击来显示(使用的GetFeatureInfo)WMS图层信息。问题是地理服务器仅以纯文本格式提供数据,如下图所示,这是一团糟。
因此我想过滤的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’Ambiente</a>",
info_format: "text/plain"
}
);
塞巴斯蒂安说,这种方法(等等)是在documentation。我还发现钩子语法在leaflet.wms.js脚本中。 RTFM我猜... :)
答
根据单张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’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);
谢谢你@sebastian。我试图扩展类[如上所示](https://*.com/q/46268753/7074472),但我得到了这样的错误:'TypeError:L.WMS.source.extend不是一个函数'。 –
你可以在jsfiddle上提供一小部分代码吗?然后我们可以调试它。尝试创建地图对象并添加示例WMS图层。 https://jsfiddle.net/ –
这是[jsfiddle](https://jsfiddle.net/xuq8zszg/2/)上的代码,但似乎jsfiddle拒绝显示GetFeatureInfo内容(可能是因为它是从一个http连接而不是https,我不能改变它)。但是,它适用于[jsbin](http://jsbin.com/nupehu/edit?html,js,output)。谢谢你的帮助。 –