Question

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

使用 L.Icon

方法1 ：使用标记创建组。然后在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>

使用 L.divIcon

方法2 ：我制作图标和不同的组，并为每个带有background-image属性的图标添加一些CSS。然后在zoomend上我只使用JQuery来改变css。 background-size css-property允许我更改图像大小。我为每个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显然做得更好（如预期的那样）。虽然它有点作弊，但我想我更喜欢使用这种方法。我不能直接想到为什么{？}}方法在我们想要缩放

的情况下是首选的原因

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

单张自定义图标在缩放时调整大小。效果图标与divicon

1 个答案: