向多个图层组添加标记

Question

我使用 StyledLayerControl 和 markercluster 创建了一个带有 leafletjs 的地图： https://www.wiva.at/v2/basemap-kartentest/ 每个标记代表一个适合一个类别（=图层组）的研究项目。 不幸的是，我有一些项目分为三类（比如靠近格拉茨的莱布尼茨市最南端的项目）。到目前为止，这一个项目被表示为三个标记，我得到了令人困惑的反馈，尤其是在蜘蛛视图中。 我遇到了一个问题，将我的标记分配给一个变量然后将该变量添加到多个图层组时，取消选择一个图层组会使标记在其他图层组中也消失。 那么有没有机会将这样的项目表示为一个标记但出现在多个图层组中？

如果上面的链接不够，我可以添加我的代码（但我担心它有点乱）。

感谢任何提示。

编辑：

到目前为止，我只是这样添加我的标记：

    //Green Industry projects
    //new (running) projects
    var industry_new = new L.LayerGroup();

    //Renewable Gasfield, laufend, Wiva, ONLINE
    L.marker([46.753278, 15.586361], {icon: industryIcon} ).addTo(industry_new).bindPopup("<p><span style='font-size:12pt;font-weight:bold; color:#0099b8;'>Renewable Gasfield</span></p><b>Projektleitung:</b> Energie Steiermark<br /><b>Standort:</b> Gabersdorf<br /><b>Kategorie:</b> Grüne Industrie<br /><b>Status:</b> laufend<br /><p>Ganzheitlicher Power-to-Gas Ansatz, bei dem aus erneuerbarem Strom durch Elektrolyse grüner Wasserstoff erzeugt wird und eine zweistufige katalytische Methanisierung im großen Maßstab für eine nachhaltige Energieversorgung in den Bereichen Energie, Mobilität und Industrie vereint.</p><a href='https://www.wiva.at/v2/portfolio-item/renewable-gasfield/'>Details...</a>");

    //HyTechbasis 4 WIVA, laufend, Wiva, ONLINE
    L.marker([48.155278, 14.048056], {icon: industryIcon} ).addTo(industry_new).bindPopup("<p><span style='font-size:12pt;font-weight:bold; color:#0099b8;'>HyTechbasis 4 WIVA</span></p><b>Projektleitung:</b> FRONIUS INTERNATIONAL GmbH<br /><b>Standort:</b> Thalheim<br /><b>Kategorie:</b> Grüne Industrie<br /><b>Status:</b> laufend<br /><p>Hydrogen Technology Basis for WIVA</p><a href='https://www.wiva.at/v2/portfolio-item/hytechbasis-4-wiva-hydrogen-technology-basis-for-wiva/'>Details...</a>");

    //Co2EXIDE WIVA, laufend, Wiva, ONLINE
    L.marker([48.33826938809515, 14.317320611066839], {icon: industryIcon} ).addTo(industry_new).bindPopup("<p><span style='font-size:12pt;font-weight:bold; color:#0099b8;'>CO2EXIDE</span></p><b>Projektleitung:</b> (österreichischer Partner) Energieinstitut an der JKU Linz<br /><b>Standort:</b> AGH Krakau Demo-Anlage<br /><b>Kategorie:</b> Grüne Industrie<br /><b>Status:</b> laufend<br /><p>CO2-basierte Elektrosynthese von Ethylen Oxiden</p><a href='http://www.co2exide.eu/'>Details...</a>");
        
    //CORALIS WIVA, laufend, Wiva, ONLINE
    L.marker([48.288029, 14.324497], {icon: industryIcon} ).addTo(industry_new).bindPopup("<p><span style='font-size:12pt;font-weight:bold; color:#0099b8;'>CORALIS</span></p><b>Projektleitung:</b> Fundación CIRCE / Öst. Partner: Energieinstitut an der JKU Linz<br /><b>Standort:</b> Linz<br /><b>Kategorie:</b> Grüne Industrie<br /><b>Status:</b> laufend<br /><p>Erfahrungen im Bereich der Industriesymbiose zusammenstellen</p><a href='https://cordis.europa.eu/project/id/958337'>Details...</a>");

    //UpHY, laufend, Wiva, ONLINE
    L.marker([48.14735053624901, 16.492216234765525], {icon: industryIcon} ).addTo(industry_new).bindPopup("<p><span style='font-size:12pt;font-weight:bold; color:#0099b8;'>UpHy I</span></p><b>Projektleitung:</b> OMV<br /><b>Standort:</b> Wien<br /><b>Kategorie:</b> Grüne Mobilität<br /><b>Status:</b> laufend<br /><p>Im Project UpHy I wird die Basis für die Demonstration der Wertschöpfungskette für die grüne H2- Mobilität von der Produktion in einer Elektrolyse über die Logistik bis zur 350 bar Betankungsinfrastruktur für eine kommerziell betriebene Buslinie mit Brennstoffzellenantrieb entwickelt.</p><a href='https://www.wiva.at/v2/portfolio-item/uphy-upscaling-of-green-hydrogen-for-mobility-and-industry/'>Details...</a>");

    //Underground Sun.Conversion, laufend, Wiva-Netzwerk
    L.marker([48.028889, 13.691944], {icon: industryIcon} ).addTo(industry_new).bindPopup("<p><span style='font-size:12pt;font-weight:bold; color:#0099b8;'>Underground Sun.Conversion</span></p><b>Projektleitung:</b> RAG Austria AG<br /><b>Standort:</b> Pilsbach<br /><b>Kategorie:</b> Grüne Industrie<br /><b>Status:</b> abgeschlossen<br /><p>Chemical storage of renewable energy in porous subsurface reservoirs with exemplary testbed</p><a href='https://www.underground-sun-conversion.at/'>Details...</a>");

我对每个图层组都这样做。可能这不是最好的方法，但对于我作为 java 和传单初学者来说是最简单的方法，我很高兴到目前为止一切顺利;-)

Answer 1

很遗憾，这是一个未解决的用户体验问题。主要问题是，在某些用例中，您需要一个 OR 过滤器（听起来就是您的情况，因为您的标记在适合相关类别的每个组中重复）；在其他情况下，您需要一个 AND 过滤器...

因此，如果您想用适合至少一个选定类别的所有标记填充地图（即实施 OR 过滤器），一种可能的解决方案是使用“虚拟”空图层组每当用户选择发生变化时，您的选择控制、清除并使用相关标记重新填充地图。

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

// "Dummy" layers to be used in selection control
const dummy1 = L.layerGroup();
const dummy2 = L.layerGroup();

// Actual categories with possibly common Markers
const category1 = L.layerGroup([markerA, markerB]);
const category2 = L.layerGroup([markerA, markerC]);

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

map.on("overlayadd overlayremove", () => {
  // Step 1: remove all content
  content.clearLayers();
  // Step 2: re-add layers that fit at least one selection
  if (map.hasLayer(dummy1)) {
    category1.addTo(content)
  }
  if (map.hasLayer(dummy2)) {
    category2.addTo(content)
  }
  // etc.
});

如果您使用 Leaflet.markercluster，您可以简单地将其用作上面 sn-p 中的content 变量。

您还必须为每个项目只创建 1 个标记，不再为每个类别重复它们。在正常使用情况下，应该避免这种情况，但这里我们专门处理这种情况。例如，如果标记 A 匹配类别 1 和 2，您可以这样做：

L.marker(latLngA).addTo(category1).addTo(category2);