空白的地图图块-错误410消失了Mapbox和Leaflet JS

如何解决空白的地图图块-错误410消失了Mapbox和Leaflet JS

我正在使用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)

如何解决此错误并成功显示地图？

解决方法

Mapbox从以下位置更改了网址架构：

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}',tileSize: 512,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（在右侧是一个在之前和之后（现在）的开关）。

网址参数：Static Tiles Style

默认Styles

新的默认样式ID：