如何在Headless Viewer中仅启用模型浏览器功能？Angular5开发咨询

当然可以做到！你完全不需要依赖Viewer自带的模型浏览器面板，自己用JavaScript结合Angular 5就能实现一套自定义的模型浏览器功能。我给你梳理下具体的实现思路和关键代码，帮你搞定这个需求：

Viewer提供了直接获取模型树的API，你可以通过实例树（Instance Tree）拿到所有节点的ID、名称、可见性等核心信息。等模型加载完成后，执行下面的代码：

// 假设viewer已经完成初始化并成功加载了模型
const instanceTree = viewer.model.getInstanceTree();
const rootNodeId = instanceTree.getRootId();

// 递归遍历所有节点，收集数据到你的Angular组件变量中
function collectModelNodes(nodeId) {
  const nodeName = instanceTree.getNodeName(nodeId);
  const isLeafNode = instanceTree.getChildCount(nodeId) === 0;
  // 组装节点数据，你可以根据需求添加更多字段
  const nodeInfo = {
    id: nodeId,
    name: nodeName,
    isLeaf: isLeafNode,
    visible: viewer.isNodeVisible(nodeId),
    expanded: false // 用于控制UI折叠/展开状态
  };
  // 把数据push到组件的数组里，比如this.modelNodes.push(nodeInfo)
  
  // 递归处理子节点
  instanceTree.enumNodeChildren(nodeId, (childId) => {
    collectModelNodes(childId);
  });
}

// 确保在模型几何加载完成后再执行遍历
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, () => {
  collectModelNodes(rootNodeId);
});

利用Angular的模板语法，把收集到的节点数据渲染成可交互的树形结构。比如在组件模板里这样写（可以根据你的UI设计调整样式）：

<div class="custom-model-browser">
  <ul>
    <ng-template #nodeTemplate let-node>
      <li>
        <!-- 折叠/展开按钮 -->
        <span *ngIf="!node.isLeaf" class="expand-btn" (click)="toggleNodeExpand(node)">
          {{ node.expanded ? '▼' : '▶' }}
        </span>
        <!-- 节点名称，点击选中模型对应部分 -->
        <span class="node-name" (click)="selectNode(node)">{{ node.name }}</span>
        <!-- 可见性切换复选框 -->
        <input 
          type="checkbox" 
          [(ngModel)]="node.visible" 
          (change)="updateNodeVisibility(node)"
        >
        <!-- 递归渲染子节点 -->
        <ul *ngIf="node.expanded && !node.isLeaf">
          <ng-container *ngFor="let child of getNodeChildren(node)" [ngTemplateOutlet]="nodeTemplate" [ngTemplateOutletContext]="{ $implicit: child }"></ng-container>
        </ul>
      </li>
    </ng-template>
    <!-- 渲染根节点 -->
    <ng-container *ngFor="let rootNode of getRootNodes()" [ngTemplateOutlet]="nodeTemplate" [ngTemplateOutletContext]="{ $implicit: rootNode }"></ng-container>
  </ul>
</div>

这里用到了Angular的模板引用和递归渲染，需要你在组件里实现getNodeChildren、getRootNodes这类辅助方法，用来根据节点ID找到对应的子节点（可以把收集到的节点数据存成一个Map，方便快速查找）。

接下来实现UI和Viewer之间的联动，让自定义浏览器真正能用：

1. 选中节点并聚焦视图

selectNode(node) {
  // 清除之前的选中状态
  viewer.clearSelection();
  // 选中当前节点
  viewer.select(node.id);
  // 让视图自动聚焦到该节点
  viewer.fitToView([node.id]);
}

2. 切换节点可见性

updateNodeVisibility(node) {
  // 更新Viewer中节点的可见性
  viewer.setVisibility(node.id, node.visible);
  // 如果需要联动子节点的可见性，可以在这里递归处理
}

3. 折叠/展开节点

toggleNodeExpand(node) {
  node.expanded = !node.expanded;
  // 如果需要默认展开子节点，可以在这里处理
}

• 确保在Viewer的GEOMETRY_LOADED_EVENT触发后再去获取模型树，不然可能拿到空数据。
• 如果加载了多个模型，要区分不同模型的实例树，可以通过viewer.impl.modelQueue().getModels()获取所有模型，再分别处理每个模型的节点。
• Angular 5中使用ngModel需要在模块里引入FormsModule，不然会报错。
• 可以给自定义浏览器加样式，比如缩进、选中高亮等，让它看起来更接近原生面板的体验。

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