Leaflet 和 mapbox 交通矢量集成显示黑色地图答案

【问题标题】：Leaflet and mapbox traffic vector integration shows black mapLeaflet 和 mapbox 交通矢量集成显示黑色地图
【发布时间】：2020-06-14 01:51:24
【问题描述】：

我想在地图上显示交通信息表单地图框。以下是代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="Content/leaflet.css" />
</head>
<body>
    <script src="Scripts/leaflet.js"></script>
    <script src="Scripts/leaflet-providers.js"></script>
    <h1>Traffic</h1>
    <div id="mapidTraffic" style="height:512px;width:512px">
    </div>
    <script type="text/javascript">
        var streetLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<redacted>', {
            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: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        });

        var trafficLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<redacted>', {
            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: 'mapbox.mapbox-traffic-v1',
        });

        var mymapTraffic = L.map('mapidTraffic', { layers: [streetLayer] });

        var baseMaps = {
            "Streets": streetLayer
        };
        var overlayMaps = {
            "Traffic": trafficLayer
        };

        L.control.layers(baseMaps, overlayMaps).addTo(mymapTraffic);

        mymapTraffic.setView([49.4513412, 11.1306931], 13);

    </script>

</body>
</html>

当我点击控件中的“交通”时，只有黑色背景和一些街道线。我也想看看街道地图。

我必须做什么？

打赌问候

沃尔克哈德

【问题讨论】：

标签： leaflet mapbox traffic

【解决方案1】：

使用Leaflet，您将加载完整的地图图块。因此，由于Mapbox Traffic data 仅由交通数据组成，当您添加交通图层时，您会看到街道线（交通数据）和黑色背景，因为没有包含基本街道地图。

相反，您应该create a new Mapbox style，其中包括基本街道地图和交通数据。然后，当您想查看交通数据和街道网格时，您可以通过此样式load the tiles。我创建了一个 CodePen here，它使用了我使用 Mapbox 基础街道地图和 Mapbox 交通数据创建的 Mapbox 样式。另外，代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
</head>

<body>
   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
  <h1>Traffic</h1>
  <div id="mapidTraffic" style="height:512px;width:512px">
  </div>
  <script type="text/javascript">
    var streetLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2tnaHl1Nm5kMGFuejMxbHYxdXNiZTdmaSJ9.NzXqTSavz0iRskwUmt5kPw', {
      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: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1
    });
    var trafficLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2tvdTNpd2s1MDlxMzJ4bXE2ajk4dGozcyJ9.zMjJBLrYRFLwEe2euOpG5g', {
      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: 'plmapbox/ck860jimr0kf91ip8l61a5g00',
      tileSize: 512,
      zoomOffset: -1
    });
    var mymapTraffic = L.map('mapidTraffic', {
      layers: [streetLayer]
    });
    var baseMaps = {
      "Streets": streetLayer
    };
    var overlayMaps = {
      "Traffic": trafficLayer
    };
    L.control.layers(baseMaps, overlayMaps).addTo(mymapTraffic);
    mymapTraffic.setView([48.85341, 2.3488], 13);
  </script>

</body>

</html>

免责声明：我在 Mapbox 工作

【讨论】：