单击时如何 select 来自 leafletjs 多段线的单行？

Question

我有一张传单地图（使用 Vue 和 vue2-leaflet），其中包含许多预定义节点和它们之间的连接（存储在 neo4j 数据库中）。当用户单击一个节点（实际上是@mouseup）时，它的所有连接都显示为折线。我希望能够单击地图上的任何这些连接（线）并对其进行操作，例如删除（会有一个弹出窗口或带有操作的东西，但这在这里并不重要）。

我遇到的问题是点击事件没有记录连接 ID（或任何可以识别实际点击了哪个连接的信息）。我当然可以为每个连接创建一个多段线，但我怀疑问题会持续存在，并且在我的情况下这不是一个真正的解决方案，因为我不知道每个节点有多少个连接，并且 v-for 不知道'似乎无法使用多段线（至少我无法使其工作）。

这是节点标记代码：

<l-marker v-for="mapNode in MapStore.mapNodes"
  @mouseup="nodeClick($event, mapNode.index)"
  :lat-lng="[mapNode.latLng.lat, mapNode.latLng.lng]"
  :key="mapNode.index"
</l-marker>

...这是折线代码：

<l-polyline
  @mouseup="connectionClick($event)"
  :lat-lngs="MapStore.selectedConnections.latlngs"
/>

nodeClick 函数正确填充 MapStore.selectedConnections，因为多段线按预期显示。

问题是我没有看到任何传递给 connectionClick 函数的东西可以识别单击了哪个连接，因此我可以使用它。

这可能吗？

Answer 1

好的，事实证明我错了，v-for 有效（我认为我的代码有问题，但我不确定是什么）。

我的解决方案是：

<l-polyline v-for="connection in MapStore.selectedConnections.latlngs"
  @mouseup="connectionClick($event, connection)"
  :lat-lngs="connection" />

通过这种方式迭代连接，为每个连接生成一条单独的多段线，并将单击的连接的 latlngs 传递给 connectionClick 函数。

单击时如何 select 来自 leafletjs 多段线的单行？

How to select a single line from a leafletjs polyline when clicked?

polyline

leaflet

vue.js