空白地图瓦片 - 错误410已消失（Mapbox和Leaflet JS）

Question

我正在使用Leaflet JS和MapBox创建地图。我的浏览器显示如下:

地图根本没有显示，我的地图瓦片是空白的。在开发工具控制台中获取的错误是:

GET https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ 410 (Gone)
Image (async)       
createTile  @   TileLayer.js:158
_addTile    @   GridLayer.js:812
_update     @   GridLayer.js:709
_setView    @   GridLayer.js:570
_resetView  @   GridLayer.js:526
 onAdd      @   GridLayer.js:162
_layerAdd   @   Layer.js:114
whenReady   @   Map.js:1465
addLayer    @   Layer.js:176
addTo       @   Layer.js:52
(anonymous) @   maps.js:16

maps.js:16引用了下面代码段中的最后一行.addTo(map)：

let coordinates = [ 44.96, -93.2 ] 
let zoomLevel = 9
let map = L.map("college-map").setView(coordinates, zoomLevel)

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets',
accessToken: 'your-access-token'
}).addTo(map)

我该如何修复这个错误并成功显示地图？

- myverdict

Answer 1

Mapbox将URL架构从以下方式更改：

var map = L.map('map');

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
}).addTo(map);

至：

var map = L.map('map');

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
    tileSize: 512,
    maxZoom: 18,
    zoomOffset: -1,
    id: 'mapbox/streets-v11',
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
}).addTo(map);

网址 https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken} 和 {id: 'mapbox/streets-v11'} 已更改。

文档：Mapbox Leaflet 实现（右侧有一个带有“之前”和“之后（现在）”开关）。

URL 参数：静态瓷砖样式

默认样式

新的默认样式 ID：

• mapbox/streets-v11
• mapbox/outdoors-v11
• mapbox/light-v10
• mapbox/dark-v10
• mapbox/satellite-v9
• mapbox/satellite-streets-v11

- Falke Design

---

这应该是被接受的答案，因为它提供了修复方法以及详细的描述和参考资料。 - The Godfather

Answer 2

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/410

“410 Gone客户端错误响应代码表示在源服务器上不再可以访问目标资源，并且这种情况可能是永久性的。”如果您在浏览器中打开链接https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ，您将会看到这个：“{"message":"Classic styles are no longer supported; see https://blog.mapbox.com/deprecating-studio-classic-styles-d8892ac38cb4 for more information"}”。还可以参考以下内容：

https://docs.mapbox.com/help/troubleshooting/migrate-legacy-static-tiles-api/#will-the-apis-return-an-error-when-classic-styles-are-no-longer-supported

- Anatolii Suhanov

Answer 3

新的静态样式 API 已经取代了 Mapbox 的 mapbox.streets 瓦片。

旧的 URL: https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=

新的 URL: https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=

在 L.tileLayer() 对象的 id 参数中，还需将 mapbox.streets 替换为 mapbox/streets-v11。

官方文档： https://docs.mapbox.com/api/maps/#static-tiles

- francordie