CesiumJS多边形选择操作卡顿，如何优化提速？

针对你加载大量GeoJSON MultiPolygons作为独立Entity，选定时切换颜色耗时1-2秒的问题，Cesium原生没有直接批量设置Entity颜色的API，但可以通过以下优化点大幅提升性能，避免不必要的耗时：

核心优化思路：减少渲染触发次数与底层渲染开销 #

1. 用Primitive替代Entity（最有效） #

Entity是Cesium的高层封装，每个Entity都会维护独立的渲染状态，大量Entity的逐个修改会触发多次渲染更新。改用Primitive+BatchTable的方式，将所有MultiPolygon打包为单个Primitive集合：

• 加载GeoJSON数据后，提取几何数据构建PolygonGeometryInstance，为每个实例添加自定义属性（如isSelected）。
• 使用自定义BatchTable属性，在Appearance的着色器中根据isSelected值自动切换颜色。
• 修改颜色时，只需批量更新BatchTable中的isSelected属性，一次渲染即可完成所有颜色切换，耗时可降至几十毫秒内。

示例代码片段：

// 加载GeoJSON并构建Primitive
const dataSource = await Cesium.GeoJsonDataSource.load('your-data.geojson');
const instances = [];
dataSource.entities.values.forEach((entity, index) => {
  instances.push(new Cesium.GeometryInstance({
    geometry: entity.polygon._geometry,
    attributes: {
      isSelected: new Cesium.CustomGeometryInstanceAttribute({
        componentDatatype: Cesium.ComponentDatatype.UNSIGNED_BYTE,
        componentsPerAttribute: 1,
        value: [0] // 0=未选中，1=选中
      })
    },
    id: index
  }));
});

const primitive = new Cesium.Primitive({
  geometryInstances: instances,
  appearance: new Cesium.MaterialAppearance({
    fragmentShaderSource: `
      uniform vec4 highlightColor;
      uniform vec4 normalColor;
      varying float v_isSelected;
      
      void main() {
        gl_FragColor = v_isSelected > 0.5 ? highlightColor : normalColor;
      }
    `,
    uniforms: {
      highlightColor: Cesium.Color.RED,
      normalColor: Cesium.Color.GRAY
    }
  })
});
viewer.scene.primitives.add(primitive);

// 批量切换选中状态
function updateSelection(selectedIds) {
  const attributes = primitive.getGeometryInstanceAttributes('all');
  // 更新选中状态
  for (let i = 0; i < attributes.isSelected.value.length; i++) {
    attributes.isSelected.value[i] = selectedIds.includes(i) ? 1 : 0;
  }
  attributes.isSelected.needsUpdate = true;
}

2. 分批修改Entity，避免主线程阻塞 #

如果必须使用Entity，不要一次性遍历所有实体修改颜色，而是用requestAnimationFrame分批次处理：

• 将实体分为若干组，每次修改一组（比如100个），每帧处理一组，避免阻塞UI线程，提升用户体验。

示例代码片段：

const allEntities = viewer.entities.values;
const batchSize = 100;
let currentIndex = 0;

function updateEntityColors(selectedEntityIds) {
  const endIndex = Math.min(currentIndex + batchSize, allEntities.length);
  for (let i = currentIndex; i < endIndex; i++) {
    const entity = allEntities[i];
    entity.polygon.material = selectedEntityIds.includes(entity.id) 
      ? Cesium.Color.RED 
      : Cesium.Color.GRAY;
  }
  currentIndex = endIndex;
  if (currentIndex < allEntities.length) {
    requestAnimationFrame(() => updateEntityColors(selectedEntityIds));
  } else {
    currentIndex = 0;
  }
}

3. 关闭不必要的渲染属性 #

每个Entity默认可能开启了outline、distanceDisplayCondition等非必需属性，关闭这些可以减少渲染计算量：

entity.polygon.outline = false;
entity.polygon.distanceDisplayCondition = undefined;

问题根源 #

你之前的操作耗时，是因为每个Entity的颜色修改都会触发Cesium的渲染状态更新，大量Entity的修改会累积成多次渲染请求，导致总耗时增加。通过上述优化，要么将批量修改合并为一次渲染更新，要么分散修改避免主线程阻塞，都能有效提升速度。

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