“无效的GeoJSON对象."使用Leaflet和Leaflet-ajax [英] 'Invalid GeoJSON object.' Using Leaflet and leaflet-ajax

问题描述

我正在使用传单制作法国地图，突出显示区域，然后单击缩放.

I'm using leaflet to build a map of France, with the regions highlighted, and on-click zoom.

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

I used this tutorial first: http://leafletjs.com/examples/choropleth.html

首先，我在script.js中包含了geojson，但就我而言，我需要在单独的geojson文件中放置区域. 所以我现在在script.js中用小叶ajax来称呼他们:

First, I've had the geojson in the script.js, but in my case i needed regions in separated geojson files. So i'm now calling them in the script.js with leaflet-ajax like this :

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

这些区域显示在地图上，但是现在我在教程中进行的所有放大，突出显示等功能都不再起作用.

The regions is displayed on the map, but now all the function to zoom-in, highlight etc... that I took on the tutorial don't work anymore.

    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行上显示"Uncaught Error:Invalid GeoJSON object.".

And now the console says " Uncaught Error: Invalid GeoJSON object. " on the line 8 of leaflet.js.

问题似乎出在这行上:

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

我不明白为什么:(

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

Edit : Here is my geojson : https://api.myjson.com/bins/3s1ad

先谢谢了.

推荐答案

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

Your call to onEachFeature has to be in your AJAX call

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

您还必须摆脱

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

这篇关于“无效的GeoJSON对象."使用Leaflet和Leaflet-ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！