Mapbox GL JS: Style wird nicht geladen

Question

Ich habe eine Karte, wo wir klassisch von einem Stil zum anderen wechseln können, zum Beispiel Straßen zu Satelliten.

Ich möchte informiert werden, dass der Stil geladen wird, um dann eine Ebene hinzuzufügen.

Gemäß der doc, ich habe versucht zu warten, dass der Stil geladen wird, um eine Schicht basierend auf einem GEOJson-Datensatz hinzuzufügen.

Das funktioniert perfekt, wenn die Seite geladen wird, die map.on('load') feuert, aber ich erhalte einen Fehler, wenn ich nur den Stil ändern, so beim Hinzufügen Layer aus map.on('styledataloading'), und ich bekomme sogar Speicherprobleme in Firefox.

Mein Code ist:

mapboxgl.accessToken = 'pk.token'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v10', 
    center: [5,45.5], 
    zoom: 7 
}); 

map.on('load', function() { 

    loadRegionMask(); 
}); 

map.on('styledataloading', function (styledata) { 

    if (map.isStyleLoaded()) { 
     loadRegionMask(); 
    } 
}); 

$('#typeMap').on('click', function switchLayer(layer) { 
    var layerId = layer.target.control.id; 

    switch (layerId) { 
     case 'streets': 
      map.setStyle('mapbox://styles/mapbox/' + layerId + '-v10'); 
     break; 

     case 'satellite': 
      map.setStyle('mapbox://styles/mapbox/satellite-streets-v9'); 
     break; 
    } 
}); 

function loadJSON(callback) { 

    var xobj = new XMLHttpRequest(); 
     xobj.overrideMimeType("application/json"); 

    xobj.open('GET', 'regions.json', true); 

    xobj.onreadystatechange = function() { 
     if (xobj.readyState == 4 && xobj.status == "200") { 
      callback(xobj.responseText); 
     } 
    }; 
    xobj.send(null); 
} 

function loadRegionMask() { 

    loadJSON(function(response) { 

    var geoPoints_JSON = JSON.parse(response); 

    map.addSource("region-boundaries", { 
     'type': 'geojson', 
     'data': geoPoints_JSON, 
    }); 

    map.addLayer({ 
     'id': 'region-fill', 
     'type': 'fill', 
     'source': "region-boundaries", 
     'layout': {}, 
     'paint': { 
      'fill-color': '#C4633F', 
      'fill-opacity': 0.5 
     }, 
     "filter": ["==", "$type", "Polygon"] 
    }); 
    }); 
} 

Und der Fehler ist:

Uncaught Error: Style is not done loading 
    at t._checkLoaded (mapbox-gl.js:308) 
    at t.addSource (mapbox-gl.js:308) 
    at e.addSource (mapbox-gl.js:390) 
    at map.js:92 (map.addSource("region-boundaries",...) 
    at XMLHttpRequest.xobj.onreadystatechange (map.js:63) 

Warum erhalte ich diesen Fehler während ich loadRegionMask() nach der Prüfung nennen, dass der Stil geladen wird?

Answer 1

ich ein ähnliches Problem konfrontiert und mit dieser Lösung endete:

ich eine kleine Funktion erstellt, die prüfen würde, wenn der Stil wurde getan Laden:

// Check if the Mapbox-GL style is loaded. 
function checkIfMapboxStyleIsLoaded() { 
    if (map.isStyleLoaded()) { 
    return true; // When it is safe to manipulate layers 
    } else { 
    return false; // When it is not safe to manipulate layers 
    } 
} 

Dann, wenn ich tauschen oder in anderer Weise modifizieren in der App Schichten verwende ich die Funktion wie folgt aus:

function swapLayer() { 
    var check = checkIfMapboxStyleIsLoaded(); 
    if (!check) { 
    // It's not safe to manipulate layers yet, so wait 200ms and then check again 
    setTimeout(function() { 
     swapLayer(); 
    }, 200); 
    return; 
    } 

    // Whew, now it's safe to manipulate layers! 
    the rest of the swapLayer logic goes here... 

} 

Answer 2

die style.load Ereignis verwenden. Es wird jedes Mal ausgelöst, wenn ein neuer Style geladen wird.

map.on('style.load', function() { 
    addLayer(); 
});