mapbox 访问令牌 - 我在哪里放置它？答案

【问题标题】：mapbox access token - where do i place it?mapbox 访问令牌 - 我在哪里放置它？
【发布时间】：2019-01-14 20:15:29
【问题描述】：

我想知道是否有人可以帮助我了解我将 mapbox 访问令牌放在哪里。我不相信我这样做是正确的。任何帮助将不胜感激

mapboxgl.accessToken = 'pk......';

var mapboxTiles = 
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map- 
zr0njcqy/{z}/{x}/{y}.png', {
    attribution: '<a href="http://www.mapbox.com/about/maps/" 
target="_blank">Terms &amp; Feedback</a>'
});

var map = L.map('map')
    .addLayer(mapboxTiles) 
    .setView([40.72332345541449, -73.99], 14);

【问题讨论】：

请检查这个例子的来源...在第一行你设置了像mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';mapbox.com/help/demos/how-mapbox-works/…这样的令牌
@Hackerman 感谢您的回复。似乎仍然无法正常工作...
您是否像此处显示的第一个示例一样实例化了新的 mapboxgl.Map({ .. }) ？：mapbox.com/mapbox-gl-js/api
你检查过 mapbox.com 吗？
看起来您正在混合使用 Mapbox-gl 和 mapbox.js（基于 Leaflet）API。首先确定要使用哪个库。

标签： javascript d3.js leaflet mapbox

【解决方案1】：

Leaflet 的quick start tutorial 回答了这个问题。让我引用那里的代码：

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 © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

请注意，URL 模板中大括号之间的任何内容都将替换为瓦片坐标或瓦片层自身选项中的值，如 Leaflet API documentation 中所述：

{s} 表示可用的子域之一（顺序用于帮助每个域限制的浏览器并行请求；子域值在选项中指定；a、b 或 c 默认情况下可以省略），{z} — 缩放级别，{x} 和 {y} — 平铺坐标。 {r} 可用于将“@2x”添加到 URL 以加载视网膜图块。您可以在模板中使用自定义键，这些键将从 TileLayer 选项中进行评估，如下所示：
 L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

因此，您还可以执行以下操作：

L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.my-mapbox-token-goes-here', {
    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 © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
}).addTo(mymap);

【讨论】：