javascript - 如何在Leaflet.js中按属性过滤TopoJSON特征？

Question

我需要根据某个值(一个国家/地区的内容项数量)为 map 上的国家/地区着色。如果该值为 0(空)，则不应着色/显示相应的国家/地区。

就 Leaflet.js 而言，这意味着我有一个 GeoJSON 文件，其中包含世界每个国家/地区的功能。但是，仅当内容项的数量大于 0 时，才会呈现该功能(添加到 map )。使用 GeoJSON 输入文件时，这已经类似于 Leaflet.js: is it possible to filter geoJSON features by property? 的答案。

这是 GeoJSON 的片段:

var mapLayer = L.geoJson(world, {
  filter: function(feature, layer) {
    return getContentItems(feature.properties.ISO2, "count");
  },
  onEachFeature: function (feature, layer) {
    var contentCount = getContentItems(feature.properties.ISO2, "count");
    if (contentCount) {
      layer.setStyle({
        'weight': 1,
        'fillOpacity': .75,
        'fillColor': "#0077c8", // Actually a function depending on contentCount
        'opacity': .75,
        'color': "#0077c8"
      });
    }
  }
});

现在，由于 map 上的详细信息，GeoJSON 文件高达 11 MB。我了解了 TopoJSON，这非常棒，因为源文件现在不到 2 MB，并且具有相同的详细程度。我还设法让 TopoJSON 数据显示在 map 上，但是，我不知道如何应用过滤器。

这是我当前添加 TopoJSON 层的代码片段:

L.TopoJSON = L.GeoJSON.extend({
  addData: function(jsonData) {
    if (jsonData.type === "Topology") {
      for (key in jsonData.objects) {
        geojson = topojson.feature(jsonData, jsonData.objects[key]);
        L.GeoJSON.prototype.addData.call(this, geojson);
      }
    }
    else {
      L.GeoJSON.prototype.addData.call(this, jsonData);
    }
  }
});

var topoLayer = new L.TopoJSON();
$.getJSON('scripts/world.topo.json')
  .done(addTopoData);

function addTopoData(topoData) {
  topoLayer.addData(topoData);
  topoLayer.addTo(map);
  topoLayer.eachLayer(handleLayer);
}

function handleLayer(layer) {
  layer.setStyle({'opacity': 0}); // Too late.
}

我尝试将过滤器函数添加到 TopoJSON 声明中的 GeoJSON 扩展中，但没有成功。我认为handleLayer()函数来得太晚了，功能已经添加了。

编辑:如果内容计数为 0，我可以通过将 handleLayer() 函数更改为

来删除图层

function handleLayer(layer) {
  var contentCount = getContentItems(layer.feature.properties.ISO2, "count");
  if (contentCount == 0) {
    map.removeLayer(layer);
  }
}

出于性能目的，我想在绘制之前过滤特征。我现在只是卡在需要添加过滤功能的地方。

Answer 1

按照 FranceImage 的建议，深入阅读有关继承的 Javascript 之后，我找到了我自己正在寻找的解决方案。我可以将自定义过滤器函数作为选项传递，而不仅仅是使用 var topoLayer = new L.TopoJSON(); 来创建新的 TopoJSON 对象:

var topoLayer = new L.TopoJSON(null, {
  filter: function(feature, layer) {
  return getNN(feature.properties.ISO2, "check");
  },
  onEachFeature: function (feature, layer) {
    var contentCount = getContentItems(feature.properties.ISO2, "count");
    if (contentCount) {
      layer.setStyle({
        'weight': 1,
        'fillOpacity': .75,
        'fillColor': "#0077c8",
        'opacity': .75,
        'color': "#0077c8"
      });
    }
  }
});

无需使用handleLayers函数删除图层。