Leaflet 如何在多个窗格中放置传单多段线？_Leaflet

Leaflet 如何在多个窗格中放置传单多段线？

leaflet

Leaflet 如何在多个窗格中放置传单多段线？,leaflet,Leaflet,我做错了什么？其目的是有几个（比如6个）窗格，每个窗格包含许多标记和多段线，因此可以独立隐藏窗格。问题是，多段线都在同一个SVG中分组，并且都隐藏在一起。示例中的每个窗格应显示一条多段线和一个标记我不想从地图中删除多段线以隐藏它们，然后重新创建它们将不会很好地执行如果需要，多段线可以在传单地图的顶部使用D3绘制，但我希望这一切都可以在传单中完成。谢谢 JS: “严格使用”； addEventListener（“DOMContentLoaded”，函数（事件）{ var map=L.map（

我做错了什么？其目的是有几个（比如6个）窗格，每个窗格包含许多标记和多段线，因此可以独立隐藏窗格。问题是，多段线都在同一个SVG中分组，并且都隐藏在一起。示例中的每个窗格应显示一条多段线和一个标记

我不想从地图中删除多段线以隐藏它们，然后重新创建它们将不会很好地执行

如果需要，多段线可以在传单地图的顶部使用D3绘制，但我希望这一切都可以在传单中完成。谢谢

JS:

“严格使用”；
addEventListener（“DOMContentLoaded”，函数（事件）{
var map=L.map（'map'）.setView（[30.5，-0.09]，2）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
var pane1=map.createPane（'pane1'）；
var pane2=map.createPane（'pane2'）；
函数隐藏（窗格）{
pane.style.display='none'；
}
功能显示（窗格）{
pane.style.display=''；
}
让icon=新的L.icon.Default（）；
功能dr（窗格、板条）{
L.多段线（[[45.421，-75.697]，板条]{
体重：2，
窗格：窗格
}).addTo（地图）；
L.标记器（板条）{
图标：图标，
窗格：窗格
}).addTo（地图）；
}
//使用来自渥太华的线定义两个位置
dr（pane1，[42.3732216，-72.5198537]）；
dr（pane2，[35.9606384，-83.9207392]）；
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
异步函数循环（）{
对于（var i=0；i“重新创建它们不会很好地执行”为什么您认为会是这样？您尝试过吗？听起来比您当前的方法麻烦少多了。我尝试过（在我的应用程序中，而不是在这里发布的简化测试代码中）。现在初始显示很快。我按年份显示，当用户单击某个控件提前一年时，重新显示的延迟太大（创建了数百条多段线）。找到解决方案了吗？
    'use strict';

    document.addEventListener("DOMContentLoaded", function(event) { 
    var map = L.map('map').setView([30.5, -0.09], 2); 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var pane1 = map.createPane('pane1');
    var pane2 = map.createPane('pane2');
    function hide(pane) {
        pane.style.display = 'none';
    }
    function show(pane) {
        pane.style.display = '';
    }

    let icon = new L.Icon.Default();

    function dr(pane, latlng){
        L.polyline([[45.421, -75.697], latlng], {
            weight: 2,
            pane: pane
        }).addTo(map);

        L.marker(latlng, {
            icon: icon,
            pane: pane
        }).addTo(map);
    }

    // define two locations with lines from Ottawa
    dr(pane1, [ 42.3732216, -72.5198537 ]);
    dr(pane2, [ 35.9606384, -83.9207392 ]);

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    async function loop(){
        for( var i = 0; i<100; i++){
            hide(pane1);
            show(pane2);
            await sleep(1000);

            hide(pane2);
            show(pane1);
            await sleep(1000);
        }
    }
    loop();}); 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet-src.js" integrity="sha256-wc8X54qvAHZGQY6nFv24TKlc3wtO0bgAfqj8AutTIu0=" crossorigin="anonymous"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 900px;
            height: 500px;
        }
    </style>
</head>
<body>
  <div id='map'></div>
</body>
</html>
<script src="c.js"></script>