这个 NYT Mapbox 地图是如何渲染的？

Question

下面的地图是一个高分辨率的县级 Mapbox 地图，具有动态变化的数据。当尝试使用其他工具渲染相同的高分辨率县地图时，需要大量的处理能力。为什么不同？

此外，我相信他们正在使用自定义图块集来渲染县的形状，但是数据是如何传递到可视化中的呢？这里的任何见解将不胜感激。 NYT Map Link

Answer 1

你想知道的都在他们main.js script

他们不使用传单，而是使用 mapbox-gl-js sdkVersion:"2.0.1"

他们用自己的风格制作地图

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

然后他们根据加载的源创建填充层

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

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

map.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'
            ],
        }
    });

这个 NYT Mapbox 地图是如何渲染的？

How is this NYT Mapbox map rendered?

maps

leaflet

mapbox

mapbox-gl-js