将标记添加到多个图层组

问题描述

我使用 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,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,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,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,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,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 和传单初学者来说，这是最简单的方法，我很高兴到目前为止一切顺利;-)

解决方法

不幸的是，这是一个未解决的用户体验问题。主要问题是，在某些用例中，您需要一个 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，您可以简单地将其用作上述代码片段中的 content 变量。

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

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