它们是基于多边形的属性来禁用少数多边形上的交互的方法吗？

Question

我使用带有mapbox-gl-draw的mapbox gl在地图上将要素渲染为多边形。我想将多边形模式更改为'STATIC'(没有多边形上的交互)，只针对与特征属性对象中的条件匹配的某些多边形。当前将静态模式传递给draw-gl组件会禁用每个多边形上的交互。

示例:具有feature.properties.isDisabled == true的多边形应该没有交互。

Answer 1

我知道你可以这样做的一种方法是修改mapbox-draw-gl的交互模式，以便它在允许任何交互之前检查特定的功能属性。

例如，simple_select draw模式允许您选择、删除和拖动特征(在本例中为多边形)。通过执行以下操作，可以修改simple_select模式，以禁用具有isDisabled属性的特征的删除和拖动交互：

const customSimpleSelectMode = () => {
   const SimpleSelectMode = MapboxDraw.modes.simple_select;

  const { dragMove: _dragMove, onTrash: _onTrash } = SimpleSelectMode;

  SimpleSelectMode.dragMove = function (...args) {
    const selectedFeatures = this.getSelected();
    if (selectedFeatures.some(feat => feat.properties.isDisabled)) return;

    _dragMove.apply(this, args);
  };

  SimpleSelectMode.onTrash = function (...args) {
    const selectedFeatures = this.getSelected();
    if (selectedFeatures.some(feat => feat.properties.isDisabled)) return;

    _onTrash.apply(this, args);
  };
  return SimpleSelectMode;
}

当你要实例化一个draw实例时，执行以下操作：

const drawInstance = new MapboxDraw({
  modes: {
    ...MapboxDraw.modes,
    simple_select: customSimpleSelectMode,
  },
  // ...other config options
})

你可以找到不同绘图模式here的源代码。

这种方法在某种程度上扩展了标准的Mapbox绘制模式，您可能必须锁定您在package.json中使用的mapbox-draw-gl版本，这样对库的更新就不会破坏扩展。

这种方法的缺点：

• 您必须更新每个单独的绘制模式，以允许您想要禁用的任何交互。特别是对于多边形，我知道simple_select和direct_select模式都允许编辑或删除现有的多边形，因此您必须修改这两种模式。