如何获取传单 WMS 地图的最近特征?

Posted

技术标签:

【中文标题】如何获取传单 WMS 地图的最近特征?【英文标题】:How to get the nearest Feature of an leaflet WMS Map? 【发布时间】:2020-01-13 16:29:37 【问题描述】:

我对 Web 服务很陌生,但我遇到了一个问题。 我有一个与 WMS 链接的地图。 我添加了一个底图和我的 WMS 日期作为 tileLayer,并且在我的地图上正确显示。 现在,当我单击地图上的任意位置时,我想要最接近 PopUp 的功能。 我已经在网上搜索过,但找不到我理解的解决方案。 (https://gist.github.com/rclark/6908938) 谁能帮我解决这个问题?

这是我目前的代码:

    <!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>

【问题讨论】:

【参考方案1】:

Leaflet.GeometryUtil 有一个名为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'  

【讨论】:

以上是关于如何获取传单 WMS 地图的最近特征?的主要内容,如果未能解决你的问题,请参考以下文章

在传单中获取WMS的最小缩放级别

传单地图'polygonData.default(data)中的错误:不知道如何从类data.frame的对象中获取路径数据'

当多边形较小时,如何在 wms 层 Geoserver 中获取准确的特征信息?

获取可见的传单地图的边界框?

如何在反应传单中添加弹出到 WMS 层

使用传单JS建立月球地图的图像瓦片