如何使用 Nebula.gl 编辑 deck.gl 中的多边形？

使用 Nebula.gl 编辑 deck.gl 多边形

引言

deck.gl 是一个强大的数据可视化库，允许你创建交互式 3D 地图和图形。Nebula.gl 是一个构建在 deck.gl 之上的编辑工具包，它提供了对图形进行编辑和操作的能力。

本指南将向你展示如何使用 Nebula.gl 编辑 deck.gl 中的现有多边形。我们将使用 EditableGeoJsonLayer，这是一个允许你加载和编辑 GeoJSON 数据的图层。

安装 Nebula.gl

首先，你需要安装 Nebula.gl：

npm install @nebula.gl/edit-modes @nebula.gl/layers

创建可编辑的 GeoJSON 图层

要创建可编辑的 GeoJSON 图层，请使用以下代码：

import {EditableGeoJsonLayer, ModifyFeatureMode} from "@nebula.gl/edit-modes";

const layer = new EditableGeoJsonLayer({
  id: "geojson-layer",
  data: COUNTRIES, // 你的 GeoJSON 数据
  pickable: true,
  pickingRadius: 10,
  autoHighlight: true,
  mode: ModifyFeatureMode,
  selectedFeatureIndexes: [], // 初始选择的要素索引
});

注意：

• 确保你的 GeoJSON 数据是有效的，并且不包含任何自相交的多边形。
• 你可以调整 pickingRadius 以便更容易选择要素。
• 你可以使用 autoHighlight 属性来高亮选定的要素。

编辑多边形

要编辑多边形，请执行以下步骤：

1. 选择一个多边形：使用鼠标在多边形上单击以选择它。
2. 开始编辑：选择多边形后，你将看到编辑句柄出现在多边形的各个顶点。
3. 修改形状：拖动编辑句柄以修改多边形的形状。
4. 完成编辑：完成修改后，单击鼠标以完成编辑。

其他模式

Nebula.gl 提供了其他模式，可用于编辑图形：

• CreateMode： 允许你创建新的要素。
• TranslateMode： 允许你平移选定的要素。
• RotateMode： 允许你旋转选定的要素。
• ScaleMode： 允许你缩放选定的要素。

结论

使用 Nebula.gl 编辑 deck.gl 多边形是一个简单而强大的过程。通过使用 EditableGeoJsonLayer 和 ModifyFeatureMode，你可以轻松地修改现有图形的形状和属性。

常见问题解答

问：如何编程方式选择要素？
答：你可以使用 selectedFeatureIndexes 属性来编程方式选择要素。

问：如何高亮选定的要素？
答：你可以使用 autoHighlight 属性来高亮选定的要素。

问：如何增加拾取半径？
答：你可以调整 pickingRadius 属性来增加拾取半径。

问：我可以编辑自相交的多边形吗？
答：否，你无法编辑自相交的多边形。确保你的 GeoJSON 数据是有效的，并且不包含任何自相交的多边形。

问：我可以使用 Nebula.gl 编辑其他类型的图形吗？
答：是的，你可以使用 Nebula.gl 编辑点、线和符号。