传单自定义图标在Zoom上调整大小.性能图标与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 ：我制作图标和不同的组，并使用background-image属性为每个图标添加一些CSS。然后，在zoomend上，我只需使用jQuery更改CSS即可。background-size CSS - 毛皮使我可以更改图像大小。我为每个Divicon班级都这样做

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/...

第二个选项是优选的，因为它不需要重新设置每个图标？当有大量组/图标时，它会提高性能吗？

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方法是首选的原因，以防我们想要Zooming

编辑：我注意到，根据传单文档"图标"，您也可以为图标分配一个类名。使用CSS-Properties width和height可以像我之前为Divicons所做的一样，从而节省了很多加载时间，但允许您使用链接到L.Icon的所有选项。您的初始化时间仍然会更长。