传单自定义图标在缩放时调整大小。性能图标 vs divicon

Question

我试图在放大传单时调整自定义图标的大小。为此，我想出了两个解决方案。一个使用 L.Icon 标签，另一个使用 L.divIcon。在这两个示例中，我只设置了 1 个标记和组以提高可读性

方法 1 使用 L.Icon：使用标记进行分组。然后在 zoomend 上，我使用 mygroup.eachLayer(function (layer) 使用 layer.setIcon() 更改 1 层的所有图标。我对所有组重复此操作

<script>
// Setting map options
....

// Setting Icon
var normalicon = L.icon({
    iconUrl: 'icon1.jpg',
    iconSize:     [40,40],
    iconAnchor:   [20,20],
    popupAnchor:  [0,-20] 
    });


// Create a group
var normalLayer = L.layerGroup([
    L.marker([200,200], {icon:normalicon})
]).addTo(map);

// Resizing on zoom
map.on('zoomend', function() {

    // Normal icons
    var normaliconresized = L.Icon.extend({
        options: {
            iconSize: [20*(map.getZoom()+2), 20*(map.getZoom()+2)], // New size!
            iconAnchor:   [20,20],
            popupAnchor:  [0,-20]
        }
    });

    var normaliconchange = new normaliconresized({iconUrl: 'icon1.jpg'})
    normalLayer.eachLayer(function (layer) {
        layer.setIcon(normaliconchange);
    });

    .... Do the same for the other groups
});             
</script>

方法 2 使用 L.divIcon：我制作图标和不同的组并添加一些 CSS对于带有 background-image 属性的每个图标。然后在 zoomend 上，我只是使用 JQuery 来更改 css。 background-size css-属性允许我更改图像大小。我为我拥有的每个 divIcon class 执行此操作

Css
.iconsdiv{
    width:20px; height:20px;
    background-image:url("icon2.jpg");
    background-size: 20px 20px;
}


Script
<script>
// Setting map options
....


// Setting Icon

var divicon = L.divIcon({className: 'iconsdiv', iconSize: null }); // Explicitly set to null or you will default to 12x12


// Create a group
var divLayer = L.layerGroup([
    L.marker([200,200], {icon:divicon})
]).addTo(map);


// Resizing on zoom
map.on('zoomend', function() {

    var newzoom = '' + (20*(map.getZoom()+2)) +'px';
    $('#map .iconsdiv').css({'width':newzoom,'height':newzoom,'background-size':newzoom + ' ' + newzoom}); 

     ... repeat for the other classes
});


</script>

我对 javascript/jquery/...

几乎没有任何经验

第二个选项是否更可取，因为它不需要重新设置每个图标？当有大量groups/icons时它会提高性能吗？

Answer 1

我自己使用 performance.now() 进行了测试。我在 1024x1180（边界）自定义地图上进行了测试。曾经有676个创客。然后用大约一半，最后用 100 个标记。性能是在 map.on('zoomend', function() { 函数内部测量的。

对于 676 个标记，L.Icon方法更新需要 2500-2900 毫秒。对于 L.divIcon这只有 10-30 毫秒。
减半的标记量这次也减半了
大约 100 个标记 (104) L.Icon 需要 300-400 毫秒来更新。 L.divIcon 只用了 4-5 毫秒就完成了同样的操作。

我还对 676 个标记的初始化 (L.layerGroup([...]).addTo(map)) 性能进行了计时。 L.Icon 耗时 2200-2400 毫秒。 L.divIcon 在 80-95 毫秒内完成了相同的操作。

L.divIcon 显然做得更好（正如预期的那样）。虽然有点作弊，但我想我更喜欢使用这种方法。我无法直接想到为什么在我们想要缩放时首选 L.Icon 方法的原因

编辑：我注意到，根据 Leaflet Documentation 'Icon'，您还可以为图标分配一个类名。使用 css-properties width 和 height 可以像我之前对 divIcons 所做的一样完成，从而节省大量加载时间，但允许您使用链接到的所有选项L.Icon。你的初始化时间仍然会更长。

传单自定义图标在缩放时调整大小。性能图标 vs divicon

Leaflet custom icon resize on zoom. Performance icon vs divicon

css

jquery

marker

leaflet