react-leaflet 不加载磁贴和 gilving 403 请求错误

Question

我正在将 react-leaflet 与图块提供商 Stadia OSM bright 一起使用。当我运行它在本地显示图块但是当我构建并上传到服务器时它停止加载图块并开始发出请求 403 禁止错误。我有一个 API 键，但没有找到将它放在组件中的任何解决方案。这是一个代码示例

render() {
const headeris = {"Authorization": "Stadia-Auth "+this.state.authkey}
return (
  <LeafletMaps
    center={[this.state.lat, this.state.lng]}
    zoom={12}
    maxZoom={17}
    attributionControl={true}
    zoomControl={true}
    doubleClickZoom={true}
    scrollWheelZoom={true}
    dragging={true}
    animate={true}
    easeLinearity={0.5}
  >
    <TileLayer 
    url="https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png"
    attribution= '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    />
    {this.state.markers.map((position, index) => (
      <Marker
        key={`marker-${index}`}
        position={[position[0][4], position[0][5]]}
      >
        <Popup>
          <p>{position[0][0]}</p>
          <a href={`/admin/calender/${position[0][2]}`}>Book now</a>
        </Popup>
      </Marker>
    ))}
  </LeafletMaps>
);

Answer 1

一般描述和替代解决方案（有关 Api 插入的相当完整的解决方案，请参阅下面的 user2589273 答案），我一开始也被骗了，但现在都解决了。正如 Stadia Maps 在其 Api 密钥页面中所述，“您可以在本地开始开发，无需任何努力或成本。您可以立即开始使用本地主机或 127.0.0.1 上的网络服务器运行。一次你准备好部署，你可以免费注册”。请参考 https://docs.stadiamaps.com/#api-keys , 所以如果你在生产中使用它，你需要注册，他们有一个免费计划（非商业每天最多 2500 个请求）。请注意，您不需要 api 密钥，因为他们有另一种解决方案，包括提供您的域名，以便他们可以跟踪您的流量。

Answer 2

其他人的部分 如前所述，如果不在本地开发，您需要先注册以获得 API 密钥。从你的问题中我可以看出你已经这样做了，并且在询问一旦你拥有密钥后将密钥插入哪里。

注册后即可

使用显示的仪表板将您的网站域添加到 Stadia 白名单
但是，如果像我一样您没有使用特定的网站或位置，您可以 将 API 键附加到 URL.注意：与通常的 ?apikey= 语法不同，Stadia 选择使用下划线 ?api_key=（这也让我很吃惊！）。

这意味着您需要按以下方式更改代码才能使其正常工作：

<TileLayer 
    url="https://tiles.stadiamaps.com/tiles/osm_bright/
    {z}/{x}/{y}{r}.png?api_key=your_api_key_goes_here"
   
<... rest of code ...>

希望这能解决您的问题 - 好黑客！

Answer 3

Stadiamaps 还支持在 API 键旁边添加域。创建属性时，您可以选择生成 API 密钥或添加域。使用 javascript 为您的网站提供服务时，请选择域。因为您通常不想暴露您的密钥。

react-leaflet 不加载磁贴和 gilving 403 请求错误

react-leaflet not loading tiles and gilving 403 request error

leaflet

react-leaflet