Question

我正在尝试使用LeafletJS中的这个简单示例，但无法使用我的Mapbox公钥显示该图层。地图显示带有我的样品标记的灰色背景并弹出。

var map = L.map('map').setView([39.5, -105.5], 7);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
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,
id: 'test.project',
accessToken: 'copied.and.pasted.my.mapbox.key.here'
}).addTo(mymap);

L.marker([39.5, -105.5]).addTo(map)
.bindPopup('This is my first marker!')
.openPopup();

Answer 1

您在tilelayer上调用了.addTo(mymap);，但您的地图对象是map。使用此：.addTo(map);

您可能还需要稍微更改一下网址。在documentation here之后，我创建了一个基于样式的地图：

var map = L.map('map').setView([39.5, -105.5], 7);

L.tileLayer('https://api.tiles.mapbox.com/styles/v1/{username}/{id}/tiles/{tileSize}/{z}/{x}/{y}?access_token={accessToken}', {
  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,
  username: 'mapbox username',
  id: 'mapbox style id',
  accessToken: 'mapbox access token',
  tileSize: 512, 
  zoomOffset: -1
}).addTo(map);

L.marker([39.5, -105.5]).addTo(map)
  .bindPopup('This is my first marker!')
  .openPopup();

如果您要检索特定 tileset 的切片，请使用此（documentation）：

L.tileLayer('https://api.mapbox.com/v4/{tilesetId}/{z}/{x}/{y}.png?access_token={accessToken}', {
  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,
  accessToken: 'mapbox access token',
  tilesetId: 'mapbox tileset id'
}).addTo(map);

tilesetId的形式为username.id，它不是您项目的名称，您可以在编辑器/工作室中找到它。

如何显示Mapbox tile图层

1 个答案: