Question

我正在尝试加载标准的传单地图，以便我可以在其上覆盖geojson文件。如果我使用另一张地图，地图会完美加载，但它不适用于传单。我得到的错误是

GET http://a.tiles.mapbox.com/v3/MapID/7/40/47.png 404 (Not Found)

我的假设是选择不同的地图根本不会影响很多，因为我只是更换画布以放置我的geojson（显然我错了）。有人可以解释一下为什么这不起作用？我的代码在下面，我评论了我在哪里更改了地图

<!DOCTYPE html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
   <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="http://d3js.org/queue.v1.min.js"></script>
   <script src="http://d3js.org/topojson.v1.min.js"></script>


   <style>
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }


      .key path {
        display: none;
      }

   </style>
</head>

<body>
   <div id="map" style="width: 100%; height: 100%"></div>
   <script>
      queue()
          .defer(d3.json, 'med.json') 
          .await(makeMap)

      function makeMap(error, data) {
        var color = d3.scale.linear()
              .domain([10, 400])
              .range(['#F0F0D0', '#930F16']);

          // try changing the coordinates to 41.9, -431 and see happens
          var map = L.map('map').setView([41.9, -93.5], 4); 


          // ERROR BEGINS HERE **
          L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
            //Tried changing this to: http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png'
              maxZoom: 18,
              minZoom: 1,
              attribution: 'Map tiles by <a href="http://www.mapbox.com/m">Mapbox</a> Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
          }).addTo(map);




          function style(feature) {
            return {
                fillColor: color(feature.properties.count),
                weight: 1,
                opacity: 0.2,
                color: 'black',
                fillOpacity: 0.5
            };
          }

      function highlightFeature(e) {
        var layer = e.target;
        layer.setStyle({
          weight: 10,
          color: '#666',
          dashArray: '',
          fillOpacity: 0.5
        });
        if (!L.Browser.ie && !L.Browser.opera) {
          layer.bringToFront();
        }
        info.update(layer.feature.properties);
      }

      var geojson;

      function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
      }

      function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
      }

      function onEachFeature(feature, layer) {
        layer.on({
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          click: zoomToFeature
        });
      }


      geojson = L.geoJson(data, {
        style: style,
        onEachFeature: onEachFeature
      }).addTo(map);


        var info = L.control();
        info.onAdd = function (map) {
          this._div = L.DomUtil.create('div', 'info');
          this.update();
          return this._div;
        };
        info.update = function (feature) {
          this._div.innerHTML = (feature ?
            '<b>'  + 'Block ID:' + feature.id + '<br>' + feature.count + ' People</b><br />'
            : '');
        };
        info.addTo(map);


      };

   </script>
</body>

另外还有一个注意事项，有人知道为什么我可以更改设置视图，geojson数据不加载？代码被复制（在tileLayer行的正上方）。

var map = L.map('map').setView([41.9, -93.5], 4);

Answer 1

make sure you load the mapbox map with an id and access token. here is an example of that.

first, you have to get an account on mapbox.com, then you can create a project there and get your map-id. you will see your access token there, too.

If you use Mapbox.js, this will be easier, because you can just add your Map-id to your DOM Element.

切换到传单地图无法加载

1 个答案: