leaflet - Mapbox，传单 : Increase marker size on Zoom

Question

当我们放大 map 时，如何增加所有标记的大小？我知道我们可以使用 map.on('zoomend', function() {}); 并更改函数内的图标大小。但是我有很多标记并循环遍历所有标记，单独更改它们似乎不是一个好主意。

Answer 1

在每个 zoomend 事件上循环访问一组标记并没有什么问题。为什么这听起来不是一个好主意？

循环标记的另一种方法是扩展 L.Marker 类来为您完成这项工作，例如:

L.Marker.Autoresizable = L.Marker.extend({

    onAdd: {
        map.on('zoomend', this._changeIcon, this);
    },

    onRemove: function(map) {
        map.off('zoomend', this._changeIcon, this);
    },

    _changeIcon: function(ev) {
        var zoom = this._map.getZoom();

        if (zoom <= 10) {
            this.setIcon(...);
        } elseif (zoom > 10 && zoom <= 15) {
            this.setIcon(...);
        } else {
            this.setIcon(...);
        }

    }

});

L.marker.autoresizable = function(latlng, options) {
    return new L.Marker.Autoresizable(latlng, options);
}

在这种情况下，Leaflet 代码将隐式循环遍历 zoomend 事件的所有事件监听器，这与您自己循环遍历标记几乎相同(性能方面)。