問題描述

我正在使用 Leaflet JS 和 MapBox 創建地圖.我的瀏覽器顯示如下:

I am using Leaflet JS and MapBox to create a map. My browser displays as below:

地圖根本不顯示，我的地圖圖塊是空白的.我在開發工具控制臺中遇到的錯誤是:

The map does not show at all, my map tile is blank. The errors that I get in the dev tools console is:

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

The maps.js:16 above references the last line .addTo(map) in the maps.js code snippet below:

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)

如何修復此錯誤并成功顯示地圖?

How do I fix this error and display the map successfully?

推薦答案

Mapbox 將 url 架構從:

Mapbox changed the url schema from:

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 Implementaton (右側是一個帶有 before 和 after(now) 的開關).

Doc: Mapbox Leaflet Implementaton (On the right side is a switch with before and after(now)).

網址參數:靜態瓷磚樣式

默認樣式

新的默認樣式ID:

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

這篇關于空白地圖圖塊 - 錯誤 410 消失(Mapbox 和 Leaflet JS)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！