1

目前正在开发一个应用程序（地图），我想在 Leaflet 上使用 Tom Tom 平铺层。由于 Leaflet 的文档，我想坚持使用 Leaflet，而不是 Tom Tom。我成功地使用 Tom Tom 方法设置了地图，但我无法使用传单库添加切片图层。

我看不出我做错了什么。有人可以帮忙吗？

根据传单教程，代码应该像这样工作：https ://leafletjs.com/examples/quick-start/

Tom Tom tile map API url 可以从以下位置生成：https ://developer.tomtom.com/content/maps-api-explorer#/Vector/get_map__versionNumber__tile__layer___style___zoom___X___Y__pbf

`

// Creating a map instance with its center set to London with a zoom of 13
var mymap = L.map('map').setView([51.505, -0.09], 13);

// Accessing the tile layer from the TOMTOM site
L.tileLayer('https://api.tomtom.com/map/1/tile/basic/main/1/0/0.pbf?key=MY_API_KEY', {
  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',
  //accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
<!DOCTYPE html>
<html>

<head>
  <!-- Bootstrap css and scripts -->
  <link rel="stylesheet" href="./00_Local_Bootstrap\css\bootstrap.css">
  <script src="./00_Local_Bootstrap\js\bootstrap.js"></script>
  <script src="./00_Local_Bootstrap\jquery_3_4_1\jquery_3_4_1.js"></script>

  <!-- Leaflet css and scripts -->
  <link rel="stylesheet" type="text/css" href="./Leaflet\leaflet.css" />
  <script src="./Leaflet\leaflet.js"></script>

  <style media="screen">
    #map {
      width: 50vw;
      height: 50vh;
    }
  </style>

</head>

<body>


  <!-- Map Import-->

  <div class="container">
    <p>Here is the map</p>
    <div id='map'></div>

    <!-- Mymap script -->
    <script src="./welcome_page_leaflet.js"></script>

  </div>

</body>

</html>

` 传单文档使用的是 Mapbox，这就是为什么它们引用相应的访问令牌和 ID。这就是我评论它的原因。

地图不加载图块，我只得到地图应该在的空白屏幕。我错过了什么？

4

1 回答 1

1

看起来您正在尝试通过 Leaflet Tile Layer 显示矢量图块（带有 PBF 扩展名），这意味着光栅图块。

Tom Tom 也提供光栅图块：https ://developer.tomtom.com/maps-api/maps-api-documentation-raster/raster-tile

于 2019-09-09T18:24:57.553 回答