如何通过Viewer SDK实现类Navisworks风格的固定面板布局？

Viewer SDK本身没有提供这种固定侧边栏的内置布局方案，但完全可以通过自定义扩展、DOM操作结合Viewer核心API实现，以下是具体思路和实现要点：

左侧固定层级树 #

Viewer默认的模型树是浮动面板，你可以通过两种方式实现固定左侧的层级树：

• 自定义DOM树：创建一个固定在左侧的DOM容器，调用viewer.getModelTree()获取模型层级数据，自行渲染树形结构，同时绑定节点点击事件调用viewer.select(dbId)同步选中状态，监听viewer的MODEL_ROOT_LOADED_EVENT来初始化树形结构。
• 改造内置面板：利用Autodesk.Viewing.UI.DockingPanel创建自定义面板，设置其固定定位到左侧，而非浮动模式，然后复用Viewer内置的模型树组件。

右侧固定属性面板 #

同样放弃默认的浮动属性面板，自定义固定在右侧的DOM容器，通过监听Viewer的选择事件来动态加载属性：

1. 创建右侧固定面板的DOM元素，添加CSS使其固定在屏幕右侧，占据全屏高度。
2. 监听Autodesk.Viewing.SELECTION_CHANGED_EVENT事件，当选中对象变化时，调用viewer.getProperties()获取选中对象的属性数据。
3. 将属性数据渲染到自定义面板中，若未选中任何对象则清空面板内容。

关键代码示例 #

事件监听与属性渲染

// 初始化右侧属性面板监听
function initPropertiesPanel(viewer) {
  const panel = document.getElementById('custom-properties-panel');
  // 监听选择变化
  viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (event) => {
    const selectedIds = event.dbIdArray;
    if (selectedIds.length === 0) {
      panel.innerHTML = '<p>未选中任何对象</p>';
      return;
    }
    // 获取第一个选中对象的属性
    viewer.getProperties(selectedIds[0], (props) => {
      let content = `<h3>${props.name}</h3>`;
      props.properties.forEach(prop => {
        content += `<div class="property-item">
          <span class="property-label">${prop.displayName}:</span>
          <span class="property-value">${prop.displayValue}</span>
        </div>`;
      });
      panel.innerHTML = content;
    }, (err) => {
      panel.innerHTML = `<p>获取属性失败: ${err.message}</p>`;
    });
  });
}

布局CSS

/* 左侧层级树容器 */
#custom-model-tree {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  padding: 1rem;
  z-index: 100;
}

/* 右侧属性面板容器 */
#custom-properties-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  padding: 1rem;
  z-index: 100;
}

/* 调整Viewer容器，避开左右面板 */
#viewerDiv {
  margin-left: 280px;
  margin-right: 320px;
  width: calc(100% - 560px);
  height: 100vh;
}

额外优化点 #

• 若需要支持多模型的层级树切换，可以监听viewer的MODEL_ADDED_EVENT和MODEL_REMOVED_EVENT来更新树形结构。
• 对于属性面板，可添加筛选、排序功能，提升用户体验。
• 若需要编辑属性，可调用viewer.setProperties()方法（需确保模型支持属性编辑权限）。

内容的提问来源于stack exchange，提问作者Andrés Martínez