Question

如何禁用用户在mapbox-gl-draw中选择（direct_select）LineString的中点的功能？我有一个用于“注释”的自定义模式，该模式仅应允许具有2个顶点的LineString。

我已经在自定义模式（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);

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

1 个答案: