gpt4 book ai didi

javascript - 空白 map 图 block - 错误 410 消失(Mapbox 和 Leaflet JS)

转载 作者:行者123 更新时间:2023-12-03 06:52:39 25 4
gpt4 key购买 nike

我正在使用 Leaflet JS 和 MapBox 创建 map 。我的浏览器显示如下:
Blank map tiles with MapBox
map 根本不显示,我的 map 图 block 是空白的。我在开发工具控制台中得到的错误是:
Error messages in console

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)maps.js下面的代码片段:
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)
如何修复此错误并成功显示 map ?

最佳答案

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 Implementaton (右侧是带有之前和之后(现在)的开关)。
网址参数: Static Tiles Style
默认 Styles
新的默认样式 ID:
  • map 框/街道-v11
  • map 盒/户外-v11
  • mapbox/light-v10
  • mapbox/dark-v10
  • map 盒/卫星-v9
  • map 框/卫星街道-v11
  • 关于javascript - 空白 map 图 block - 错误 410 消失(Mapbox 和 Leaflet JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64073635/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com