空白地图图块 - 错误 410 消失(Mapbox 和 Leaflet JS)
Posted
技术标签:
【中文标题】空白地图图块 - 错误 410 消失(Mapbox 和 Leaflet JS)【英文标题】:Blank map tiles - Error 410 gone (Mapbox & Leaflet JS) 【发布时间】:2021-01-12 08:25:46 【问题描述】:我正在使用 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
代码sn-p中的最后一行.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 © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets',
accessToken: 'your-access-token'
).addTo(map)
如何修复此错误并成功显示地图?
【问题讨论】:
【参考方案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'
已更改。
Doc:Mapbox Leaflet Implementaton(右侧是一个开关,带有 before 和 after(now))。
网址参数:Static Tiles Style
默认Styles
新的默认样式ID:
mapbox/streets-v11 mapbox/outdoors-v11 mapbox/light-v10 mapbox/dark-v10 mapbox/satellite-v9 mapbox/satellite-streets-v11【讨论】:
这应该是公认的答案,因为它实际上提供了修复以及详细的描述和参考。【参考方案2】:https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/410
"410 Gone client 错误响应码表示访问 目标资源在源服务器上不再可用,并且 这种情况很可能是永久性的。”
如果你在浏览器中打开你的链接https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ,你会得到这个:
"message":"不再支持经典样式;请参阅 https://blog.mapbox.com/deprecating-studio-classic-styles-d8892ac38cb4 了解更多信息”
另见:
https://docs.mapbox.com/help/troubleshooting/migrate-legacy-static-tiles-api/#will-the-apis-return-an-error-when-classic-styles-are-no-longer-supported
【讨论】:
【参考方案3】:Mapbox mapbox.streets
瓦片已被新的静态样式 api 弃用。
旧网址:https://api.tiles.mapbox.com/v4/id/z/x/y.png?access_token=
新网址: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
【讨论】:
以上是关于空白地图图块 - 错误 410 消失(Mapbox 和 Leaflet JS)的主要内容,如果未能解决你的问题,请参考以下文章