带有 CARTO 和 React 的 Deck.GL

编程问答 2022-05-15

问题描述

我正在尝试在 React 应用程序中使用带有 Deck.GL (@deck.gl/carto) 的 CARTO 底图 (@deck.gl/react)。为了渲染地图层，文档使用了来自 <StaticMap/> 的 MapBox 的 react-map-gl 组件。

但是，当我将 CARTO 的免费底图 BASEMAP.VOYAGER 作为属性传递给 <StaticMap 组件时，它拒绝显示地图，因为我没有 MapBox 访问令牌。

所以，我注册并获得了一个 MapBox 令牌，它运行良好，如下所示：

      <DeckGL
        style={{
          position: "relative",width: "100%",height: "600px",}}
        initialViewState={initViewState}
        controller={true}
        layers={layers}
        onClick={(evt) => console.log(JSON.stringify(evt.coordinate))}
        getTooltip={({ object }) =>
          object &&
          object.coordinates && {
            text: `Longitude: ${object.coordinates[0]}\nLatitude: ${object.coordinates[1]}\nCost: ${object.cost}`,}
        }
      >
        <StaticMap
          mapStyle={BASEMAP.DARK_MATTER}
          mapBoxApiAccesstoken={process.env.NEXT_PUBLIC_MAPBox_TOKEN}
        />
      </DeckGL>

但我想在不使用 MapBox 的情况下使用 CARTO 底图。这可能吗？似乎我可以获得 CARTO 底图的唯一方法是通过他们网站上的 Map Builder 工具构建地图，发布它，然后使用从中生成的链接然后使用它。但在将数据集链接到地图（即 .csv、URL、数据库、arcGIS 等）之前，我无法创建底图。现在，我没有。

所以我对如何在不使用 MapBox 的情况下实际访问和使用 CARTO 底图感到困惑。非常感谢任何提示或建议！

解决方法

解决方法是安装 5.3.11 版本，这样您的应用就不需要 Mapbox 令牌，that's due to internal use of Mapbox v2.0

yarn add react-map-gl@5.3.11
cartodbdeck.glmapboxmapboxreactjsreactjsreactjsreactjs