为什么 Carto 底图比 Mapbox 地图更高效？

Question

我正在关注 React 中 Deck.gl 的图标 tutorial。我将 MAP_STYLE 从 Carto 底图 https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json 换成了 Mapbox 底图 mapbox://styles/mapbox/light-v9。

我已经省略了很多代码，但这里是返回函数供参考：

  return (
    <DeckGL
      layers={[layer]}
      views={MAP_VIEW}
      initialViewState={INITIAL_VIEW_STATE}
      controller={{ dragRotate: false }}
      onViewStateChange={hideTooltip}
      onClick={expandTooltip}
    >
      <StaticMap
        reuseMaps
        mapStyle={mapStyle}
        preventStyleDiffing={true}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      />
      {renderTooltip(hoverInfo)}
    </DeckGL>

当我尝试在地图上移动时出现问题。当我使用 Carto 底图时，移动非常平滑，而 Mapbox 底图有明显的滞后。以下是一些用于说明的 GIF：

卡托：

地图框：

我想使用 Mapbox，因为我发现它们的图层更美观，但我似乎无法让它像一些示例那样高效，例如 this one。

我可以进行任何其他优化来提高性能吗？

Answer 1

对于遇到相同问题的任何人，似乎最简单的解决方法是从 Mapbox 样式构建器中导出样式，然后将主题作为 JSON 导入到您的 React 项目中。