Markup插件

Markup插件提供了一系列在OBV中添加标记的工具，基于这些工具，用户可以自由选择相应的标记工具在OBV中添加标记，并且可以设定标记的样式，保存标记数据。

• 如何加载

使用插件需要在加载三维模型时传入相应的配置，以加载markup插件为例，传入的config应如下所示

const viewer3dConfig = {
                noToolbar: false, // 不显示Toolbar
                addinConfigs:[{
                        // 插件id,OBV中插件开发，命名请遵循{OBVAddins.xxx}的格式
                        id : 'OBVAddins.Markup', 
                        noButton : false // 不显示插件button
                    }]
            };

• 如何获取插件

        let markupAddin;
        // 插件ID
        const markupAddinId = 'OBVAddins.Markup'; 
        // 获取管理插件的addinManager
        const addinManager = obvApi.getAddinManager(); 
        // 通过addinManager获取插件
        markupAddin = addinManager.getAddin(markupAddinId); 
        // 如果没有插件，则需要重新load插件
        if (!markupAddin) { 
            // 插件没有加载过，需要加载到平台中
            addinManager.loadAddin(markupAddinId);
            markupAddin = addinManager.getAddin(markupAddinId)
        }

• 如何使用

  • 如何激活/注销

    markupAddin.active(); // 激活
    markupAddin.deactive(); // 注销

  • 进入/退出编辑模式

    markupAddin.enterEditMode(); // 进入编辑模式
    markupAddin.leaveEditMode(); // 退出编辑模式

  • 设置markup类型

    // 设置当前markup类型为箭头
    markupAddin.changeEditModelByMarkupType('Arrow'); 

  • 获取/设置markup的样式内容

    // 返回css字符串
    markupAddin.getStyle();  
    markupAddin.setStyle(JSON.parse('{"stroke-width":16,"stroke-color":"#ff6666","stroke-opacity":1}'));

  • 获取/加载/卸载markupData

    // 返回markup数据的svg格式字符串
    const markupString = markupAddin.getMarkupData(); 
    const layerId = 'layer1';
    // 传入markup数据的svg格式的字符串和需要绘制的图层名称
    markupAddin.loadMarkupData(markupString, layerId); 
    // 卸载加入的标记数据，需要传入图层id
    markupAddin.unloadMarkupData(layerId) 

  • 截图

    markupAddin.takeScreenShot(200, 200).then(function (result) {
      // 将截图的返回结果在页面中显示
      const imgElement = document.createElement('img'); 
      imgElement.src = result.blobUrl;
      document.body.appendChild(imgElement);  
    })