Question

我用tilemill创建了一个地图，然后用MBUtil挖掘了瓷砖。我可以使用Leaflet正确显示切片但是我没有使用mapbox.js成功。我附上了代码，我做错了什么？

任何帮助将不胜感激！

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />-->
    <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

  </head>
  <body>
    <div id="map" style="width: 1000px; height: 1000px"></div>

    <!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> -->
    <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
    <script>

      //var tilesUrl = 'http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-   redditi-2012/{z}/{x}/{y}.png',
      //tilesLayer = new L.TileLayer(tilesUrl);
      //map = new L.Map('map');
      //map.addLayer(tilesLayer);
      //map.setView(new L.LatLng(39.5,-5.0), 6);

      var map = L.mapbox.map('map');
      tilesLayer = new L.mapbox.TileLayer({ "tilejson": "2.0.0",
        "tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi- 2012/{z}/{x}/{y}.png" ] ,
        "attribution": "franco"
      });
      tilesLayer.addTo(map);
      map.setView(new L.LatLng(39.5,-5.0), 6);

    </script>
  </body>
</html>

Answer 1

您可以尝试这种语法

<!DOCTYPE html>
<html>
 <head>
  <title>Leaflet Quick Start Guide Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
 </head>
<body>
 <div id="map" style="width: 1000px; height: 1000px"></div>

 <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
 <script>

  var map = L.mapbox.map('map');
  L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png', {
   "attribution": "franco"
    }).addTo(map);

  map.setView(new L.LatLng(39.5, 9), 6);
</script>
</body>
</html>

Answer 2

谢谢你多谢塞利姆，它的确有效！我想向前迈出一步，增加交互性（我用tilemill创建的地图是互动的），但我看不到工具提示！也许我再次得到错误的语法......

<!DOCTYPE html>
 <html>
 <head>
 <title>Leaflet Quick Start Guide Example</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
 </head>
 <body>
  <div id="map" style="width: 1000px; height: 1000px"></div>

  <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
  <script>

  var map = L.mapbox.map('map');
  //L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-   redditi-2012/{z}/{x}/{y}.png', {"attribution": "franco"}).addTo(map);
  L.mapbox.tileLayer({ "tilejson": "2.0.0",
 "tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png" ] }).addTo(map);
  var myGridLayer = L.mapbox.gridLayer({ "tilejson": "2.0.0",
  "tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.grid.json" ] }).addTo(map);
  var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);
 map.setView(new L.LatLng(39.5, 9), 6);
</script>
 </body>
 </html>

使用mapbox.js加载切片

2 个答案: