根据传单中的缩放级别调整自定义标记图标大小的最佳方法是什么?



我需要根据传单中的缩放级别调整一些自定义标记的大小。 "缩放"功能仅适用于圆圈。

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

map.on('zoomend', ...)仍然适用于其他类型的标记,但只有circleMarker具有setRadius()方法。 对于其他标记,您需要一种更改其大小的不同方法,例如使用新的iconSize属性重新添加标记的图标。 有关更多详细信息,请查看标记和图标的传单文档。

图标和圆标记的大小以像素为单位,缩放地图时通常保持不变。 如果需要它们保持恒定的地理大小,则可能需要使用一些转换方法来计算两个纬度/LNG点之间的像素数;这因纬度和缩放级别而异。

解决方案:

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 );
});

最新更新