在传单侧边栏中切换 GeoJSON 层

Question

如何像切换 L.marker 图层一样切换传单地图中的 GeoJSON 图层？

如果这是一个简单的问题，请原谅我，我对传单还是个新手，花了一整天的时间。

这是我想在边栏中切换的 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"
-我尝试像添加 L.marker 一样在叠加层中添加 "complaintLayer"
-还有许多其他我不记得但显然不起作用的东西......

更新：

我正在尝试加载 GeoJSON 并为其分配一个变量，但遇到困难。我正在查看此主题和相关主题：How can I assign the contents of a geojson file to a variable in Javascript?

如果我只是将 GeoJSON 复制并粘贴到脚本中，我就可以使用它，但是如果我想从本地文件或 API.

加载它会遇到困难

Answer 1

您可以将 complaintLayer 放入标记控件的数组中，但该变量必须在正确的范围内 - 从您发布的代码来看，它看起来像是它所填充的函数的本地变量，所以在外面是看不到的。

Answer 2

根据 peeebeee 的建议，我通过加载数据并将它们放入 "promise."

中解决了这个问题

您可以在下面看到一个工作示例： 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);
  });

在传单侧边栏中切换 GeoJSON 层

Toggle GeoJSON layer in leaflet sidebar

javascript

mapping

geojson

leaflet