Leaflet и mapbox traffi c Векторная интеграция показывает черную карту - PullRequest
Новая
       31

Leaflet и mapbox traffi c Векторная интеграция показывает черную карту

1 голос
/ 01 марта 2020

Я хочу отобразить информационную форму Traffi c на карте. Ниже приведен код:

</p> <pre><code> <!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>

Когда я нажимаю «Traffi c» в элементе управления, появляется только черный фон с некоторой уличной линией. Я тоже хочу посмотреть карту улиц.

Что мне делать?

ставки на

Волкхард

1 Ответ

0 голосов
/ 24 марта 2020

С Leaflet вы загружаете полные фрагменты карты друг на друга. Поэтому, поскольку данные Mapbox Traffi c состоят только из данных traffi c, при добавлении слоя traffi c вы видите линии улиц (данные traffi c) и черный фон, так как нет базовой карты улиц.

Вместо этого вы должны создать новый стиль Mapbox , который включает в себя как базовую карту улиц, так и данные о трафике c. Затем вы можете загрузить плитки из этого стиля, когда вы хотите увидеть трафик c data и сетку улиц. Я создал CodePen здесь , который использует стиль Mapbox, который я создал как с базовой картой улиц Mapbox, так и с данными Mapbox Traffi c. Кроме того, код ниже: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
</head>

<body>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" 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.eyJ1IjoicGxtYXBib3giLCJhIjoiY2s3MHkzZ3VnMDFlbDNmbzNiajN5dm9lOCJ9.nbbtDF54HIXo0mCiekVxng', {
      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.eyJ1IjoicGxtYXBib3giLCJhIjoiY2s3MHkzZ3VnMDFlbDNmbzNiajN5dm9lOCJ9.nbbtDF54HIXo0mCiekVxng', {
      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([49.4513412, 11.1306931], 13);
  </script>

</body>

</html>

Отказ от ответственности: я работаю в Mapbox

...