Viewer.ToolKit Extension导入方式及自有应用集成技术咨询

我来帮你梳理清楚Forge RCDB里Level-Filtering示例中Viewer.ToolKit的导入方式，以及如何在你自己的应用中复用这个扩展功能，咱们一步步来：

在RCDB的Level Filter扩展代码里，Viewer.ToolKit是作为同项目下的模块化工具类存在的，具体导入逻辑分两种场景：

场景1：使用模块化打包工具（如Webpack，和RCDB项目一致） #

Level Filter扩展的JS文件（Viewing.Extension.LevelFilter.js）通过相对路径导入Viewer.ToolKit，核心代码类似这样：

// 从同级目录的Viewer.ToolKit文件夹导入工具类
import { ViewerToolkit } from '../../Viewer.ToolKit/Viewer.Toolkit';

Viewer.ToolKit里封装了一些通用的Viewer操作工具，比如获取模型的楼层数据、处理构件可见性的方法，Level Filter扩展依赖这些工具来实现楼层过滤的核心逻辑。

场景2：传统Script标签引入（无打包工具） #

如果你的项目没有用模块化打包，需要先在HTML中引入Viewer.ToolKit的脚本文件，再引入Level Filter扩展的脚本：

<!-- 先引入Forge Viewer核心脚本 -->
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
<!-- 引入Viewer.ToolKit脚本 -->
<script src="/path/to/Viewer.Toolkit.js"></script>
<!-- 引入Level Filter扩展脚本 -->
<script src="/path/to/Viewing.Extension.LevelFilter.js"></script>

这种情况下，ViewerToolKit会挂载到全局作用域，你可以直接通过window.ViewerToolkit来访问它的方法。

接下来咱们把这个扩展搬到自己的项目里，步骤如下：

步骤1：复制必要文件 #

从RCDB的代码仓库里复制以下文件到你的项目对应目录：

• Viewing.Extension.LevelFilter.js：扩展核心代码
• Viewing.Extension.LevelFilter.css：扩展的UI样式（如果需要）
• Viewer.Toolkit.js：依赖的工具类

步骤2：确保Forge Viewer已正确初始化 #

在你的应用中，先完成Forge Viewer的基础初始化，示例代码如下：

const options = {
    env: 'AutodeskProduction',
    accessToken: 'YOUR_ACCESS_TOKEN'
};

Autodesk.Viewing.Initializer(options, () => {
    const viewerDiv = document.getElementById('forgeViewer');
    const viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);
    viewer.start();

    // 加载模型（替换成你的模型URN）
    const modelUrn = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6YOUR_BUCKET/YOUR_MODEL_FILE';
    Autodesk.Viewing.Document.load(
        modelUrn,
        (doc) => {
            const viewables = doc.getRoot().getDefaultGeometry();
            viewer.loadDocumentNode(doc, viewables).then(() => {
                // 模型加载完成后，加载Level Filter扩展
                loadLevelFilterExtension(viewer);
            });
        },
        (err) => {
            console.error('加载模型失败:', err);
        }
    );
});

步骤3：加载并使用Level Filter扩展 #

编写加载扩展的函数，并调用扩展的API来控制楼层过滤：

async function loadLevelFilterExtension(viewer) {
    // 加载Level Filter扩展
    const extension = await viewer.loadExtension('Autodesk.Viewing.Extension.LevelFilter');
    
    // 获取所有楼层数据
    const levels = extension.getLevels();
    console.log('模型中的楼层:', levels);

    // 示例：隐藏指定楼层
    extension.hideLevel(levels[0].name);

    // 示例：显示指定楼层
    // extension.showLevel(levels[0].name);

    // 示例：切换楼层可见性
    // extension.toggleLevel(levels[0].name);
}

步骤4：注意事项 #

• 版本兼容性：确保你使用的Forge Viewer版本和RCDB项目中使用的版本尽量一致，避免API差异导致的问题。
• 样式引入：如果需要扩展的UI控件（比如楼层选择面板），记得在HTML中引入对应的CSS文件：

<link rel="stylesheet" href="/path/to/Viewing.Extension.LevelFilter.css">

• 权限与模型数据：你的模型需要包含楼层信息（比如Revit导出的模型带有Level参数），否则扩展无法获取到楼层数据。

内容的提问来源于stack exchange，提问作者Bi SAl MhRzn