进入MarkupsCore编辑模式后如何恢复Viewer工具栏？

我之前也碰到过这个头疼的问题——MarkupsCore进入编辑模式时会默认隐藏Viewer的原生工具栏，而且你当前的代码逻辑有几处需要调整才能让工具栏正常显示：

问题分析 #

你代码里的viewer.toolbar = new Autodesk.Viewing.UI.ToolBar('toolbar');这行是重新创建了一个全新的工具栏实例，但原来的工具栏控件还绑定在旧的toolbar变量上，新创建的工具栏并没有正确关联到Viewer的DOM结构里，这就是为什么你看不到UI的原因。另外，MarkupsCore的enterEditMode()方法内部会自动调用viewer.hideToolbar()，这也是工具栏消失的核心原因。

修正后的代码方案 #

下面是调整后的代码，解决了工具栏显示和按钮UI的问题：

// 确保在Viewer加载完成后执行这段代码（比如在GEOMETRY_LOADED_EVENT回调里）
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function() {
    var button1 = new Autodesk.Viewing.UI.Button('toolbar-markup');
    button1.setToolTip('Markup');
    button1.addClass('markuptool');
    
    // 把按钮添加到Viewer现有的工具栏，而不是重新创建工具栏
    viewer.toolbar.addControl(button1);

    button1.onClick = function(){
        var markups = viewer.getExtension('Autodesk.Viewing.MarkupsCore');
        if (!markups) return; // 确保扩展已加载

        if (markups.isEditMode()) {
            // 退出编辑模式时恢复工具栏状态
            markups.leaveEditMode();
            viewer.showToolbar();
        } else {
            // 进入编辑模式后手动显示工具栏
            markups.enterEditMode();
            var textMode = new Autodesk.Viewing.Extensions.Markups.Core.EditModeText(markups);
            markups.changeEditMode(textMode);
            markups.allowNavigation(true);
            // 关键：覆盖Markups的默认隐藏行为，显示原生工具栏
            viewer.showToolbar();
        }
    };
});

额外注意事项 #

1. CSS层级检查：有时候工具栏会被Markups的绘制画布遮挡，可以添加CSS确保工具栏的层级更高：

   .adsk-viewing-viewer #toolbar {
       z-index: 100 !important;
   }
   

2. 扩展初始化时机：确保在Viewer完全加载、MarkupsCore扩展可用后再创建按钮，避免getExtension返回null的情况。
3. 避免重复创建按钮：把按钮创建逻辑放在Viewer加载完成的回调里，防止多次执行导致重复添加按钮。

这样调整后，进入Markups编辑模式时工具栏就会保持可见，你创建的Markup按钮也能正常显示在工具栏上了。

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