如何禁用中点选择，拖动 LineString 类型（draw_line_string 模式）

Question

如何禁用用户在 mapbox-gl-draw 中 select (direct_select) LineString 的中点的功能？我有一个 "annotations" 的自定义模式，它应该只允许具有 2 个顶点的 LineString。

我在自定义模式 (https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md) 中尝试了一些生命周期挂钩，特别是 draw_line_string，包括 onDrag。我的问题是我根本不希望拖动点存在（这将涉及用户看到一个中点，拖动该顶点，然后看到它快速返回）。

我也尝试过处理绘图样式，但它们对所有中点（包括多边形）都是通用的。

第三种方法可能是在我的框架中在 mapbox-gl-draw 之外使它无效，但我什至想完全避免 select 中点的能力。

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);

如何禁用中点选择，拖动 LineString 类型（draw_line_string 模式）

How to disable midpoint selection, dragging for LineString types (draw_line_string mode)

mapbox-gl-draw