Fatal编程技术网
  • leaflet/
  • Leaflet 将标记添加到多个图层组

Leaflet 将标记添加到多个图层组

leaflet

Leaflet 将标记添加到多个图层组,leaflet,leaflet.markercluster,Leaflet,Leaflet.markercluster,我使用StyledLayerControl和markercluster创建了一个带有传单JS的地图： 每个标记代表一个适合一个类别（=图层组）的研究项目。 不幸的是，我有一些项目分为三类（比如靠近格拉茨的莱布尼茨市的最南一类）。到目前为止，这一个项目被表示为三个标记，我得到的反馈让我感到困惑，尤其是在蜘蛛化的视图中。 我遇到了一个问题，将标记指定给变量，然后将变量添加到多个图层组时，取消选择一个图层组会使标记在其他图层组中消失。 那么，有没有可能将这样一个项目表示为一个标记，但出现在多个图层组中

我使用StyledLayerControl和markercluster创建了一个带有传单JS的地图： 每个标记代表一个适合一个类别（=图层组）的研究项目。 不幸的是，我有一些项目分为三类（比如靠近格拉茨的莱布尼茨市的最南一类）。到目前为止，这一个项目被表示为三个标记，我得到的反馈让我感到困惑，尤其是在蜘蛛化的视图中。 我遇到了一个问题，将标记指定给变量，然后将变量添加到多个图层组时，取消选择一个图层组会使标记在其他图层组中消失。 那么，有没有可能将这样一个项目表示为一个标记，但出现在多个图层组中

如果上面的链接不够，我可以添加我的代码（但恐怕有点乱）

谢谢你的提示

编辑：

到目前为止，我添加了我的标记，如下所示：

    //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>");

//绿色产业项目
//新（运行）项目
var industry_new=新的L.LayerGroup（）；
//可再生气田，劳芬，Wiva，在线
L.marker（[46.753278，15.586361]，{icon:industryIcon}）.addTo（industry_new）.bindpoop("可再生气田
项目：能源施泰尔马克
标准：加伯斯多夫
卡特戈里：天然气工业
现状：劳芬
加兹利彻天然气发电厂，因为埃努埃尔·斯特罗姆·杜尔克特罗利什·格尔泽格特和斯威斯图菲格·卡塔利奇·卡塔利彻在马塞纳的天然气发电厂哈尔蒂格能源公司位于贝雷城能源、移动和工业区。
”；
//HyTechbasis 4 WIVA，劳芬，WIVA，在线
L.marker（[48.155278，14.048056]，{icon:industryIcon}）.addTo（industry_new）.bindPopup（HyTechbasis 4 WIVA
Projektleitong:FRONIUS INTERNATIONAL GmbH
标准：塔尔海姆
凯蒂戈里：格伦工业
状态：劳芬
；
//二氧化碳氧化物WIVA，劳芬，WIVA，在线
L.marker（[48.33826938809515，14.317320611066839]，{icon:industryIcon}）.addTo（工业新）bindpoop（CO2氧化物）projektleitong:（sterreichischer合作伙伴）林茨能源研究所
标准：AGH Krakau Demo-Anlage
Kategorie:Grüne-Industrie
状态：劳芬
；
//CORALIS WIVA，劳芬，WIVA，在线
L.marker（[48.288029，14.324497]，{icon:industryIcon}）.addTo（industry_new）.bindpoppopup（CORALIS
Projektleitong:Fundacion CIRCE/Öst.Partner:EnergieInstitute and der JKU Linz
Standort:Linz
Kategorie:Grüne industry
状态：laufend
；
//UpHY、劳芬、Wiva、在线
L.marker（[48.14735053624901，16.492216234765525]，{icon:industryIcon}）.addTo（industry_new）.bindpoop（“UpHy I
Projektleitong:OMV
标准：Wien
Kategorie:Grüne Mobilität
状态：laufend
Im项目UpHy I wird die基础für die H 2-在einer Elektrolyseüber die Logistik bis zur 350 Betankungsinfraktur für einer kommerziell建筑中的生产贝特里贝尼·布斯利尼·米特·布伦斯托夫·泽勒南特里布·恩特威克尔特。
”；
//地下太阳。转换，劳芬，威瓦·奈茨沃克
L.marker（[48.028889，13.691944]，{icon:industryIcon}）.addTo（industry_new）.bindpoppopup（地下太阳。转换
projektleitong:RAG Austria AG
标准：皮尔斯巴赫
卡泰戈里：格伦工业
状态：abgeschlossen
在多孔地下储层中的可再生能源的化学储存，具有示范性试验床
”；
我对每个层组都这样做。可能这不是最好的方法，但对我这个java和传单初学者来说，这是最简单的方法，我很高兴到目前为止一切顺利；-）

不幸的是，这是一个未解决的用户体验问题。主要问题是在某些用例中，您需要一个或过滤器（听起来像是你的情况，因为你的标记在每个组中都是重复的，它们适合相关的类别）；而在其他组中，你需要一个和过滤器

因此，如果您希望使用至少适合一个选定类别的所有标记填充地图（即，实施OR过滤器），一种可能的解决方案是使用“虚拟”空图层组作为选择控件，在用户选择更改时清除并使用相关标记重新填充地图

例如，如果您有映射“overlayadd/remove”事件：

//选择控制中使用的“虚拟”层
const dummy1=L.layerGroup（）；
const dummy2=L.layerGroup（）；
//可能带有公共标记的实际类别
常量类别1=L.layerGroup（[markerA，markerB]）；
const category2=L.layerGroup（[markerA，markerC]）；
//中间组可轻松清除地图内容
const content=L.layerGroup（）.addTo（映射）；
map.on（“overlayadd overlayremove”，（）=>{
//步骤1：删除所有内容
content.clearLayers（）；
//步骤2：重新添加至少适合一个选择的层
if（map.hasLayer（dummy1））{
类别1.添加到（内容）
}
if（map.hasLayer（dummy2））{
类别2.添加到（内容）
}
//等等。
});
如果使用传单.markercluster，只需将其用作上述代码段中的
内容
变量即可

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

L.marker(latLngA).addTo(category1).addTo(category2);
非常感谢您的详细回复，我会尝试这个！因此，我尝试了它，但是按照您的示例，在控件中选择了
category1
，并且
markerA
和
markerB
显示在地图上。如果同时选择了
category2
，则会发生以下情况：来自
content
的所有层>