如何访问Autodesk.Viewing.MarkupsGui事件并保存标记至数据库？

• 要访问标记相关事件，需先获取底层的MarkupsCore实例——MarkupsGui依赖它实现核心功能，获取方式如下：

  const markupsCore = viewer.getExtension('Autodesk.Viewing.MarkupsCore');
  

• 可监听标记的创建、修改、删除事件，示例代码：

  // 监听标记创建
  markupsCore.addEventListener('markupAdded', (event) => {
    console.log('新标记添加:', event.detail);
    saveMarkupsToDatabase();
  });
  
  // 监听标记修改
  markupsCore.addEventListener('markupModified', (event) => {
    console.log('标记已修改:', event.detail);
    saveMarkupsToDatabase();
  });
  
  // 监听标记删除
  markupsCore.addEventListener('markupRemoved', (event) => {
    console.log('标记已删除:', event.detail);
    saveMarkupsToDatabase();
  });
  

• 获取所有标记数据用于数据库存储，调用MarkupsCore的exportMarkups()方法，它会返回包含全部标记信息的JSON对象：

  function saveMarkupsToDatabase() {
    const markupsData = markupsCore.exportMarkups();
    // 此处编写数据库存储逻辑，比如通过后端API提交数据
    fetch('/api/save-markups', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ markups: markupsData, modelUrn: viewer.model.id })
    });
  }
  

• 注意：需确保MarkupsGui扩展加载完成后再获取MarkupsCore，可通过loadExtension的回调处理：

  viewer.loadExtension('Autodesk.Viewing.MarkupsGui').then(() => {
    const markupsCore = viewer.getExtension('Autodesk.Viewing.MarkupsCore');
    // 在此添加事件监听与保存逻辑
  });
  

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