如何为选中的Autodesk Viewer节点/组件显示标签信息？求客户端实现代码

嘿，刚好有过类似的开发经验，给你分享两个直接可用的客户端实现方案，都是基于Autodesk Viewer原生API来做的，不需要额外依赖👇

这个方案用原生DOM元素实现轻量标签，监听节点选中事件后，在元素对应的屏幕位置显示基础信息，比如节点名称。

// 假设你已经初始化好了Viewer实例，存在window.viewer中
const viewer = window.viewer;

// 存储当前显示的标签，避免重复创建
let activeLabel = null;

// 监听节点选中变化事件
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (event) => {
  // 先移除之前的标签
  if (activeLabel) {
    document.body.removeChild(activeLabel);
    activeLabel = null;
  }

  // 没有选中任何元素时直接返回
  if (event.dbIdArray.length === 0) return;

  const targetDbId = event.dbIdArray[0];
  // 获取选中节点的属性信息（这里以名称为例）
  viewer.getProperties(targetDbId, (props) => {
    const nodeName = props.name;
    // 将节点的3D中心坐标转换为屏幕坐标
    viewer.worldToClient(viewer.getBoundingBox(targetDbId).center(), (screenPos) => {
      // 创建标签DOM元素
      activeLabel = document.createElement('div');
      activeLabel.style.position = 'absolute';
      activeLabel.style.left = `${screenPos.x + 15}px`;
      activeLabel.style.top = `${screenPos.y - 25}px`;
      activeLabel.style.background = 'rgba(0, 0, 0, 0.85)';
      activeLabel.style.color = '#fff';
      activeLabel.style.padding = '5px 10px';
      activeLabel.style.borderRadius = '4px';
      activeLabel.style.zIndex = 9999;
      activeLabel.style.pointerEvents = 'none'; // 不干扰Viewer的交互操作
      activeLabel.textContent = `节点: ${nodeName}`;
      document.body.appendChild(activeLabel);
    });
  });
});

代码说明 #

• 监听SELECTION_CHANGED_EVENT事件捕获节点选中状态
• 用getProperties获取节点属性，worldToClient转换坐标实现标签定位
• 每次选中新节点时自动清理旧标签，避免界面混乱

如果需要展示更多属性（比如ID、类型、自定义参数），可以做一个带样式的弹窗式标签，信息更丰富直观。

const viewer = window.viewer;
let detailTooltip = null;

viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (event) => {
  // 清理旧的详情标签
  if (detailTooltip) {
    document.body.removeChild(detailTooltip);
    detailTooltip = null;
  }

  if (event.dbIdArray.length === 0) return;

  const targetDbId = event.dbIdArray[0];
  viewer.getProperties(targetDbId, (props) => {
    viewer.worldToClient(viewer.getBoundingBox(targetDbId).center(), (screenPos) => {
      // 创建详情标签容器
      detailTooltip = document.createElement('div');
      detailTooltip.style.position = 'absolute';
      detailTooltip.style.left = `${screenPos.x + 25}px`;
      detailTooltip.style.top = `${screenPos.y}px`;
      detailTooltip.style.background = '#fff';
      detailTooltip.style.border = '1px solid #e0e0e0';
      detailTooltip.style.borderRadius = '6px';
      detailTooltip.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
      detailTooltip.style.padding = '12px';
      detailTooltip.style.zIndex = 9999;
      detailTooltip.style.minWidth = '220px';
      detailTooltip.style.pointerEvents = 'none';

      // 拼接详情内容，包含基础属性和自定义属性
      let tooltipContent = `
        <h4 style="margin: 0 0 8px 0; color:#333;">组件详情</h4>
        <p style="margin:4px 0;"><strong>节点ID:</strong> ${targetDbId}</p>
        <p style="margin:4px 0;"><strong>组件名称:</strong> ${props.name}</p>
        <p style="margin:4px 0;"><strong>类型:</strong> ${props.type}</p>
      `;

      // 如果存在自定义属性，追加到内容里
      if (props.properties && props.properties.length > 0) {
        tooltipContent += '<h5 style="margin:8px 0 4px 0; color:#666;">自定义属性:</h5>';
        props.properties.forEach(prop => {
          tooltipContent += `<p style="margin:2px 0; font-size:14px;">${prop.displayName}: ${prop.displayValue}</p>`;
        });
      }

      detailTooltip.innerHTML = tooltipContent;
      document.body.appendChild(detailTooltip);
    });
  });
});

额外注意事项 #

• 确保代码在Viewer初始化完成后执行，比如放在Autodesk.Viewing.GEOMETRY_LOADED_EVENT事件回调里，避免API调用失败
• 如果需要支持多选，可修改event.dbIdArray的遍历逻辑，不过通常标签只展示第一个选中元素的信息
• 可以根据需求调整标签的样式、位置，比如让标签跟随鼠标移动，或者固定在元素的特定方位

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