如何在 Mapbox GL JS 中使用标准 OpenStreetMap 瓦片服务器？答案

【问题标题】：How to use standard OpenStreetMap tile servers with Mapbox GL JS?如何在 Mapbox GL JS 中使用标准 OpenStreetMap 瓦片服务器？
【发布时间】：2020-03-11 13:20:01
【问题描述】：

我正在尝试将 Mapbox GL 与普通的公共 OSM 切片服务器结合使用。在example of how to add a raster tile source 之后，我的最小示例如下所示：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Minimal OSM Test</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      border: solid 1px #000000;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = new mapboxgl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {
          osm: {
            type: 'raster',
            tiles: ["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"],
          }
        },
        layers: [{
          id: 'osm',
          type: 'raster',
          source: 'osm',
        }],
      }
    });
  </script>

</body>

</html>

不幸的是，这似乎不起作用：地图没有显示任何内容，并且浏览器控制台充满了被阻止的跨域请求错误。

使用 Leaflet 或 OpenLayers 等其他地图库，我可以毫无问题地连接到公共 OSM 服务器。

如何在 Mapbox GL JS 中完成这项工作？

【问题讨论】：

如果我从磁贴 url 中删除 {s}. 会起作用：jsfiddle.net/khrismuc/gk4pxm9b（根据控制台，它不会被任何东西替换，因此请求失败，因为它不是有效的 URL）
@ChrisG 确实可行，谢谢！我认为{s} 插值是从多个服务器中选择的标准的一部分。想把它变成答案吗？
你可能也想设置tileSize
我也有兴趣了解如何在不同的 OSM 子域之间进行负载平衡。

标签： javascript mapbox mapbox-gl-js mapbox-gl

【解决方案1】：

综合上述 cmets 中的见解，并添加有关归因的重要说明，此 JSFiddle 实现了您正在寻找的内容：https://jsfiddle.net/g1rwx8kp/。

进行了以下更改：

正如chris-g 所述，您应该从磁贴网址中删除{s}。
正如AndrewHarvey 所述，指定tileSize 是一种很好的做法。这里我包括了tileSize: 256。
您应该将字符串传递给attribution 选项，以便在地图上显示您的图块和数据源的相关属性。我在上面的 JSFiddle 中包含了一个示例，但我免责声明，我不能保证它的准确性，它可能应该进一步完善。根据有关瓷砖使用政策的文档：

OpenStreetMap 数据可供所有人免费使用。我们的磁贴服务器不是。

此外，“清楚地显示许可证属性”被列为使用磁贴服务器的要求。因此，我建议在频繁连接到公共 OSM 服务器之前仔细查看这些策略。或者，也许其他有使用这些磁贴服务经验的人可以提供更多见解！

【讨论】：