首页 文章

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

提问于
浏览 次
1

我是Leaflet的新手，我正试图在我的webmap上获得一些非常基本（或者我认为）的功能 . 简而言之，我在Geoserver上托管了许多（179）WMS图层，我希望用户能够单击任何功能并显示一个弹出窗口，显示有关该功能的信息 .

我有179层，每层代表我工作的 Map 库的纸质 Map 表的多边形足迹 . 每个图层代表集合中的一个"series" Map . 每个图层的属性字段都相同 . 某些功能堆叠在一起（同一个 Map 的不同版本的多个记录） . 为了让您了解我有兴趣创建的内容，这里是我在ArcGIS online中创建的link to my pilot application（仅显示3个图层） . 原谅基本的HTML，它只是一个展示我需要做的事情的例子 .

我创建了一个显示其中两个图层的传单 Map ，我想在找到这个功能后添加其他图层 .

是否可以制作一个弹出窗口，可以显示来自多个图层的多个要素的信息？

我可以控制弹出窗口中显示的属性吗？

是否更容易做某种“信息窗口”而不是弹出窗口？

真的，任何阻止我放弃这个项目的建议都会非常感激 .

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

 });

 }

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

理想情况下，我想在用户单击的位置放置一个标记，并显示下面要素的属性 . 目的是用户可以使用此应用程序查询我们对特定区域的 Map .

javascript popup leaflet geoserver

1 回答

  • 1

    如果您使用的是7.X版本的传单，则框中没有直接支持 . 幸运的是，我们所有人都可以通过插件和对象扩展来支持自定义 .

    就个人而言，我已经根据类似的需要调整了这个example . 它绝对无法控制显示的属性 . 它扩展了框架，提供了WMS瓦片层，增加了执行WMS GetFeatureInfo 请求的能力，这是您需要的核心 .

    看起来GeoServer的OpenLayers支持的图层预览功能确实可以做到这一点，但结果会加载到另一个div中，而不是弹出窗口 . 如果你不想让自己的手太脏，OpenLayers可能会支持这种更多的开箱即用 .

    此外，如果使用WFS图层是一个选项，您可以更轻松地使用该图层的 onEachFeature 事件附加onclick事件 . 如果功能的数量很少，您可以将弹出窗口绑定到要显示的数据 - 使用onclick侦听器在单击时显示弹出窗口 . 如果它有趣，我可以提供一些这方面的例子 .

    回复于

相关问题