cesium拾取管网属性功能

最近在做移动端地下管网可视化系统时，做到一个属性查询功能。就是拾取一根管道，读取该管道属性并显示。实现效果如下图。

核心代码如下：

// 开始拾取
const handlePick = () => {
  if (!cesiumStore.viewer) {
    Notify.create({
      type: "negative",
      message: "Cesium Viewer 未初始化。",
      position: "top",
    });
    return;
  }

  Notify.create({
    type: "positive",
    message: "已开始拾取，请点击实体。",
    position: "top",
  });

  handlerPick.value = new Cesium.ScreenSpaceEventHandler(
    cesiumStore.viewer.scene.canvas
  );

  handlerPick.value.setInputAction((click) => {
    const pickedObject = cesiumStore.viewer.scene.pick(click.position, 1, 1);
    if (pickedObject instanceof Cesium.Cesium3DTileFeature) {
      const propertyIds = pickedObject.getPropertyIds();
      const properties = propertyIds.reduce((acc, propName) => {
        acc[propName] = pickedObject.getProperty(propName);
        return acc;
      }, {});
      updatePropertyDisplay(properties);
    } else {
      console.log("No feature picked.");
    }
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
};

// 更新属性展示内容
const updatePropertyDisplay = (properties) => {
  const propertyDisplay = document.getElementById("property-display");
  propertyDisplay.innerHTML = ""; // 清空内容

  for (const [key, value] of Object.entries(properties)) {
    const propertyLine = document.createElement("div");
    propertyLine.textContent = `${key}: ${value}`;
    propertyDisplay.appendChild(propertyLine);
  }

  // 确保展示区域可见
  propertyDisplay.style.display = "block";
};

这段代码通过调用 Cesium 的 ScreenSpaceEventHandler 接口，监听鼠标点击事件，使用 scene.pick 接口拾取 3D Tiles 场景中的 Feature（要素），提取其属性信息（通过 getPropertyIds 和 getProperty 接口），并将这些属性动态展示到页面的指定区域。

但是现在遇到一些问题，就是在选择完Feature，显示完属性后，cesium场景开始极度卡顿，目前没有找到原因，有没有大神可以交流赐教！本人不胜感激！