[英]How to use standard OpenStreetMap tile servers with Mapbox GL JS?
我正在尝试将 Mapbox GL 与普通的公共 OSM 切片服务器结合使用。 遵循如何添加光栅图块源的示例,我对一个最小示例的看法如下所示:
<!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 服务器之前仔细查看这些策略。 或者,也许其他有使用这些瓷砖服务经验的人可以提供更多见解!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.