這個 NYT Mapbox map 是如何渲染的？

Question

下面的map是一款高分辨率縣城Mapbox map，數據動態變化。 當嘗試使用其他工具渲染相同的高分辨率縣 map 時，需要大量的處理能力。 為什么這不一樣？

此外，我相信他們正在使用自定義圖塊集來呈現縣形狀，但是數據是如何傳遞到可視化中的呢？ 這里的任何見解將不勝感激。 NYT Map 鏈接

Answer 1

你想知道的都在他們的main.js 腳本中

他們不使用 leaflet 但 mapbox-gl-js sdkVersion:"2.0.1"

他們以自己的風格創造了 map

map$1 = new mapboxGl.Map({
        container: $wrap,
        style: 'mapbox://styles/nytgraphics/cjnxfd2cy57nq2rqj8o3d7sl2',
        scrollZoom: false,
        boxZoom: false,
        maxZoom: 10
    });

然后他們根據加載的源創建填充層

function addSources() {
    Object.keys(tilesets).forEach((name) => {
        map$1.addSource(name, {
            type: 'vector',
            url: `mapbox://${tilesets[name]}`,
            promoteId: 'geoid'
        });
    });

    map$1.on('sourcedata', () => {
        addLayers();
    });
}
...
...

map$1.addLayer({
        id: 'counties',
        type: 'fill',
        source: 'counties',
        'source-layer': 'USA_Counties_With_RI',
        paint: {
            'fill-color': [
                'case',
                ['has', ['get', 'geoid'], ['literal', colorLookup]],
                ['get', ['get', 'geoid'], ['literal', colorLookup]],
                '#cccccc'
            ],
        }
    });