Ограничьте количество точек производителя в полилинии (чтобы это была линия) с помощью leaflet-geoman

Я хочу, чтобы пользователь мог рисовать линию (полилинию только с двумя точками).

Я включаю рисование и слушаю vertexadded. Когда количество маркеров _rings равно 2, я отключаю рисование.

Это кажется неправильным по нескольким причинам:

  1. Я получаю доступ к частной переменной _rings
  2. Теперь я отключаю рисование, но чтобы визуализировать линию, я должен повторно инициировать ее в визуальном режиме.
  3. Чтобы позволить пользователю перемещать 2 точки линии, я должен повторно инициировать линию в режиме редактирования.
  4. В режиме редактирования должно быть отключено разделение линии между двумя маркерами, возможно ли это?

Мне не хватает более простого способа сделать это?

map.pm.enableDraw('Line', {
  snappable: true,
  snapDistance: 20,
});

map.on('pm:drawstart', (event: any) => {
  const { workingLayer } = event;
 
  workingLayer.on('pm:vertexadded', (e: any) => {
    if (workingLayer._rings[0].length >= 2) {

      map.pm.disableDraw('Line', {
        snappable: true,
        snapDistance: 20,
      });
    }
  });
});

leaflet leaflet-geoman leaflet-draw
person Hoetmaaiers    schedule 28.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

  1. Используйте layer.getLatLngs() вместо переменной _rings.
  2. не вызывайте map.pm.disableDraw(), завершите форму с помощью map.pm.Draw.Line._finishShape(), чтобы добавить нарисованный слой на карту
  3. вы можете вызвать map.pm.enableGlobalEditMode(), чтобы включить редактирование для всех слоев, или вы можете включить нужный слой с помощью layer.pm.enable()
  4. используйте вариант hideMiddleMarkers: true
map.pm.setGlobalOptions({hideMiddleMarkers: true})
map.on('pm:drawstart', (event) => {
  const { workingLayer } = event;

  workingLayer.on('pm:vertexadded', (e) => {
    if (workingLayer.getLatLngs().length >= 2) {
       map.pm.Draw.Line._finishShape()
    }
  });
});
map.pm.enableDraw('Line');

https://jsfiddle.net/falkedesign/7sL02y53/

person Falke Design    schedule 28.01.2021