2015-04-22 48 views
1

我正在嘗試加載標準傳單地圖,以便覆蓋它上面的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); 
+0

你是否傳遞一個特定的地圖ID來從地圖框中獲取一個圖塊圖層?它看起來只是在URL中鍵入'''MapID''',但它實際上應該指定要提取的真實地圖的ID。 –

回答

1

確保您有idaccess token加載mapbox地圖。 here就是一個例子。

首先,您必須在mapbox.com上獲得一個帳戶,然後您可以在那裏創建一個項目並獲得您的map-id。你也會在那裏看到你的access token

如果您使用Mapbox.js,這將更容易,因爲您可以將Map-id添加到您的DOM元素。

+0

謝謝,這個作品!你也知道爲什麼如果我把'.setView'改成另一個座標如41.9,-431.5',爲什麼六角形不會顯示出來? –

+0

也許如果你顯示一些代碼我可以幫忙。如果這是另一個問題,我建議開放新的問題。發給我鏈接,如果你可以去這裏幫忙,我會盡力幫助 – Hinrich

+0

,那太棒了!提前致謝! http://gis.stackexchange.com/questions/143784/json-layer-does-not-show-when-setview-changes –