如何在小冊子地圖中顯示從Geoserver WMS圖層顯示要素屬性的彈出窗口？

Question

我對Leaflet很新，我試圖在我的webmap上獲得一些非常基本的（或者我認爲）功能。簡而言之，我在Geoserver上託管了許多（179）WMS圖層，我希望用戶能夠單擊任何功能並顯示彈出窗口，以顯示有關該功能的信息。

我有179個圖層，每個圖層都代表我爲之工作的地圖庫的紙質地圖圖紙的多邊形覆蓋區。每個圖層代表集​​閤中的一系列「地圖」。每個圖層的屬性字段是相同的。其中一些功能堆疊在一起（同一地圖不同版本的多個記錄）。爲了讓您瞭解我有興趣創建的內容，下面是我在ArcGIS在線中製作的link to my pilot application（僅顯示3個圖層）。原諒基本的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版本的小冊子，則不能直接在此框中提供支持。幸運的是，對於我們所有人來說，庫支持通過插件和對象擴展進行自定義。

就我個人而言，我已將此example改編爲類似需求。它不適合顯示多個圖層的細節，但是可以實現一些額外的定製。您一定能夠控制顯示的屬性。它擴展了提供WMS瓦片層的框架，增加了執行WMS GetFeatureInfo請求的能力，這是您所需要的核心。

好像GeoServer的OpenLayers支持圖層預覽功能確實這樣做，但結果加載到另一個div，而不是彈出。如果你不想讓自己的手太髒，OpenLayers可能會支持這個更多的盒子。另外，如果使用WFS圖層是一個選項，那麼使用該圖層的onEachFeature事件附加onclick事件會更容易。如果功能數量很少，則可以將彈出窗口綁定到要顯示的數據上 - 點擊時用onclick監聽器顯示彈出窗口。如果它很有趣，我可以提供一些例子。