我在Mapbox Studio中创建了一个样式,并想知道是否可以在Leaflet项目中使用该样式。我有一个样式URL和我的访问令牌,但不是Mapbox ID。如何使用Leaflet进行此项工作?有可能吗?
样式网址:mapbox:// styles / gustavsvensson / cin1hwd9a00bncznomsx507se
答案 0 :(得分:1)
您需要通过在线或使用其企业系统Atlas Server上传到Mapbox来获取您的Mapbox ID。他们有一个免费帐户,您可以在其中放置并获取您的样式ID。
这是我使用在Studio中创建的一种地图样式进行测试的示例代码段。请注意,我需要提供密钥,我的用户名和Mapbox ID才能正确呈现切片。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Add styles made with Mapbox Studio to a Leaflet map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<Your access token here';
var map = L.map('map').setView([38.97416, -95.23252], 15);
// Add tiles from Mapbox Style API(https://www.mapbox.com/developers/api/styles/)
// Tiles are 512x512 pixels and are offset by 1 zoom level
L.tileLayer(
'https://api.mapbox.com/styles/v1/<mapbox username>/<style ID>/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
tileSize: 512,
zoomOffset: -1,
attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
</script>
</body>
</html>