React Leaflet 与分组层答案

【问题标题】：React Leaflet with grouped layersReact Leaflet 与分组层
【发布时间】：2021-03-18 20:48:59
【问题描述】：

您好，我正在尝试使用图层控件将多个图层添加到传单地图。我想过滤地图上主要选择数据集的图层，并从那里显示基于该集的数据。

控制箱图片：

我了解如何将图层添加到地图并根据它进行选择。但我想根据独占控件显示图层，然后根据过滤器显示过滤后的图层。

选择科罗拉多州和男性就像查询科罗拉多州的男性

var groupedOverlays = {
  "states": {
    "Colorado" : groups.colorado,
    "New Mexico" : groups.newMexico,
    "Arizona" : groups.arizona
  },
  "GenderAndAges": {
    "Male": groups.,
    "Female": groups.,
    "Under 18 years old": groups.,
    "18 to 55 years old": groups.

  }
}; 

var options = {

  exclusiveGroups: ["states"],
  groupCheckboxes: false
};

【问题讨论】：

内置的传单 layerControl 并不是为此而设计的——这意味着它没有那么先进。它的真正含义是简单地在地图上添加和删除图层。然而，这是一个非常有趣的想法。我们能得到更多信息吗？该层的数据源是什么？您如何构建查询？我相信您可以构建具有您想要的外观和行为的自定义小部件。
另外，您是否专门使用 react-leaflet？还是只是反应和传单？
现在，我有几个 .json 文件可以用于每种可能的组合。喜欢男性、州和年龄
意思是我对每种可能性都有一个 json 文件。 3 个州、2 个性别和 3 个年龄组。
@SethLutske 我正在使用 React 和 Leaflet

标签： javascript reactjs leaflet

【解决方案1】：

听起来您的用例与 https://stackoverflow.com/a/66412288/5108796 中的用例相似，只是您需要 AND 过滤器选项。

因此，以这种情况为基础，并首先假设您可以加载所有数据，一个可能的解决方案是：

将您的图层分配给他们适合的所有组（例如，科罗拉多州的男性将是一个图层，添加到“男性”和“科罗拉多”数组或图层组中）
在您的 LayersControl 中使用虚拟 LayerGroups，如上面链接的答案中所做的那样
Whenever the selection changes, add all matching arrays/LayerGroups and remove all non-matching ones, so that you leave only the Layers that fit into the AND combined filters

例如，如果您有地图“overlayadd/remove”事件：

// "Dummy" layers to be used in selection control
const dummyColorado = L.layerGroup();
const dummyArizona = L.layerGroup();
const dummyMales = L.layerGroup();
const dummyFemales = L.layerGroup();

// Actual categories with possibly common Markers
const colorado = [maleColoradoA, femaleColoradoB];
const arizona = [maleArizonaC, femaleArizonaD];
const males = [maleColoradoA, maleArizonaC];
const females = [femaleColoradoB, femaleArizonaD];

// Intermediate group to work outside map to avoid potential performance issue
const content = L.layerGroup().addTo(map);

map.on("overlayadd overlayremove", () => {
  // Step 1: remove all content
  content.remove();
  content.clearLayers();
  // Step 2: re-add Layers that fit at least one selection in 1 dimension (e.g. loop over the areas)
  if (map.hasLayer(dummyColorado)) {
    colorado.forEach(marker => marker.addTo(content));
  }
  if (map.hasLayer(dummyArizona)) {
    arizona.forEach(marker => marker.addTo(content));
  }
  // Step 3: remove all Layers that do not match selection in all other dimensions (here gender, age, etc.)
  if (!map.hasLayer(dummyMales)) {
    males.forEach(marker => content.removeLayer(marker));
  }
  // etc.
  // Step 4: re-add content on map
  content.addTo(map);
});

现在，如果您必须将数据保存为外部单个文件（每个可能的组合 1 个）并仅在用户选择时动态加载它们，您可以调整上述技术：

// "Dummy" layers to be used in selection control
const dummyColorado = L.layerGroup();
const dummyArizona = L.layerGroup();
const dummyMales = L.layerGroup();
const dummyFemales = L.layerGroup();

// Intermediate group to easily reset content
const content = L.layerGroup().addTo(map);

map.on("overlayadd overlayremove", () => {
  // Step 1: remove all content
  content.clearLayers();
  // Step 2: re-add data that fit combinations 
  if (map.hasLayer(dummyColorado) && map.hasLayer(dummyMales)) {
    // Load the data file for males in Colorado combination
    // and add into the content LayerGroup
    // e.g. with jQuery and assuming GeoJSON data:
    $.getJSON("pathToMaleColorado.json", (data) => {
      L.geoJSON(data).addTo(content);
    });
  }
  // etc.
});

【讨论】：