临云镜标注工具SDK的开发接入/基础配置/使用方式_三维空间重建(3D Space Reconstruction)-阿里云帮助中心

本文主要介绍临云镜标注工具SDK的开发接入、基础配置和使用方式。

说明

文档中所涉及的接口，需要替换为客户服务端的相应接口，在客户服务端的接口中需要调用公有云的指定接口。

接入指南

通过以下流程，完成临云镜标注工具SDK的开发接入、基础配置和使用方式

1、引入JS库

通过script进行集成开发

<script src='https://g.alicdn.com/sail-fe/aoding-marktool-sdk-umd/0.0.1/bundle.js'></script>
<script>
  var { MarkTool, DrawPano } = window.SailLib
</script>

2、初始化

准备容器

MarkTool 中包含三维视图、二维视图、预览图、平面图，根据你的需要准备相应的div容器

<body>
  <div id="Pano" style={{ height: 600, width: 600 }}/>
  <div id="Canvas" style={{ height: 600, width: 600 }} />
  <div id="Preview" style={{ height: 600, width: 600 }}/>
  <div id="Plane" style={{ height: 500, width: 500 }} />
</body>

var mark = new MarkTool();
var { Pano, Preview, Plane, Canvas } = mark;
Pano.registerDom(document.getElementById('Pano'));  
Preview.registerDom(document.getElementById('Preview'));
Plane.registerDom(document.getElementById('Plane'));
Canvas.registerDom(document.getElementById('Canvas'));

加载数据

在进行初始化显示时，需要根据具体需求获取必要的子场景标注数据，参考【获取及提交数据】中获取数据的部分进行实现，示例代码如下：

// 引入axios库
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const mark = new MarkTool();
axios.get(`/GetLayoutData?subSceneId=${subSceneId}`) // 获取标注数据
  .then((res)=> {
     if(res.Success){
       mark.setLayoutData(res.Data) // 将标注数据注入到sdk中
     }
  }).catch((error)=>{
    // ...
  });