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：风格没有完成加载

回答

相关问题