Leaflet 如何获取传单WMS地图的最近要素？_Leaflet_Geoserver_Wms_Getfeatureinfo

Leaflet 如何获取传单WMS地图的最近要素？

leaflet

Leaflet 如何获取传单WMS地图的最近要素？,leaflet,geoserver,wms,getfeatureinfo,Leaflet,Geoserver,Wms,Getfeatureinfo,我对Web服务不太熟悉，我面临一个问题。我有一张与WMS相连的地图。我添加了一个底图和我的WMS日期作为tileLayer，并且在我的地图上正确显示。现在，当我点击地图上的任何地方时，我希望最近的功能弹出。我已经在网上搜索过了，但找不到我理解的解决方案。() 有人能帮我吗这是我目前的代码： <!DOCTYPE html> <html> <head> <title>XXX</title> <l

我对Web服务不太熟悉，我面临一个问题。我有一张与WMS相连的地图。我添加了一个底图和我的WMS日期作为tileLayer，并且在我的地图上正确显示。现在，当我点击地图上的任何地方时，我希望最近的功能弹出。我已经在网上搜索过了，但找不到我理解的解决方案。() 有人能帮我吗

这是我目前的代码：

    <!DOCTYPE html>
<html>

<head>

    <title>XXX</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
   <style type="text/css">
    #nrwMap { height: 800px; width: 1300px;}
   </style>

</head>

<body>

     <div id="Map"></div>

     <script type="text/javascript">

        var mymap = L.map('Map').setView([51.28, 7.33], 8);

        var url = 'http://www.xxx.xxx.com/wms/';

        var basemap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11'
        })

        basemap.addTo(mymap);

        var featureLayer = L.tileLayer.wms(url, {
            layers: 'layerName',
            format: 'image/png',
            transparent: true
        });

        featureLayer.addTo(mymap);

     </script>

</body>

</html>


XXX
#nrwMap{高度：800px；宽度：1300px；}
var mymap=L.map（'map'）.setView（[51.28,7.33]，8）；
var url='1〕http://www.xxx.xxx.com/wms/';
var basemap=L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbndhrqcmz3n3gifq.rjcfig214ariislb6b5aw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒/街道-v11”
})
basemap.addTo（mymap）；
var featureLayer=L.tileLayer.wms（url{
层：“layerName”，
格式：'image/png'，
透明：正确
});
featureLayer.addTo（mymap）；

有一个名为closestLayer的功能。这可能会有帮助

mymap.on('click', onMapClick);
function onMapClick(e) {
    nearestLayer = L.GeometryUtil.closestLayer(mymap, layersToSearch, e.latlng)
    // It will return the layer, latlng of point on layer nearest to the 'click' and distance from the 'click'  }