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

Question

我正在尝试将 Mapbox GL 与普通 public 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 等其他地图库，我可以毫无问题地连接到 public OSM 服务器。

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

Answer 1

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

进行了以下更改：

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

OpenStreetMap data is free for everyone to use. Our tile servers are not.

此外，"clearly display license attribution" 被列为使用磁贴服务器的要求。因此，我建议在频繁连接到 public OSM 服务器之前仔细查看这些政策。或者，也许有使用这些磁贴服务经验的其他人可以提供更多见解！

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

How to use standard OpenStreetMap tile servers with Mapbox GL JS?

javascript

mapbox

mapbox-gl

mapbox-gl-js