傳單地圖圖層（圓形、多邊形）在縮放期間未正確縮放

Question

我不明白為什么當我放大和縮小時，radiusmap 圖層（顯示的第一張地圖）和等時線圖層（顯示的第二張地圖）不能正確縮放。 第三張地圖具有完全相同的圖層，效果很好。

這是 a) 創建圓形和多邊形圖層，然后 b) 將它們添加到半徑圖、等時線圖和最后組合地圖的代碼。

        var isochrone = L.polygon(isochronedetails, {color: 'red'});
        var radius = L.circle([radiuslat, radiuslng], {fillColor: circleStyle.color[0], fillOpacity: circleStyle.opacity[0],radius: radiusmeters});
        radius.addTo(radiusmap);
        isochrone.addTo(drivetimemap);
        radius.addTo(combinedmap);
        isochrone.addTo(combinedmap);

創建/初始化三個地圖的代碼在這里：

        radiusmap = L.map('radiusmap').setView([radiuslat, radiuslng],10);
        radiusmap.addControl(new L.Control.Fullscreen());
        drivetimemap = L.map('drivetimemap').setView([isochronelat, isochronelng], 10);
        drivetimemap.addControl(new L.Control.Fullscreen());
        combinedmap = L.map('combinedmap').setView([isochronelat, isochronelng], 10);
        combinedmap.addControl(new L.Control.Fullscreen());

這是放大/縮小每張地圖時發生的情況的 gif。 您會看到，當對前兩張地圖進行縮放時，圓形或多邊形會遠離原始繪圖位置。 但是，在第三張地圖上，它的行為是正確的。

https://screencast-o-matic.com/watch/cYe1VQx6pZ

我究竟做錯了什么？ 我只希望前兩張地圖表現得像第三張地圖。 :-)

Answer 1

只需不要將您的圖層（即等時線和半徑）添加到多個地圖，而是為每個單獨的地圖創建不同的圖層（可能具有相同的參數）。

為簡單起見，Leaflet 假設當一個圖層添加到地圖時，它只屬於該地圖。