OverPassLayer 标记的传单性能不佳

问题描述

我目前在使用 Overpass 库时遇到了我的传单地图性能不佳，尤其是在地图上移动时，尽管标记不多（少于 100）。这仍然是将缩放级别限制为 13 的问题。

这是一个简单的例子：

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="">
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
        <script src="OverPassLayer.bundle.js"></script> 
    </head>
    <body>
        <div id="map" style="width: 100%; height: 90%; position: relative; outline: none;"></div>

        <script>
            var tiles = L.tileLayer('https://a.tile.openstreetmap.de/{z}/{x}/{y}.png',{
            minZoom: 15,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }),latlng = L.latLng(52.5207,13.4093);

            var map = L.map('map',{center: latlng,zoom: 17,layers: [tiles],maxZoom: 18,preferCanvas: false,});

            var icon = new L.Icon({
                iconUrl: 'leaf-green.png',//https://leafletjs.com/examples/custom-icons/leaf-green.png
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',iconSize: [25,41],iconAnchor: [12,popupAnchor: [1,-34],shadowSize: [41,41]
            });

            var opl = new L.OverPassLayer({
                query: 'node["amenity"="bench"]({{bBox}});out;',//show all Benches on Map
                markerIcon: icon,minZoom: 13,});

            map.addLayer(opl);
        </script>
    </body>
</html>

也许 markercluster 可以解决这个问题，但是如何将 Overpass 中的 Positions 添加到标记集群层？

是否有其他解决方案？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript leaflet leaflet.markercluster openstreetmap openstreetmap overpass-api

OverPassLayer 标记的传单性能不佳

问题描述

解决方法

相关问答