alibaba-lyj-js-marktool

v0.0.21

Published

2 years ago

临云镜标注工具SDK

Downloads

0High
0Medium
0Low

背景介绍

临云镜标注工具 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>

引入 MarkTool

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

创建 MarkTool 对象

const mark = new MarkTool()

const { 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'))

注册配置 & 监听事件

Pano.registerConfig({
  minWallHeight: 0.3, // 调整墙高最大值
  maxWallHeight: 5,
})
Pano.registerEvent({
  onLoad: () => {
    console.log(111)
  },
})

加载数据 & 创建视图
- 数据获取方式详见：OpenApi

mark.setLayoutData(mockData)

详细 API 信息请查看docs

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

背景介绍

快速上手

获取

引入 MarkTool

准备容器

初始化 MarkTool