Mapbox，传单:在“缩放"上增加标记大小 [英] Mapbox,leaflet: Increase marker size on Zoom

问题描述

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

How can I increase the size of all markers when we zoom in the map? I know we can use map.on('zoomend', function() {}); and change the icon size inside the function.But I have a lot of markers and looping through all of them and changing them individually doesn't seem like a good idea.

推荐答案

在每个zoomend事件上循环遍历一组标记没有问题.为什么听起来不是个好主意?

There is nothing wrong with looping through a set of markers on every zoomend event. Why doesn't it sound like a good idea?

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

An alternative to looping through markers is to extend the L.Marker class to do the work for you, something like:

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事件的事件侦听器，这与从性能上遍历标记几乎相同(在性能方面).

In this case, the Leaflet code will implicitly loop through all the event listeners for the zoomend event, which is pretty much the same (performance-wise) as looping through the markers yourself.

这篇关于Mapbox，传单:在“缩放"上增加标记大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！