Блог

Я создал карту с помощью leafletjs, используя StyledLayerControl и markercluster: https://www.wiva.at/v2/basemap-kartentest / Каждый маркер представляет исследовательский проект, который подпадает под одну категорию (=layergroup). К сожалению, у меня есть несколько проектов, которые делятся на три категории (например, самый южный, недалеко от города ЛЕЙБНИЦ, недалеко от ГРАЦА). Пока этот проект представлен в виде трех маркеров, и я получил отзывы, которые это смущает, особенно в паутинном представлении. Я столкнулся с проблемой, когда при назначении моего маркера переменной, а затем при добавлении переменной в несколько групп слоев, при отмене выбора одной группы слоев маркер исчезает и в других группах слоев. Итак, есть ли шанс представить такой проект как ОДИН маркер, но появляющийся в нескольких группах слоев?

Если приведенной выше ссылки недостаточно, я могу добавить свой код (но, боюсь, это немного запутанно).

Спасибо за любую подсказку.

Редактировать:

Пока я добавляю свой маркер просто так:

     //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 и leaflet, самый простой способ, и я был просто очень рад, что пока все получилось 😉

К сожалению, это нерешенная проблема UX. Основная проблема заключается в том, что в некоторых случаях вам нужен фильтр ИЛИ (похоже, это ваш случай, поскольку ваши маркеры дублируются в каждой группе, где они соответствуют соответствующей категории); а в других вам нужен фильтр И …

Итак, если вы хотите заполнить свою карту всеми маркерами, которые соответствуют хотя бы одной выбранной категории (т. Е. Реализовать фильтр ИЛИ), Возможным решением может быть использование «фиктивных» пустых групп слоев для вашего элемента управления выбором, очистка и повторное заполнение карты соответствующими маркерами при изменении пользовательского выбора.

Например, если у вас есть события карты «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);