使用nebula.gl编辑deck.gl多边形应选哪种模式？遇ModifyMode异常

1. 修复ModifyMode编辑现有多边形的问题 #

你的代码核心问题在于未维护编辑后的GeoJSON状态，且每次点击都重新创建图层并传入原始数据，同时存在变量名错误：

• 代码中定义的是selectedFeatureIndex，但图层属性误用了selectedFeatureIndexes
• 缺少onEdit回调接收编辑结果，导致每次操作都基于原始数据生成新要素

修正后的代码示例：

// 初始化时维护编辑状态的变量
let editedData = JSON.parse(JSON.stringify(COUNTRIES));
let selectedFeatureIndexes = [];

// 初始化图层（仅创建一次）
const editableLayer = new EditableGeoJsonLayer({
  id: "geojson-layer",
  data: editedData,
  pickable: true,
  pickingRadius: 10,
  autoHighlight: true,
  mode: ModifyMode,
  selectedFeatureIndexes: selectedFeatureIndexes,
  // 关键：通过onEdit接收编辑结果并更新数据
  onEdit: ({ updatedData }) => {
    editedData = updatedData;
    deck.setProps({ layers: [editableLayer] });
  }
});

// 点击事件仅更新选中索引，无需重建图层
onClick: (event) => {
  selectedFeatureIndexes = event.object ? [event.index] : [];
  editableLayer.setProps({ selectedFeatureIndexes });
}

2. nebula.gl核心模式说明 #

EditableGeoJsonLayer的几种核心交互模式适用场景：

• ModifyMode：编辑现有要素（移动顶点、调整形状），必须配合selectedFeatureIndexes指定目标要素
• DrawPolygonMode：绘制全新的多边形要素
• SelectMode：仅选中要素，不触发编辑操作
• TransformMode：整体移动、缩放或旋转选中的要素

切换模式时，直接调用layer.setProps({ mode: TargetMode })即可，无需重新创建图层。

3. Vue.js项目集成要点（原生JS方式） #

在Vue项目中集成无需依赖React，只需注意以下几点：

• 在组件mounted钩子中初始化deck.gl实例和EditableGeoJsonLayer
• 将编辑状态（editedData、selectedFeatureIndexes）作为Vue组件的data属性，实现响应式更新
• 通过watch监听状态变化，调用图层的setProps方法更新配置
• 避免直接操作DOM，全程通过deck.gl API管理图层

示例Vue组件片段：

<template>
  <div id="deck-container"></div>
</template>

<script>
import { Deck } from '@deck.gl/core';
import { EditableGeoJsonLayer, ModifyMode } from 'nebula.gl';

export default {
  data() {
    return {
      deckInstance: null,
      editedData: JSON.parse(JSON.stringify(COUNTRIES)),
      selectedFeatureIndexes: []
    };
  },
  mounted() {
    this.deckInstance = new Deck({
      container: 'deck-container',
      initialViewState: { longitude: 0, latitude: 0, zoom: 1 },
      layers: [this.createEditableLayer()]
    });
  },
  methods: {
    createEditableLayer() {
      return new EditableGeoJsonLayer({
        id: "geojson-layer",
        data: this.editedData,
        pickable: true,
        pickingRadius: 10,
        autoHighlight: true,
        mode: ModifyMode,
        selectedFeatureIndexes: this.selectedFeatureIndexes,
        onEdit: ({ updatedData }) => {
          this.editedData = updatedData;
          this.updateLayer();
        },
        onClick: (event) => {
          this.selectedFeatureIndexes = event.object ? [event.index] : [];
          this.updateLayer();
        }
      });
    },
    updateLayer() {
      this.deckInstance.setProps({
        layers: [this.createEditableLayer()]
      });
    }
  },
  beforeUnmount() {
    this.deckInstance.finalize();
  }
};
</script>

内容的提问来源于stack exchange，提问作者geraldo