Mapbox、传单：在 Zoom 上增加标记大小

Question

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

Answer 1

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

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

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 事件的所有事件侦听器，这与您自己循环标记（性能方面）几乎相同。

Mapbox、传单：在 Zoom 上增加标记大小

Mapbox,leaflet: Increase marker size on Zoom

leaflet

mapbox