Leaflet：将相同的图层添加到两个不同的地图中

Question

我在同一页面中显示两个不同的leaflet map。经过一定的事件。我希望Polyline出现在它们上面。如果可能的话，我想避免创建一个副本并保留两个不同的变量。

我正在尝试使用以下内容：

var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
my_polyline.addTo(map2);

但是，如果我运行上述代码，Polyline将仅显示在map2上。

后记，我需要将其坐标再次更改为某个new_line_coordinates，我将运行以下内容：

my_polyline.setLatLngs(new_line_coordinates);
my_polyline.redraw();

polyline现在应该更新为新坐标。但是，它再次出现在map2。

我做错了什么？是否有可能实现我的目标？

Answer 1

作为评论中提到的地理编码，向地图添加折线会设置折线对象的this._map实例变量。因此，无法使用当前实现的方式在两个地图上呈现对象。

您可以查看相关的源代码here。

Answer 2

您无法将同一图层添加到多个Leaflet地图中。但是我使用更复杂的GeoJSON图层组遇到了类似的问题，并最终通过使用toGeoJSON()从图层获取GeoJSON对象并使用它为第二个图创建新图层来解决它。对于简单的折线，您可以使用getLatLngs()。所以：

var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var new_polyline = L.polyline(line_coordinates);
new_polyline.addTo(map2);

应该有效，

var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var my_polyline_latlngs = my_polyline.getLatLngs();
var new_polyline = L.polyline(my_polyline_latlngs);
new_polyline.addTo(map2);