空白地图块 - 错误 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 引用下面 maps.js 代码片段中的最后一行 .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)

如何修复此错误并成功显示地图？

Answer 1

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

"410 Gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely to be permanent."

如果您在浏览器中打开 link 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

Answer 2

Mapbox mapbox.streets 已弃用新静态样式的图块 api。

旧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-v11 替换为 mapbox.streets。

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

Answer 3

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);

url https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken} 和 {id: 'mapbox/streets-v11'} 改变了。

文档：Mapbox Leaflet Implementaton（右边是前后（现在）的开关）。

Url 参数：Static Tiles Style

默认Styles

新的默认样式 ID：

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

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

Blank map tiles - Error 410 gone (Mapbox & Leaflet JS)

html

javascript

client-side-scripting

leaflet

mapbox