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 上。

我哪里做错了？有可能实现我想要的效果吗？

- Marco

---

无法将同一对象添加到两个不同的映射中。只有一个映射属性。 - geocodezip

我认为你应该创建一个“模型”，然后根据该模型中的数据绘制和重绘两个多边形。 - L. Sanna

@LSA 模型是什么意思？你能举个简单的例子吗？ - Marco

Answer 1

正如geocodezip在评论中提到的，将折线添加到地图上会设置折线对象的this._map实例变量。因此，当前实现方式无法使对象在两个地图上呈现。

您可以在这里查看相关源代码。

- Pwnosaurus

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

- northlandiguana