'Invalid GeoJSON object.' 使用 Leaflet 和 leaflet-ajax

Question

我正在使用 leaflet 绘制法国地图，突出显示区域并单击缩放。

我首先使用了这个教程：http://leafletjs.com/examples/choropleth.html

首先，我在 script.js 中有 geojson，但在我的例子中，我需要单独的 geojson 文件中的区域。所以我现在在 script.js 中用 leaflet-ajax 像这样称呼他们：

 var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson").addTo(map);

区域显示在地图上，但现在我在教程中使用的所有放大、突出显示等功能都不起作用了。

    L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

// HIGHLIGHT FEATURE = MOUSEOVER

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


  // HIGHLIGHT FEATURE = MOUSEOVER
  function highlightFeature(e) {
      var layer = e.target;

      layer.setStyle({
          weight: 5,
          color: '#666',
          dashArray: '',
          fillOpacity: 0.7
      });
  };


  // HIGHLIGHT FEATURE = MOUSE LEFT
function resetHighlight(e) {
      geojson.resetStyle(e.target);
  };

// ZOOM TO THE REGION
  function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

现在控制台在 leaflet.js.

的第 8 行显示“未捕获错误：无效的 GeoJSON 对象。”

问题似乎出在这一行:

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

我不明白为什么:(

编辑：这是我的 geojson：https://api.myjson.com/bins/3s1ad

提前致谢。

Answer 1

您对 onEachFeature 的调用必须在您的 AJAX 调用中

var BordeauxLayer = new L.GeoJSON.AJAX("src/js/DI_Bordeaux.geojson", {onEachFeature: onEachFeature}).addTo(map);

你也得去掉

L.geoJson(BordeauxLayer,{onEachFeature: onEachFeature}).addTo(map);

'Invalid GeoJSON object.' 使用 Leaflet 和 leaflet-ajax

'Invalid GeoJSON object.' Using Leaflet and leaflet-ajax

javascript

ajax

leaflet