本文详解如何在 cesiumjs 中同时创建、显示并独立编辑多个多边形（如拖拽顶点），避免因共享坐标引用或错误更新导致的多边形相互覆盖或消失问题。核心在于分离静态渲染与动态编辑状态，确保每个多边形拥有独立坐标副本和生命周期。

本文详解如何在 cesiumjs 中同时创建、显示并独立编辑多个多边形（如拖拽顶点），避免因共享坐标引用或错误更新导致的多边形相互覆盖或消失问题。核心在于分离静态渲染与动态编辑状态，确保每个多边形拥有独立坐标副本和生命周期。

在 CesiumJS 中实现多个可交互多边形（如支持顶点拖拽）时，一个常见却隐蔽的陷阱是：所有多边形共用同一份坐标数组引用，且 CallbackProperty 每次都返回同一对象实例。这正是提问者代码中 loadedPoly 和 selectedPolygonCoordinates 全局变量引发的核心问题——当编辑第二个多边形时，selectedPolygonCoordinates 被重写，而第一个多边形的 CallbackProperty 仍绑定该数组，导致其视觉表现被“覆盖”为新值，看似“消失”。

✅ 正确架构原则：静态展示 + 动态编辑分离

我们不应让所有多边形始终处于“动态回调”状态。推荐采用 “静态优先、按需激活” 模式：

• 初始加载：以 PolygonHierarchy 静态方式创建多边形（非 CallbackProperty），性能更优且互不干扰；
• 编辑触发：仅当用户点击某个多边形顶点时，临时销毁原静态多边形，并基于其当前坐标新建一个专属的、带 CallbackProperty 的动态多边形；
• 编辑完成：用户确认后，将最新坐标持久化，并重建为静态多边形，释放动态资源。

⚠️ 关键提醒：Cesium 实体 ID 不应依赖 _name 或内部私有属性（如 _description._value），这些属于未公开 API，极易在版本升级中失效。务必使用 entity.id、entity.name 及自定义 properties 存储元数据。

✅ 改进后的关键代码结构（精简可运行版）

const viewer = new Cesium.Viewer("cesiumContainer");
const polygonData = [
  { id: "poly_1", name: "Area A", coords: [72.35, 52.57, 96.18, 44.89, 72.39, 39.86] },
  { id: "poly_2", name: "Area B", coords: [67.30, 32.88, 69.14, 32.98, 69.19, 31.35, 66.85, 31.71, 66.55, 32.68] }
];

// 【1】存储每个区域的独立坐标副本（关键！）
const polygonStates = new Map();
polygonData.forEach(data => {
  const coords = [...data.coords]; // 深拷贝坐标
  polygonStates.set(data.id, { coords, name: data.name, editing: false });
  addStaticPolygon(data.id, data.name, coords);
});

// 【2】添加静态多边形（高性能、无冲突）
function addStaticPolygon(id, name, coords) {
  viewer.entities.add({
    id,
    name,
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray(coords),
      material: Cesium.Color.fromBytes(221, 240, 235, 160)
    }
  });
}

// 【3】激活编辑：销毁静态实体 → 创建动态实体 + 顶点
function startEditing(polyId) {
  const state = polygonStates.get(polyId);
  if (!state || state.editing) return;

  // 清理旧实体（含顶点）
  viewer.entities.removeById(polyId);
  viewer.entities.removeAll(); // 或精确移除对应顶点（见下方）

  // 创建动态多边形（CallbackProperty 绑定本区域独立 coords）
  const dynamicPoly = viewer.entities.add({
    id: `${polyId}_edit`,
    name: `${state.name} (editing)`,
    polygon: {
      hierarchy: new Cesium.CallbackProperty(() => ({
        positions: Cesium.Cartesian3.fromDegreesArray(state.coords)
      }), false),
      material: Cesium.Color.YELLOW.withAlpha(0.5)
    }
  });

  // 创建可拖拽顶点（每个顶点关联其索引）
  state.coords.forEach((_, i) => {
    const lon = state.coords[i * 2];
    const lat = state.coords[i * 2 + 1];
    const pointId = `${polyId}_point_${i}`;

    viewer.entities.add({
      id: pointId,
      name: `Vertex ${i + 1}`,
      position: Cesium.Cartesian3.fromDegrees(lon, lat),
      point: {
        color: Cesium.Color.RED,
        pixelSize: 12,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2
      },
      properties: { polyId, vertexIndex: i } // ✅ 安全元数据
    });
  });

  state.editing = true;
}

// 【4】顶点拖拽更新逻辑（安全更新指定多边形的指定顶点）
function updateVertexPosition(entity, newPosition) {
  const { polyId, vertexIndex } = entity.properties.getValue();
  const state = polygonStates.get(polyId);
  if (!state) return;

  const carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(newPosition);
  const lon = Cesium.Math.toDegrees(carto.longitude);
  const lat = Cesium.Math.toDegrees(carto.latitude);

  state.coords[vertexIndex * 2] = lon;
  state.coords[vertexIndex * 2 + 1] = lat;

  // 同步更新顶点位置（可选）
  entity.position.setValue(Cesium.Cartesian3.fromDegrees(lon, lat));
}

// 【5】结束编辑：重建静态多边形，清理动态资源
function finishEditing(polyId) {
  const state = polygonStates.get(polyId);
  if (!state) return;

  // 移除所有动态实体（多边形+顶点）
  viewer.entities.removeById(`${polyId}_edit`);
  for (let i = 0; i < state.coords.length / 2; i++) {
    viewer.entities.removeById(`${polyId}_point_${i}`);
  }

  // 重建静态多边形
  addStaticPolygon(polyId, state.name, [...state.coords]);
  state.editing = false;
}

? 常见错误规避清单

错误模式	后果	修复方案
全局共享 selectedPolygonCoordinates 数组	编辑任一多边形均污染其他多边形坐标	✅ 每个多边形使用独立 state.coords 数组（Map/对象存储）
直接修改 entity._polygon._hierarchy 私有属性	版本兼容性差，易崩溃	✅ 使用 CallbackProperty + 独立数据源，避免操作私有字段
顶点实体未绑定所属多边形 ID	无法定位更新目标	✅ 用 entity.properties 存储 polyId 和 vertexIndex
未清理旧动态实体即创建新实体	内存泄漏、图层混乱	✅ viewer.entities.removeById() 精准清理

✅ 最佳实践总结

• 永远不要复用坐标数组：对每个可编辑多边形维护深拷贝坐标；
• 拒绝私有属性访问：用 properties 替代 _name、_description 等内部字段；
• 编辑即隔离：一次只激活一个区域编辑，避免并发冲突；
• 静态为常态，动态为瞬时：95% 时间使用静态多边形，仅编辑帧内启用 CallbackProperty；
• 善用 Entity ID 体系：id 是唯一可靠标识符，配合 properties 构建业务语义。

通过以上设计，你将获得稳定、可扩展、符合 Cesium 官方范式的多边形编辑能力——无论绘制 2 个还是 20 个多边形，均可独立拖拽、互不干扰。