javascript - 是否可以在 Leaflet 中使用 Mapbox studio 制作的样式?

标签 javascript css dictionary leaflet mapbox

我在 Mapbox Studio 中制作了一个样式,想知道是否可以在 Leaflet 元素中使用该样式。我有样式 URL 和访问 token ,但没有 Mapbox ID。我如何使用 Leaflet 进行这项工作?可能吗?

样式网址:mapbox://styles/gustavsvensson/cin1hwd9a00bncznomsx507se

最佳答案

您需要通过在线上传到 Mapbox 或使用他们的企业系统 Atlas Server 来获取您的 Mapbox ID。他们有一个免费帐户,您可以在其中放置它并获取您的风格 ID。

这是我使用在 Studio 中创建的一种 map 样式测试过的示例代码段,它可以正常工作。请注意,我需要提供 key 、我的用户名和 Mapbox ID 才能正确呈现图 block 。

<!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>

关于javascript - 是否可以在 Leaflet 中使用 Mapbox studio 制作的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36688517/

相关文章:

javascript - 通过 Confluence HTML 传递标准报告的 API key

javascript - 对象类型的 Flowtype 数组不允许额外的属性

java - Map<key, List/Set<key定义类型的对象>>

javascript - 我怎样才能滚动浏览内容并停留在段落上

html - 水平滚动但第一列固定的表格

c# - Silverlight C# 是否有将集合转换为文件以及相反的标准方法?

c# - MVC3 模型绑定(bind)器无法绑定(bind)属于我的 ViewModel 一部分的 Dictionary<string, bool>

javascript - 如何在单击按钮时检查多个范围 slider 的值,然后根据值执行某些操作?

javascript - 允许播放一次音频 html

css - 要查找字体名称?最接近的比赛?