我对Leaflet很新,我试图在我的网页上获得一些非常基本(或者我认为)的功能。简而言之,我在Geoserver上托管了许多(179)WMS图层,我希望用户能够点击任何功能并显示一个弹出窗口,显示有关该功能的信息。
我有179层,每层代表我工作的地图库的纸质地图表的多边形足迹。每个层代表一个"系列"集合中的地图。每个图层的属性字段都相同。某些功能堆叠在一起(同一个地图的不同版本的多个记录)。为了让您了解我有兴趣创建的内容,这里是我在ArcGIS online中创建的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: '© <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();
});
}
我可以找到的传单中对弹出窗口的所有引用都分配给标记,正如您在代码中看到的,我已经能够为标记分配弹出窗口。
理想情况下,我想在用户点击的位置放置一个标记,并显示下方要素的属性。目的是用户可以使用此应用程序查询我们针对特定区域的地图。
答案 0 :(得分:1)
如果您使用的是7.X版本的传单,则框中没有直接支持。幸运的是,我们所有人都可以通过插件和对象扩展来支持自定义。
就个人而言,我已根据类似需求调整了此example。它不适合显示多个图层的细节,但可以实现一些额外的自定义。您肯定能够控制显示的属性。它扩展了框架,提供了WMS切片层,增加了执行WMS GetFeatureInfo
请求的能力,这是您需要的核心。
似乎GeoServer的OpenLayers支持的图层预览功能 执行此操作,但结果将加载到另一个div中,而不是弹出窗口。如果你不想弄得太脏,OpenLayers可能会更多地支持这种方式。
此外,如果使用WFS图层是一个选项,您可以更轻松地使用该图层的onEachFeature
事件附加onclick事件。如果功能的数量很少,您可以将弹出窗口绑定到要显示的数据 - 使用onclick侦听器在单击时显示弹出窗口。如果它有趣,我可以提供一些这方面的例子。