在传单侧栏中切换 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 projectvar 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 projectvar 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 themPromise.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);  });