Socket
Book a DemoInstallSign in
Socket

alibaba-lyj-js-marktool

Package Overview
Dependencies
Maintainers
4
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

alibaba-lyj-js-marktool

临云镜标注工具SDK

0.0.21
latest
npmnpm
Version published
Weekly downloads
0
Maintainers
4
Weekly downloads
 
Created
Source

背景介绍

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

FAQs

Package last updated on 21 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.