Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/403.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 切换到传单地图不需要';t载荷_Javascript_Leaflet - Fatal编程技术网

Javascript 切换到传单地图不需要';t载荷

Javascript 切换到传单地图不需要';t载荷,javascript,leaflet,Javascript,Leaflet,我正在尝试加载标准传单地图,以便在上面覆盖geojson文件。如果我使用另一张地图,这张地图可以很好地加载,但它与传单不兼容。我得到的错误是 GET http://a.tiles.mapbox.com/v3/MapID/7/40/47.png 404 (Not Found) 我的假设是,选择不同的地图不会有太大影响,因为我只是替换画布来放置geojson(显然我错了)。有人能解释一下为什么这样不行吗?下面是我的代码,我已经对我更改地图的位置进行了注释 <!DOCTYPE html>

我正在尝试加载标准传单地图,以便在上面覆盖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>

确保加载带有
id
访问令牌的mapbox映射。这就是一个例子

首先,您必须在mapbox.com上获得一个帐户,然后您可以在那里创建一个项目并获得您的
地图id
。您也将在那里看到您的
访问令牌


如果使用,这将更容易,因为您只需将
贴图id
添加到DOM元素。

是否传递特定的贴图id以从mapbox获取平铺层?看起来它只是在URL中键入了
MapID
,但实际上它应该指定要获取的真实地图的ID。谢谢,这很有效!另外,您知道为什么如果我将
.setView
更改为另一个坐标,例如
41.9,-431.5
,为什么不会显示六边形形状吗?如果您显示一些代码,我可能会有所帮助。如果这是另一个问题,我建议打开新的问题。给我发链接,我试着帮你如果你能到这里来帮忙,那就太好了!提前谢谢!
var map = L.map('map').setView([41.9, -93.5], 4);