根據 leaflet 中的縮放級別調整自定義標記圖標大小的最佳方法是什么？

Question

我需要根據 leaflet 中的縮放級別調整一些自定義標記的大小。 'zoomend' function 僅適用於圓形。

map.on('zoomend', function() {   
        )            
        var currentZoom = map.getZoom();
        myMarker.setRadius(currentZoom );
    });

Answer 1

map.on('zoomend', ...)仍然適用於其他類型的標記，但只有circleMarker具有setRadius()方法。 對於其他標記，您需要一種不同的方式來更改它們的大小，例如使用新的iconSize屬性重新添加標記的圖標。 查看Leaflet文檔以了解更多詳細信息。

圖標和圓形標記采用像素大小，當您縮放 map 時，通常保持不變。 如果您需要它們保持恆定的地理大小，您可能需要使用一些轉換方法來計算兩個 lat/lng 點之間的像素數； 這隨緯度和縮放級別而變化。

Answer 2

解決方案：

var myIcon= L.Icon.extend({
        options: {
            iconUrl: 'icon.png',
            iconSize: [7.5, 7.5],
            iconAnchor: [0, 0]
        }
    });

var ic = new myIcon({iconSize: [7.5, 7.5]});
    var marker = L.marker([-15.7745457, -48.3575684], {icon: ic}).addTo(map);

map.on('zoomend', function() {
var actualZoom = map.getZoom();
var newSize = 60/((20 - actualZoom )*2);

var resizedIcon = new myIcon({iconSize: [newSize ,newSize ]});      
marker.setIcon(resizedIcon );
});