我正在尝试将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中使之工作？
综合以上注释中的见解，并添加有关归因的重要说明，此JSFiddle可以实现您正在寻找的目标：https://jsfiddle.net/g1rwx8kp/。
进行了以下更改：
{s}。tileSize是一种好习惯。我在这里包括了tileSize: 256。您应该将字符串传递给attribution选项，以便在地图上显示图块和数据源的相关属性。我在上面的JSFiddle中包含了一个示例，尽管正如我不愿声明的那样，我无法保证其准确性，可能应该进一步完善。根据有关磁贴使用策略的文档：
OpenStreetMap数据可供所有人免费使用。我们的磁贴服务器不是。
此外，列出了“清楚地显示许可证归属”作为使用切片服务器的要求。因此，我建议您仔细检查这些策略，然后再频繁连接到公共OSM服务器。或者，也许其他有使用这些平铺服务经验的人可以提供更多见解！