传单-设置图标的缩放与超时刷新

Question

• 我想根据缩放来更改我的图标，我已经在工作了！但是，我还有一个setTimeout，它每7秒运行一次我的函数
• 问题是，每次运行函数时，图标都会被设置回bigBusIcon
• 我试着把标记和放大功能都放进去了，但我运气不好。。。非常感谢您的帮助

const mapBuses = function () {
    //other code is here
            L.geoJSON(getGeoJson(routeFilter), {
                onEachFeature: function (feature) {
                    let longitude = feature.coordinates[0];
                    let latitude = feature.coordinates[1];
                    let marker = L.marker([latitude, longitude], { icon: bigBusIcon, rotationAngle: feature.bearing })
                        .bindPopup(
                            `Bus Route: ${feature.routeNum}<br/>Speed: ${Math.round(feature.speed)} km/hr`
                        ).addTo(busLayer);
                    // set icon size based on zoom (although it resets every 7 seconds)
                    map.on('zoomend', function () {
                        var currentZoom = map.getZoom();
                        if (currentZoom >= 14) {
                            marker.setIcon(bigBusIcon);
                        }
                        else {
                            marker.setIcon(smallBusIcon);
                        }
                    });
                }
            });
        });
    // refresh every 7 seconds    
    setTimeout(mapBuses, 7000);
};

Answer 1

您可以在初始化层时检查当前缩放：

const mapBuses = function () {
    //other code is here
            L.geoJSON(getGeoJson(routeFilter), {
                onEachFeature: function (feature) {
                    let longitude = feature.coordinates[0];
                    let latitude = feature.coordinates[1];
                    // get current zoom
                    let currentZoom = map.getZoom();
                    // add condition to chose icon
                    let myIcon = currentZoom > 14 ? bigBusIcon : smallBusIcon;
                    // use myIcon variable in marker creation
                    let marker = L.marker([latitude, longitude], { icon: myIcon, rotationAngle: feature.bearing })
                        .bindPopup(
                            `Bus Route: ${feature.routeNum}<br/>Speed: ${Math.round(feature.speed)} km/hr`
                        ).addTo(busLayer);
                    // set icon size based on zoom (although it resets every 7 seconds)
                    map.on('zoomend', function () {
                        var currentZoom = map.getZoom();
                        if (currentZoom >= 14) {
                            marker.setIcon(bigBusIcon);
                        }
                        else {
                            marker.setIcon(smallBusIcon);
                        }
                    });
                }
            });
        });
    // refresh every 7 seconds    
    setTimeout(mapBuses, 7000);
};