Cesium 点击模型获取模型属性并高亮模型

Cesium 点击模型获取模型属性并高亮模型

新版的的cesium .getPropertyNames 已被弃用，应使用 .getPropertyIds

获取指定属性 pickedObject.getProperty('id') 获取对象的id属性值，

类 Cesium3DTileFeature， Cesium3DTilePointFeature和 ModelFeature 都有命名的元数据方法。这些在CesiumJS 1.95中已弃用，取而代之的是方法，以便与其他类保持更好的一致性
该PR为 Cesium3DTileFeature、Cesium3DTilePointFeature和 ModelFeature 等类添加了方法，以更好地与其他类保持一致。.getPropertyIds 3DTiles_metadata

let clickHandler: Cesium.ScreenSpaceEventHandler | null = null // 点击事件处理器


/**
 * 添加点击事件
 */
function addClickEvent() {
  // 记录上一次选中的对象和颜色，用于清除高亮
  let lastPickedObject: Cesium.Cesium3DTileFeature | null = null
  let lastColor: Cesium.Color | null = null

  /**
   * 点击事件处理函数
   * @param click 点击事件对象，包含点击位置信息
   */
  const onMouseClick = (click: Cesium.ScreenSpaceEventHandler.PositionedEvent) => {
    const pickedObject = viewer.scene.pick(click.position) // 拾取场景中的对象

    // 如果之前有高亮的对象，且不是当前点击的对象（或者点击了空白处），则恢复颜色
    if (Cesium.defined(lastPickedObject) && lastPickedObject !== pickedObject) {
      // 恢复之前高亮的对象颜色
      if (lastColor) {
        lastPickedObject.color = lastColor
      }
      lastPickedObject = null // 清除记录的高亮对象
      lastColor = null // 清除记录的高亮颜色
    }

    // 如果点击的是 3D 模型对象（如建筑）
    if (Cesium.defined(pickedObject)) {
      // 如果点击的是同一个对象，直接返回
      if (pickedObject === lastPickedObject) return

      console.log('拾取到的对象:', pickedObject) // 打印拾取到的对象
      console.log('属性ID列表:', pickedObject.getPropertyIds())

      // 遍历并打印所有属性ID和对应值
      for (const id of pickedObject.getPropertyIds()) {
        console.log(id, pickedObject.getProperty(id))
      }

      // 保存当前对象和原始颜色
      lastPickedObject = pickedObject
      // 克隆颜色对象，防止引用被修改
      lastColor = pickedObject.color.clone()

      // 改变颜色为红色
      pickedObject.color = Cesium.Color.fromCssColorString('red').withAlpha(0.5)
      console.log('pickedObject.color', pickedObject.color)
    }
  }

  // 鼠标单击左键事件
  if (clickHandler) {
    clickHandler.destroy()
    clickHandler = null
  }

  // //鼠标单击左键事件
  // viewer.screenSpaceEventHandler.setInputAction(
  //   onMouseClick,
  //   Cesium.ScreenSpaceEventType.LEFT_CLICK,
  // )
  clickHandler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
  clickHandler.setInputAction(onMouseClick, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

官方示例

// On mouse over, display all the properties for a feature in the console log.
handler.setInputAction(function(movement) {
    const feature = scene.pick(movement.endPosition);
    if (feature instanceof Cesium.Cesium3DTileFeature) {
        const propertyIds = feature.getPropertyIds();
        const length = propertyIds.length;
        for (let i = 0; i < length; ++i) {
            const propertyId = propertyIds[i];
            console.log(`{propertyId}: ${feature.getProperty(propertyId)}`);
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);