2

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

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

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

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

4

1 回答 1

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);
于 2019-03-13T14:06:07.527 回答