Как отключить выбор средней точки, перетаскивая для типов LineString (режим draw_line_string)

Question

Как отключить возможность для пользователя выбирать (direct_select) среднюю точку LineString в mapbox-gl-draw? У меня есть пользовательский режим для «аннотаций», который должен разрешать только LineStrings с 2 вершинами.

Я пробовал некоторые из ловушек жизненного цикла в пользовательских режимах (https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md), специально для draw_line_string, включая onDrag. Моя проблема в том, что я вообще не хочу, чтобы точка перетаскивания существовала (это потребовало бы пользователь видит среднюю точку, перетаскивая эту вершину, а затем видит, как она возвращается назад.

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

Третий способ может заключаться в том, чтобы сделать это недействительным вне mapbox-gl-draw в моей структуре, но я бы хотел вообще избежать возможности выбора средней точки.

Answer 1

Этого можно добиться, создав собственный режим из режима direct_select:

import * as MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';
import createSupplementaryPoints from '@mapbox/mapbox-gl-draw/src/lib/create_supplementary_points';
import Constants from '@mapbox/mapbox-gl-draw/src/constants';

const DirectSelectWithoutMiddleVertexMode = MapboxDraw.modes.direct_select;

DirectSelectWithoutMiddleVertexMode.toDisplayFeatures = function (state, geojson, push) {
  if (state.featureId === geojson.properties.id) {
    geojson.properties.active = Constants.activeStates.ACTIVE;
    push(geojson);
    createSupplementaryPoints(geojson, {
      map: this.map,
      midpoints: false,
      selectedPaths: state.selectedCoordPaths
    }).forEach(push);
  } else {
    geojson.properties.active = Constants.activeStates.INACTIVE;
    push(geojson);
  }
  this.fireActionable(state);
};

export default DirectSelectWithoutMiddleVertexMode;

Единственное, что нужно сделать, это установить для свойства midpoints значение false, чтобы избежать создания средней точки.

После этого используйте пользовательский режим для переопределения режима direct_select в параметрах рисования:

import DirectSelectWithoutMiddleVertexMode from './DirectSelectWithoutMiddleVertexMode';

const drawOptions = {
    modes: Object.assign({
        direct_select: DirectSelectWithoutMiddleVertexMode
    }, MapboxDraw.modes)
};

const draw = new MapboxDraw(drawOptions);