如何将Forge Viewer的Model-Browser与Layer-Manager移入固定侧边栏？

核心思路 #

Forge Viewer内置的ModelStructurePanel（对应Model Browser）和LayerManagerPanel（对应Layer Manager）均为可复用的UI组件，无需从零实现功能，只需将它们的DOM节点挂载到自定义侧边栏容器，并绑定Viewer实例即可复用全部原生交互能力。

1. 实现Model Browser集成 #

替换原displayModelBrowser函数，直接实例化内置面板并挂载到自定义容器：

let modelBrowserPanel;

function displayModelBrowser() {
  const modelBrowserContent = document.getElementById('modelBrowserContent');
  modelBrowserContent.innerHTML = '';
  // 实例化ModelStructurePanel，参数依次为：面板ID、面板标题
  modelBrowserPanel = new Autodesk.Viewing.UI.ModelStructurePanel('custom-model-browser', 'Model Browser');
  // 绑定Viewer实例，让面板获取模型数据
  modelBrowserPanel.setViewer(viewer);
  // 将面板DOM元素插入自定义容器
  modelBrowserContent.appendChild(modelBrowserPanel.container);
  // 初始化面板加载模型结构数据
  modelBrowserPanel.initialize();
  // 显示面板
  modelBrowserPanel.setVisible(true);
}

2. 实现Layer Manager集成 #

同理，替换原displayLayerManager函数，集成内置图层管理器面板：

let layerManagerPanel;

function displayLayerManager() {
  const layerManagerContent = document.getElementById('layerManagerContent');
  layerManagerContent.innerHTML = '';
  // 实例化LayerManagerPanel，参数依次为：面板ID、面板标题
  layerManagerPanel = new Autodesk.Viewing.UI.LayerManagerPanel('custom-layer-manager', 'Layer Manager');
  // 绑定Viewer实例
  layerManagerPanel.setViewer(viewer);
  // 将面板DOM元素插入自定义容器
  layerManagerContent.appendChild(layerManagerPanel.container);
  // 初始化面板加载图层数据
  layerManagerPanel.initialize();
  // 显示面板
  layerManagerPanel.setVisible(true);
}

3. 优化标签切换逻辑 #

切换标签时需控制面板的显示/隐藏，避免资源浪费：

function setupTabSwitching() {
  const tabs = document.querySelectorAll('.tab');
  const tabContents = document.querySelectorAll('.tabContent');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      tabContents.forEach(tc => tc.classList.remove('active'));

      tab.classList.add('active');
      const activeTabId = tab.dataset.tab;
      document.getElementById(activeTabId).classList.add('active');

      // 根据激活标签控制面板显示状态
      if (activeTabId === 'modelBrowser' && modelBrowserPanel) {
        modelBrowserPanel.setVisible(true);
        modelBrowserPanel.update(); // 刷新确保数据最新
      } else if (modelBrowserPanel) {
        modelBrowserPanel.setVisible(false);
      }

      if (activeTabId === 'layerManager' && layerManagerPanel) {
        layerManagerPanel.setVisible(true);
        layerManagerPanel.update();
      } else if (layerManagerPanel) {
        layerManagerPanel.setVisible(false);
      }
    });
  });
}

4. 样式适配（必加） #

Viewer内置面板依赖自身样式库，添加以下CSS确保自定义容器内的面板显示正常：

/* 适配自定义容器内的Viewer面板样式 */
#modelBrowserContent .adsk-viewing-panel,
#layerManagerContent .adsk-viewing-panel {
  position: relative;
  width: 100%;
  height: calc(100% - 40px); /* 减去标题高度，避免溢出 */
  border: none;
  box-shadow: none;
}

#modelBrowserContent .adsk-viewing-panel-container,
#layerManagerContent .adsk-viewing-panel-container {
  height: 100%;
}

注意事项 #

• 需确保模型加载完成后再调用面板初始化函数（当前代码中onDocumentLoadSuccess内的调用时机正确）
• 若使用Viewer 7.x以上版本，上述API均兼容；低版本需调整面板构造函数参数

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