Javascript 如何在传单地图中显示显示Geoserver WMS图层的要素属性的弹出窗口？

我对传单很陌生，我正试图在我的网络地图上获得一些相当基本的功能（或者我认为是这样）。简言之，我在Geoserver上托管了许多（179）WMS图层，我希望用户能够单击任何功能并显示一个显示该功能信息的弹出窗口

我有179个图层，每个图层代表我工作的地图库的纸质地图页的多边形足迹。每个图层代表集合中的一个“系列”地图。每个层的属性字段都是相同的。一些要素相互叠加（同一地图不同版本的多条记录）。为了让您了解我对创建什么感兴趣，这里是我在ArcGIS online中制作的一个图层（仅显示其中的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

我能找到的传单中对弹出窗口的所有引用都被分配给了标记，正如您在代码中看到的，我已经能够将弹出窗口分配给标记

---

理想情况下，我希望在用户单击的位置放置一个标记，并显示下面特性的属性。其目的是用户可以使用此应用程序查询特定区域的地图

如果您使用的是7.X版本的传单，则盒子中没有对此的直接支持。幸运的是，该库支持通过插件和对象扩展进行定制

就我个人而言，我已经根据类似的需要对其进行了调整。它不能显示多个层的详细信息，但可以完成一些额外的定制。您肯定能够控制显示哪些属性。它扩展了框架提供的WMS平铺层，添加了执行WMS

GetFeatureInfo

请求的功能，这是您需要的核心

看起来GeoServer的OpenLayers支持的图层预览功能可以做到这一点，但结果会加载到另一个div中，而不是弹出窗口。如果你不想让你的手太脏，OpenLayers可能会在盒子里支持更多

此外，如果使用WFS层是一个选项，那么使用该层的

onEachFeature

事件附加onclick事件会容易得多。如果功能的数量很小，您可以将弹出窗口绑定到要显示的数据——使用onclick侦听器在单击时显示弹出窗口。如果有趣的话，我可以提供一些例子

副本

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

 });

 }