如何实现户型图标注SDK的开发接入/配置/使用_三维空间重建(3D Space Reconstruction)-阿里云帮助中心

本文主要介绍户型图标注SDK的开发接入、基础配置和使用方式。

接入指南

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

CDN资源：https://g.alicdn.com/sail-lyj/alibaba-lyj-floor-plans-umd/0.0.1/bundle.js

1.引入JS库

通过script进行集成开发

<script src="https://g.alicdn.com/sail-lyj/alibaba-lyj-floor-plans-umd/0.0.1/bundle.js"></script>
<script>
   var { Palette } = MagicBrush;
</script>

2.初始化

准备容器

<style>
  #brush {
      position: absolute;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: #eaebec;
      overflow: hidden;
    }
</style>
<body>
  <div id="brush"/>
</body>

初始化组件

户型图的主要数据从orthomap.json中提取，具体获取方式查看前端引擎SDK中初始化获取orthomap.json的逻辑【3、初始化应用】，主要数据储存在vectorMap字段中。

假设已经获取到orthomap.json中的vectorMap字段值数据。

 var palette = new Palette({
    width: 900,
    height: 900,
    plottingScale: 1, 
    containerId: "brush",
    backgroundImg:'https://img.alicdn.com/tfs/TB1C8SZGQT2gK0jSZPcXXcKkpXa-900-900.png',
    data: JSON.parse(JSON.stringify(vectorMap)), //orthomap.json的vectorMap字段值
    refs: {
      url: 'https://lyj-public.oss-cn-hangzhou.aliyuncs.com/pano_test/A.e.eeWQTwl3RXrjbUTk/orthomap/dense_trim_tex.png',
    },
    rotation: 0,
    ratio: 1,
    styleOptions: {
      wallColor: 0x959595,
    },
  });

说明

初始化结束即可以看到基于户型图底图和户型图标注数据渲染的可编辑的户型图面板

完成示例代码demo

<style>
  #brush {
      position: absolute;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: #eaebec;
      overflow: hidden;
    }
</style>
<body>
  <div id="brush"/>
</body>
<style>
  var palette = new Palette({
    width: 900,
    height: 900,
    plottingScale: 1, 
    containerId: "brush",
    backgroundImg:'https://img.alicdn.com/tfs/TB1C8SZGQT2gK0jSZPcXXcKkpXa-900-900.png',
    data: JSON.parse(JSON.stringify(vectorMap)), //orthomap.json的vectorMap字段值
    refs: {
      url: 'https://lyj-public.oss-cn-hangzhou.aliyuncs.com/pano_test/A.e.eeWQTwl3RXrjbUTk/orthomap/dense_trim_tex.png',
    },
    rotation: 0,
    ratio: 1,
    styleOptions: {
      wallColor: 0x959595,
    },
  });
</style>