临云镜标注工具 SDK 主要提供了基于全景图像的空间标注能力，包括空间结构、墙线、门、窗、虚拟墙、凹凸墙、特征区等标注行为，整个 SDK 包括以下几个组成部分：
- Canvas： 提供了全景图像的二维空间结构渲染，包含空间结构、墙线、门、窗、虚拟墙等标注操作，以及标注的样式配置及事件监听。
- Pano：提供了全景图像的三维空间结构渲染，包含墙线、门、窗、凹凸墙，以及墙高、空间旋转、垂直矫正等操作。
- Plane： 提供了对标注空间的二维平面图预览。
- Preview： 提供了对标注空间的三维模型预览。
该 SDK 与框架无关，您可在 React 框架中使用，也可嵌入到 Angular\Vue 等任何框架中使用。本文档将以嵌入 React 的方式演示如何利用该 SDK 进行标注
- npm 安装
npm i --save alibaba-lyj-js-marktool
- script 安装
<script src=' https://g.alicdn.com/sail-fe/aoding-marktool-sdk-umd/0.0.2/bundle.js'></script>
<script>
var { MarkTool, DrawPano } = window.SailLib
</script>import { MarkTool } from 'alibaba-lyj-js-marktool'MarkTool 中包含三维视图、二维视图、预览图、平面图，根据你的需要准备相应的 div 容器
<body>
<div id="Pano" />
<div id="Canvas" style={{ height: 600, width: 600 }} />
<div id="Preview" />
<div id="Plane" style={{ height: 500, width: 500 }} />
</body>- 创建 MarkTool 对象
const mark = new MarkTool()
const { Pano, Preview, Plane, Canvas } = mark- 注册 Dom 容器 & 初始化组件
Pano.registerDom(document.getElementById('Pano'))
Preview.registerDom(document.getElementById('Preview'))
Plane.registerDom(document.getElementById('Plane'))
Canvas.registerDom(document.getElementById('Canvas'))- 注册配置 & 监听事件
Pano.registerConfig({
minWallHeight: 0.3, // 调整墙高最大值
maxWallHeight: 5,
})
Pano.registerEvent({
onLoad: () => {
console.log(111)
},
})-
加载数据 & 创建视图
- 数据获取方式详见：OpenApi
mark.setLayoutData(mockData)详细 API 信息请查看docs