Mapbox 瓦片未添加到 leaflet.js 地图？

Question

我正在尝试使用 leaflet.js 将 Mapbox 磁贴添加到我的项目中。我写了如下代码：

L.tileLayer('https://{s}.tiles.mapbox.com/v4/johirbuet.l2ohahk4/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(map);

但是我遇到了错误，页面中没有显示地图。这段代码有什么问题？我遵循了文档。 5月编码MapID：johirbuet.l2ohahk4

Answer 1

您需要将您的令牌添加到请求中，否则您将收到 404:

{"message":"Not Authorized - No Token"}

正确代码：

L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    subdomains: ['a','b','c','d'],
    mapId: 'myMapId',
    token: 'myUserToken'
});

Mapbox 瓦片未添加到 leaflet.js 地图？

Mapbox tile is not being added to leaflet.js map?

google-maps

leaflet

mapbox