Mapbox GL JS：スタイルはロードされていません。

Question

私はマップを持っています。たとえば、あるスタイルから別のスタイルへと古典的に切り替えることができます。

レイヤーを追加するためにスタイルがロードされていることを知りたいとします。

docによれば、私はGEOJsonデータセットに基づいてレイヤーを追加するためにロードされるスタイルを待つことを試みました。

map.on('load')ページがロードされたときに完全に動作しますが、スタイルを変更するとエラーが表示されるので、map.on('styledataloading')からレイヤを追加すると、Firefoxでもメモリの問題が発生します。

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"] 
    }); 
    }); 
} 

とエラーは、次のとおりです：

私のコードは、私はスタイルがロードされていることをテストした後loadRegionMask()を呼ぶのに対し、

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) 

は、なぜ私はこのエラーが出るのですか？

Answer 1

私は同様の問題に直面し、この溶液になってしまった：私は交換するたびに続いて

// 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 
    } 
} 

またはその他の変更：私はスタイルが行われた場合の負荷をチェックする小さな関数を作成し

私はこのような機能を使用するアプリでレイヤー：

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

はstyle.loadイベントを使用してください。新しいスタイルが読み込まれるたびに1回トリガーされます。

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