Mapbox GL JS：風格沒有完成加載

我有一張地圖，我們可以經典地從一種風格切換到另一種風格，例如街道到衛星。Mapbox GL JS：風格沒有完成加載

我想知道樣式被加載然後添加一個圖層。

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

和錯誤是：

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)

，而我測試的風格被加載後調用loadRegionMask()爲什麼我得到這個錯誤？

來源

2017-06-06 2ndGAB

的[風格尚未完成加載：Mapbox GL JS]可能的複製（https://stackoverflow.com/questions/40557070/style-is-not-done-loading-mapbox-gl-js） –

我正面臨着類似的問題，並結束了與此解決方案：

我創建了一個小功能，將檢查樣式做負載：每當我換或

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

}

來源

2017-11-15 17:09:13 Bwyss

是的，我做了同樣的事情，等待Mapbox團隊修復這個錯誤。 – 2ndGAB

我也在使用這個hack，但是從MapBox v0.42.1開始，僅僅檢查'isStyleLoaded'是不夠的。我目前正在做'typeof map.getSource（'foo'）=== undefined'。（FWIW，我想另外一個答案是正確的，最好是在地圖和樣式加載完成之前，讓代碼完全不運行。） – Nelson

使用style.load事件。每次新樣式加載時它都會觸發一次。

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

來源

2017-11-18 04:05:02

Mapbox GL JS：風格沒有完成加載

回答

相關問題