如何在Autodesk Viewer中为2D-dwg/pdf/dxf格式文件添加标记？

一、加载2D格式文件（DWG、PDF、DXF） #

Autodesk Viewer支持直接加载经过Forge转换的DWG、DXF、PDF文件，步骤如下：

1. 初始化Viewer实例
   先引入Viewer官方脚本，再初始化Viewer：

   const options = {
     env: 'AutodeskProduction',
     accessToken: '你的Forge访问令牌'
   };
   
   Autodesk.Viewing.Initializer(options, () => {
     const viewerDiv = document.getElementById('forgeViewer');
     const viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);
     viewer.start();
     // 后续加载文件逻辑
   });
   

2. 上传并转换文件
   所有目标格式文件需先上传到Forge对象存储服务（OSS），再通过Model Derivative服务转换为Viewer兼容格式，获取文件对应的URN。

3. 加载转换后的文件
   使用loadDocumentNode方法加载文件：

   const documentId = '转换后的文件URN';
   Autodesk.Viewing.Document.load(documentId, (doc) => {
     const viewables = doc.getRoot().getDefaultGeometry();
     viewer.loadDocumentNode(doc, viewables).then(() => {
       console.log('文件加载完成');
       // 进入标记操作环节
     });
   });
   

二、添加注释、三角形、箭头等标记 #

使用Viewer的MarkupsCore扩展实现标记功能，该扩展适配2D视图下的各类标记需求：

1. 启用MarkupsCore扩展

   viewer.loadExtension('Autodesk.Viewing.MarkupsCore').then((markupExt) => {
     // 进入标记编辑模式
     markupExt.enterEditMode();
   
     // 以下为各类标记的添加示例
   });
   

2. 添加注释（文本标记）

   const textMarkup = markupExt.addMarkup(
     new Autodesk.Viewing.Markups.Core.MarkupText(
       { x: 150, y: 150 }, // 文本位置
       '设备安装注意事项', // 注释内容
       { fontSize: 18, color: '#e74c3c', fontWeight: 'bold' } // 样式配置
     )
   );
   

3. 添加箭头标记

   const arrowMarkup = markupExt.addMarkup(
     new Autodesk.Viewing.Markups.Core.MarkupArrow(
       { x: 250, y: 250 }, // 箭头起点
       { x: 350, y: 350 }, // 箭头终点
       { lineWidth: 3, color: '#2ecc71', arrowSize: 10 } // 样式配置
     )
   );
   

4. 添加三角形标记
   Viewer无原生三角形标记，可通过多边形模拟实现：

   const triangleVertices = [
     { x: 450, y: 450 },
     { x: 500, y: 520 },
     { x: 400, y: 520 }
   ];
   const triangleMarkup = markupExt.addMarkup(
     new Autodesk.Viewing.Markups.Core.MarkupPolygon(
       triangleVertices,
       { fillColor: '#3498db', opacity: 0.4, lineWidth: 2 } // 样式配置
     )
   );
   

5. 标记的持久化
   若需保存标记，可通过generateData()导出标记数据存储到后端；下次加载文件后，用loadData()恢复标记：

   // 导出标记数据
   const markupData = markupExt.generateData();
   // 将markupData保存到后端
   
   // 恢复标记
   markupExt.loadData(savedMarkupData);
   

注意事项 #

• 确保使用的Viewer版本为v7及以上，该版本开始稳定支持MarkupsCore扩展；
• 2D文件加载后，Viewer会自动切换到2D视图，标记坐标系会适配当前视图；
• 可通过调整标记对象的属性，自定义颜色、大小、透明度等样式。

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