在传单侧栏中切换 GeoJSON 层

Question

如何像切换 L.marker 图层一样切换传单地图中的 GeoJSON 图层？https://jsfiddle.net/mawr35vj/如果这是一个简单的问题，请原谅我，我还是传单的新手，并且已经花了一整天的时间。这是我想在侧边栏中切换的 GeoJSON。fetch('https://data.cityofnewyork.us/resource/ek5y-zcyf.geojson?$where=latitude is not null')  .then(function (response) {    // Read data as JSON    return response.json();  })  .then(function (data2) {    // Create the Leaflet layer for the data     var complaintLayer = L.geoJson(data2, {      // We make the points circles instead of markers so we can style them      pointToLayer: function (geoJsonPoint, latlng) {        return L.circleMarker(latlng);      },      // Then we can style them as we would other features      style: function (geoJsonFeature) {        return {          fillColor: '#0000ff',          radius: 6,          fillOpacity: 0.7,          stroke: false        };      }    });  });- 我尝试给它分配一个“var”- 我尝试在叠加层中添加“complaintLayer”，就像我对 L.marker 所做的一样 -还有许多我不记得但显然不起作用的其他各种事情......

Answer 1

您可以complaintLayer为标记控件放入一个数组，但该变量必须在正确的范围内 - 从您发布的代码来看，它看起来像是它所填充的函数的局部变量，因此它在外部不可见。

Answer 2

根据 peeebeee 的建议，我通过加载数据并将它们放入“承诺”中来解决该问题。

您可以在下面看到一个工作示例：https : //jsfiddle.net/4x3sk1va/

下面的承诺示例（取自https://glitch.com/@ebrelsford）

// Fetch collisions data from our Glitch project

var collisionsFetch = fetch('https://cdn.glitch.com/03830164-a70e-47de-a9a1-ad757904d618%2Fpratt-collisions.geojson?1538625759015')

  .then(function (response) {

    // Read data as JSON

    return response.json();

  });

// Fetch lanes data from our Glitch project

var lanesFetch = fetch('https://cdn.glitch.com/fcedf615-7fef-4396-aa74-2e03fc324d71%2Fpratt-bike-routes.geojson?1538628711035')

  .then(function (response) {

    // Read data as JSON

    return response.json();

  });

// Once both have loaded, do some work with them

Promise.all([collisionsFetch, lanesFetch])

  .then(function (fetchedData) {

    console.log('Both datasets have loaded');

    // Unpack the data from the Promise

    var collisionsData = fetchedData[0];

    var laneData = fetchedData[1];

    // Add data in the order you want--first goes on the bottom

    L.geoJson(collisionsData).addTo(map);

    L.geoJson(laneData).addTo(map);

  });