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

问题描述

我正在 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 一个）那样高效。

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

解决方法

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