如何禁用中点选择，为LineString类型拖动(draw_line_string模式)

Question

如何禁用用户在mapbox-gl-direct_select中选择(绘制) LineString中点的功能？我有一个自定义模式的“注释”，这应该只允许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);