Performance Issue: Ruckelige Animationen und Browser-Überlastung bei 3D-Gebäuden (v1.1.1)

[olien]

Claude schreibt das dazu aber es hilft irgendwie nicht wirklich bei mir...

🐛 Performance Issue: Ruckelige Animationen und Browser-Überlastung bei 3D-Gebäuden (v1.1.1)

Problem Description

Nach dem Update auf Version 1.1.1 (16. April 2026) sind die Karten-Animationen extrem ruckelig geworden und die 3D-Gebäude werden nicht mehr korrekt dargestellt. Der Browser wird stark ausgelastet und die Performance ist deutlich schlechter als in vorherigen Versionen.

Environment

• Vector Maps Version: 1.1.1
• REDAXO Version: 5.20.0
• Browser: Alle Browser betroffen
• Map Style: liberty, bright, positron (Vektorstile mit 3D-Gebäuden)

Steps to Reproduce

1. Erstelle eine <vector-map> mit 3D-Gebäuden (3d Attribut)
2. Verwende flyTo() oder andere Kamera-Animationen
3. Beobachte ruckelige/störende Animationen und hohe CPU-Last

Expected Behavior

• Flüssige Kamera-Animationen wie in v1.1.0 und früher
• 3D-Gebäude werden korrekt dargestellt
• Normale Browser-Performance

Actual Behavior

• Ruckelige, störende Animationen
• 3D-Gebäude verschwinden oder werden nicht geladen
• Hohe CPU-Auslastung, Browser wird langsam

Root Cause Analysis 🔍

Das Problem liegt in der Zeile 488 von assets/build/vectormaps.js:

// PROBLEMATISCH - wird bei JEDEM styledata Event ausgeführt:
map.on('styledata', () => { if (!_isSatellite()) vmFixExtrusionLayers(map); });

Die vmFixExtrusionLayers() Funktion wird bei jedem styledata Event ausgeführt, was sehr häufig passiert (bei jedem Tile-Load, Theme-Änderung, etc.). Diese Funktion:

1. Iteriert über alle Layer im Style
2. Führt JSON-Vergleiche durch (JSON.stringify())
3. Ruft setPaintProperty() auf (was weitere styledata Events feuert)
4. Führt zu einer Performance-Schleife

Proposed Solution 💡

Die vmFixExtrusionLayers() sollte nur einmal nach dem initialen Style-Load ausgeführt werden, nicht bei jedem Event:

// LÖSUNG - nur einmal ausführen:
let extrusionLayersFixed = false;
map.on('styledata', () => { 
    if (!_isSatellite() && !extrusionLayersFixed && map.isStyleLoaded()) {
        vmFixExtrusionLayers(map);
        extrusionLayersFixed = true;
    }
});

Workaround 🔧

Bis zu einem offiziellen Fix kann folgendes Script verwendet werden:

// Performance-Fix Script (nach vectormaps.js laden)
(function() {
    if (typeof vmBuildMap === 'function') {
        const originalVmBuildMap = vmBuildMap;
        window.vmBuildMap = function(el) {
            const result = originalVmBuildMap.apply(this, arguments);
            const map = el._vmMap;
            if (map) {
                let extrusionLayersFixed = false;
                map.off('styledata'); // Alte Handler entfernen
                map.on('styledata', () => {
                    if (!extrusionLayersFixed && map.isStyleLoaded()) {
                        vmFixExtrusionLayers(map);
                        extrusionLayersFixed = true;
                    }
                });
            }
            return result;
        };
    }
})();

Impact

• Betroffene Features: Alle Karten mit 3D-Gebäuden und Animationen
• Performance: Dramatische Verbesserung nach dem Fix
• User Experience: Flüssige Animationen vs. ruckelige Darstellung

Files to Modify

• assets/build/vectormaps.js (Zeile 488 und ähnliche Stellen)
• Eventuell auch vectormaps.min.js entsprechend aktualisieren

---

Danke für das großartige AddOn! Die Performance-Verbesserung in v1.1.1 für die fill-extrusion Warnungen ist super, aber die Implementation braucht noch etwas Feintuning für optimale Performance. 🙏

[olien]

Ich hab jetzt wieder die Version 1.0.0 installiert. Die erzeugt zwar die JS Warnings; dafür läuft es flüssig. Kann von mir aus so bleiben. Kann ja nicht immer erwarten, dass du alles fixt.

[skerbis]

@olien Danke ist gefixt