如何获取APS Viewer PropertyPanel的属性对象并为自定义属性添加事件

核心逻辑说明 #

Autodesk.Viewing.UI.PropertyPanel的onPropertyClick是面板级的全局回调，不需要单独给每个通过addProperty创建的属性绑定事件，直接重写该方法即可响应所有属性的点击操作，触发时传入的property参数就是你添加的属性对象。

实现方式 #

1. 自定义PropertyPanel子类（推荐，便于维护）

class CustomPropertyPanel extends Autodesk.Viewing.UI.PropertyPanel {
    constructor(viewer, container, id, title, options) {
        super(viewer, container, id, title, options);
    }

    // 重写点击回调方法
    onPropertyClick(property, event) {
        // property就是addProperty时传入的属性对象
        console.log('点击的属性详情:', property);
        
        // 根据属性的key或自定义字段区分处理
        if (property.key === 'custom-equipment-id') {
            // 执行对应业务逻辑，比如弹窗、跳转等
            alert(`设备ID：${property.value} 被点击`);
        }

        // 保留父类默认行为（可选，按需删除）
        super.onPropertyClick(property, event);
    }
}

// 初始化自定义面板并替换默认面板
const viewer = new Autodesk.Viewing.GuiViewer3D(container);
const customPanel = new CustomPropertyPanel(viewer, container, 'custom-props-panel', '自定义属性面板');
viewer.setPropertyPanel(customPanel);

2. 直接修改现有面板实例（快速临时方案）

// 获取当前 viewer 的属性面板实例
const propertyPanel = viewer.getPropertyPanel();
// 保存原方法，避免完全覆盖默认逻辑
const originalOnClick = propertyPanel.onPropertyClick;

// 重写点击回调
propertyPanel.onPropertyClick = function(property, event) {
    // 自定义逻辑
    if (property.customData?.isLink) {
        console.log('跳转至:', property.customData.linkUrl);
        // 这里可以实现跳转等操作
    }

    // 调用原方法
    originalOnClick.call(this, property, event);
};

3. 添加属性时携带自定义标识

添加属性时可以给对象增加自定义字段，方便在回调中识别：

// 向面板添加带自定义数据的属性
propertyPanel.addProperty(
    {
        displayName: '设备名称',
        key: 'equipment-name',
        value: '离心泵',
        // 自定义字段，用于回调中判断
        customData: {
            isLink: true,
            linkUrl: '/equipment/detail/1001'
        }
    },
    '设备信息' // 属性分组名称
);

内容的提问来源于stack exchange，提问作者Tim Huang