如何在傳單地圖中顯示一個彈出窗口，該彈出窗口顯示來自Geoserver WMS圖層的要素屬性？

Question

我是Leaflet的新手，我正在嘗試在Webmap上獲得一些非常基本的功能（或者我認為是這樣）。 簡而言之，我在Geoserver上托管了許多（179）WMS圖層，我希望用戶能夠單擊任何要素並顯示一個彈出窗口，其中顯示有關該要素的信息。

我有179個圖層，每個圖層代表我使用的地圖庫的紙質地圖圖紙的多邊形輪廓。 每個圖層代表集​​合中一個“系列”的地圖。 每層的屬性字段均相同。 一些功能彼此堆疊（同一地圖的不同版本的多個記錄）。 為了讓您大致了解我要創建的內容，這里有一個指向我在ArcGIS Online中制作的試驗應用程序的鏈接 （僅顯示了三個圖層）。 原諒基本的HTML，這只是顯示我需要做的一個例子。

我已經創建了一個傳單地圖，其中顯示了兩個圖層，一旦我了解了此功能，我想添加其他圖層。

是否可以制作一個彈出窗口，以顯示來自多個圖層的多個要素的信息？

我可以控制彈出窗口中顯示的屬性嗎？

做某種“信息窗口”比彈出窗口會容易嗎？

的確，任何阻止我放棄該項目的建議將不勝感激。

var map;

 function mapinitialize() {

var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

map = new L.Map('map',
    {
        center: new L.LatLng(46, -90),
        zoom: 6,
        layers: [osm],
        zoomControl: true
    });



//This is all for the layer control:

var f0999 = new L.TileLayer.WMS(GEOSERVERBASE + "/geoserver/Geodex/wms",
{
    layers: "Geodex:f0999",
    format: 'image/png',
    styles: 'F0999',
    transparent: true,
    attribution: ""
});


var f0177 = new L.TileLayer.WMS(GEOSERVERBASE + "/geoserver/Geodex/wms",
{
    layers: "Geodex:f0177",
    format: 'image/png',
    styles: 'F0177',
    transparent: true,
    attribution: ""
}); 

var baseMaps = {
"osm": osm
};

var overlayMaps = {
"f0999 Messing Around Layer": f0999,
"f0177 Nautical Charts": f0177
};

L.control.layers(baseMaps, overlayMaps).addTo(map);
//End layer control

當前彈出窗口：

map.on('click', function(e){

var popupContent = "You have clicked the map at " + e.latlng.lat + ", " + e.latlng.lng;

var marker = new L.marker(e.latlng).addTo(map)
        .bindPopup(popupContent)
        .openPopup();   

 });

 }

我可以在傳單中找到的所有對彈出窗口的引用都分配給了標記，正如您在代碼中所看到的，我已經能夠將彈出窗口分配給標記。

理想情況下，我想在用戶單擊的位置放置一個標記，並在其下方顯示功能的屬性。 目的是使用戶可以使用此應用程序查詢特定區域內的哪些地圖。

Answer 1

如果您使用的是7.X版本的傳單，則包裝盒中沒有對此的直接支持。 幸運的是，該庫很好地支持通過插件和對象擴展的自定義。

就個人而言，我已經為滿足類似需求修改了此示例 。 它不能容納顯示多層的詳細信息，但是可以實現一些附加的自定義。 您絕對可以控制顯示哪些屬性。它擴展了WMS磁貼層提供的框架，從而增加了執行WMS GetFeatureInfo請求的能力，而這正是您所需要的。

看起來GeoServer的OpenLayers支持層預覽功能可以做到這一點，但是結果將加載到另一個div中，而不是彈出窗口中。 如果您不希望手太臟，OpenLayers可能會更支持此功能。

另外，如果使用WFS圖層是一種選擇，則使用該圖層的onEachFeature事件附加onclick事件的時間會容易得多。 如果功能部件的數量很少，則可以將彈出窗口綁定到要顯示的數據上-使用onclick偵聽器在單擊時顯示彈出窗口。 如果有趣，我可以提供一些示例。