单张自定义图标在缩放时调整大小。性能图标与divicon [英] Leaflet custom icon resize on zoom. Performance icon vs divicon

问题描述

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

I was trying to resize my custom icons when zooming in leaflet. I came up with two solutions for this. One using the L.Icon tag, the other one using L.divIcon. In both examples I only set 1 marker and group for readability

方法1 使用 L.Icon ：make groups带标记。然后在 zoomend 我使用 mygroup.eachLayer（function（layer）使用<$ c更改1层的所有图标$ c> layer.setIcon（）。我对所有群组重复此操作

Method 1 using L.Icon: make groups with markers. Then on zoomend i use mygroup.eachLayer(function (layer) to change all icons for 1 layer using layer.setIcon(). I repeat this for all groups

<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-property允许我更改图像大小。我为每个divIcon类执行此操作

Method 2 using L.divIcon: I make the icons and the different groups and add some CSS for each icon with a background-image property. Then on zoomend I simply use JQuery to change the css. background-size css-property allows me to change the image size. I do this for each divIcon class I have

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

I have barely any experience with javascript/jquery/...

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

Is the second option preferable as it does not require re-setting each icon? Would it improve performance when there is a large number of groups/icons?

推荐答案

我自己做了一个测试 performance.now（）。我测试了1024x1180（边界）自定义地图。曾经有676家制造商。然后用大约一半，最后用100个标记。性能是在 map.on（'zoomend'，function（）{函数。

I did a test myself using performance.now(). I tested on a 1024x1180 (bounds) custom map. Once with 676 makers. Then with about half of this and lastly with 100 markers. The performance was measured inside the map.on('zoomend', function() { function.

$ b内测量的。 $ b
• 对于676个标记， L.Icon 方法需要2500-2900毫秒来更新。对于 L.divIcon 这只是10-30毫秒。


• 这一次标记量的一半也减半。


• 大约100个标记（104） ） L.Icon 需要300-400毫秒才能更新。 L.divIcon 只需4-5毫秒。

• For 676 markers it took 2500-2900 milliseconds for the L.Iconmethod to update. For the L.divIconthis was only 10-30 milliseconds.
• Half the amount of markers also halved this time.
• For about 100 markers (104) L.Icon took 300-400 milliseconds to update. L.divIcon did the same in only 4-5 milliseconds.

我还计算了初始化的性能（ L.layerGroup（[...]）。 addTo（map））用于676个标记。 L.Icon 花了2200-2400毫秒。 L.divIcon 在80-95毫秒内做同样的事情。

I also timed the performance of the initialization (L.layerGroup([...]).addTo(map)) for 676 markers. L.Icon took 2200-2400 milliseconds. L.divIcon did the same in 80-95 milliseconds.

L.divIcon 显然做得更好（虽然它有点作弊，但我想我更喜欢使用这种方法。我不能直接想到 L.Icon 方法的原因preferr如果我们想要缩放

L.divIcon clearly does a lot better (as expected). While it is a bit of a cheat, I guess I would prefer using this method. I can not directly think of reasons why the L.Iconmethod would be preferred in case we want zooming

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

I noticed that according to Leaflet Documentation 'Icon' you can also assign a className to the Icons. Using css-properties width and height the same can be done as I did earlier for the divIcons, thus saving you a lot of loading time, yet allowing you to use all options linked to L.Icon. Your initialisation time will still be longer though.

这篇关于单张自定义图标在缩放时调整大小。性能图标与divicon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！