Как выбрать одну строку из полилинии листовки при нажатии? - PullRequest
Новая
       19

Как выбрать одну строку из полилинии листовки при нажатии?

0 голосов
/ 30 апреля 2019

У меня есть листовка (с использованием Vue и vue2-leaflet) со множеством предопределенных узлов и соединений между ними (хранятся в базе данных neo4j).Когда пользователь нажимает на узел (на самом деле @mouseup), все его соединения отображаются в виде ломаной линии.Я хочу иметь возможность щелкнуть любое из этих соединений на карте (линии) и что-то с этим делать, например, удалить (там будет всплывающее окно или что-то с действиями, но здесь это не важно).

Проблема, с которой я столкнулся, заключается в том, что событие click не записывает идентификатор соединения (или что-либо, что идентифицировало бы, какое соединение было фактически нажато).Конечно, я мог бы создать одну ломаную линию для каждого соединения, но я подозреваю, что проблема сохранится, и в моем случае это не совсем решение, так как я не знаю, сколько соединений имеет каждый узел, а 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 функция, которая определит, какое соединение было нажато, чтобы я мог с ним работать.

Возможно ли это?

1 Ответ

0 голосов
/ 02 мая 2019

Хорошо, получается, что я был не прав, и v-for работает (я думаю, что-то не так с моим кодом, но я не уверен, что).

Мое решение: 

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

Таким образом, он перебирает соединения, генерирует отдельную ломаную для каждого и передает в функцию connectionClick latlngs соединения, по которому щелкнули.

...