0.0.21 • Published 2 years ago

alibaba-lyj-js-marktool v0.0.21

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

背景介绍

临云镜标注工具 SDK 主要提供了基于全景图像的空间标注能力，包括空间结构、墙线、门、窗、虚拟墙、凹凸墙、特征区等标注行为，整个 SDK 包括以下几个组成部分：

  1. Canvas： 提供了全景图像的二维空间结构渲染，包含空间结构、墙线、门、窗、虚拟墙等标注操作，以及标注的样式配置及事件监听。
  2. Pano：提供了全景图像的三维空间结构渲染，包含墙线、门、窗、凹凸墙，以及墙高、空间旋转、垂直矫正等操作。
  3. Plane： 提供了对标注空间的二维平面图预览。
  4. 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
  • 注册 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)
  },
})

  • 加载数据 & 创建视图

mark.setLayoutData(mockData)

详细 API 信息请查看docs

@babel/runtimeevent-emitterthreewhatwg-fetch
@everything-registry/sub-chunk-1118@zalastax/nolb-alib
0.0.20

2 years ago

0.0.21

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.5

2 years ago

0.0.4

3 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.2-beta.8

3 years ago

0.0.2-beta.9

3 years ago

0.0.3

3 years ago

0.0.2-beta.11

3 years ago

0.0.2-beta.10

3 years ago

0.0.2-beta.13

3 years ago

0.0.2-beta.12

3 years ago

0.0.2-beta.15

3 years ago

0.0.2-beta.14

3 years ago

0.0.2-beta.16

3 years ago

0.0.2-beta.7

3 years ago

0.0.2-beta.3

3 years ago

0.0.2-beta.4

3 years ago

0.0.2-beta.5

3 years ago

0.0.2-beta.6

3 years ago

0.0.2-beta.2

3 years ago

0.0.2-beta.1

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago

0.0.0

3 years ago