Leaflet 不会加载 Mapbox 样式

Question

这是我第一次尝试 html

该代码与传单中的默认快速入门指南代码配合得很好

我现在已经替换了 'id' 和 'access token' 但地图现在是空的。

任何建议表示赞赏。

<html>
<head>

    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v1/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZWJheCIsImEiOiJjazl0dmJlMmkxZ3V0M2ptbzNyeG5oMGNzIn0.6kuDLwYzzbPdVjNWmOHbLA', {
        maxZoom: 18,
        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>',
        id: 'ebax/ck9txqzg10xfd1in1dl4t2czc'
    }).addTo(mymap);

</script>

</body>
</html>

Answer 1

将 https://api.tiles.mapbox.com/v1/{id}/{z}/{x}/{y}.png mapbox url 替换为 https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}

<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

</head>

<body>

  <div id="mapid" style="width: 600px; height: 400px;"></div>
  <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZWJheCIsImEiOiJjazl0dmJlMmkxZ3V0M2ptbzNyeG5oMGNzIn0.6kuDLwYzzbPdVjNWmOHbLA', {
      maxZoom: 18,
      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>',
      id: 'ebax/ck9txqzg10xfd1in1dl4t2czc'
    }).addTo(mymap);
  </script>

</body>

</html>

Leaflet 不会加载 Mapbox 样式

Leaflet will not load Mapbox style

javascript

leaflet

mapbox