Question

我需要根据某个值（某个国家/地区的内容项数）在地图上为国家/地区着色。如果该值为0（null），则不应对相应的国家/地区进行着色/显示。

就Leaflet.js而言，这意味着，我有一个GeoJSON文件，其中包含世界上每个国家/地区的功能。但是，如果内容项的数量大于0，则仅渲染（添加到地图）。当使用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"
      });
    }
  }
});

现在，由于地图上的详细信息，GeoJSON文件大到11 MB。我了解了TopoJSON，这非常棒，因为源文件现在小于2 MB，具有相同的细节等级。我还设法将TopoJSON数据显示在地图上，但是，我无法弄清楚，如何应用过滤器。

这是我目前添加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);
  }
}

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

如何在Leaflet.js中按属性过滤TopoJSON功能？

0 个答案: