vr-label-tool

通用VR标注工具

Install

# $ npm config set @aibee:registry https://npm.aibee.cn
$ npm i -S @aibee/vr-label-tool

Usage Use Component

使用组件的方式 使用示例
https://code.aibee.cn/ued/vr-label-tool/-/tree/master/examples

1、组件注册和配置

import VRLabelTool from "@aibee/vr-label-tool";

// 这里可以重写接口请求 https://code.aibee.cn/ued/vr-label-tool/-/tree/master/src/labeling-tool/api
import * as api from "@/api/label-tools";
// 自定义内容弹框配置数组, 参考(https://code.aibee.cn/robot-fe/owlly/vr-workshop-devkit)customContentTypes
import contentEditor from './content-editor'; 
// 自定义内容弹框预览组件，组件内type=内容配置contentEditor类型type，例如：14
import contentViews from './content-views';
// defaultTool 默认显示的工具类型
// omitTools 隐藏的工具类型列表
Vue.use(LabelTool, {
  api,
  defaultTool: 'imgTextLabel',
  omitTools: [],
  contentEditor,
  contentViews,
  // 点击工具左下角预览按钮弹出链接 ${xxx} xxx为getProjectVrId项目接口字段
  previewUrl: 'https://xxx.aibee.cn/preview/${id}?floor_id=${floor_id}',
});

工具类型列表

{ name: 'viewingAngle', text: '视角设置' },
{ name: 'pointVisibility', text: '可见性' },
{ name: 'hotspot', text: '漫游热点' },
{ name: 'imgTextLabel', text: '标签标注' },
{ name: 'signLabel', text: '标牌标注' },
{ name: 'ruler', text: '标尺标注' },

重写api接口，所有请求详见 examples/api-test.js

import request from '@/utils/request';

// 基础接口，所有请求都会基于此请求
export async function baseRequest(path, payload, method) {
  return request({
    url: `/admin/${path}`,
    method,
    data: ['get', 'delete'].includes(method) ? null : payload,
    params: ['get', 'delete'].includes(method) ? payload : null,
  });
}
// 上传base64图片
export function uploadThumb(filename, base64) {
  console.log(filename, base64);
  return { data: {"url": 'xxx'} };
}
// 项目查询接口，需组装成结构{data:[{id,vrId,title}]}
export function queryProjectList(params) {
  return baseRequest('expo/query/v1', params, 'get').then((res) => ({ data: res.data.list }));
}
// 模拟小地图数据（提供此接口后可显示小地图）
export function queryPlaceMap(params) {
  return {
    data: {
      floor_cmap: 'https://....svg',
      floor_cmap_align_param: '{"scale2D": 1,...}',
    },
    error_msg: '',
    error_no: 0,
  };
}

2、添加路由

import { VRLabelTool, VRPreview } from "@aibee/vr-label-tool";
import TestLabelTool from './TestLabelTool.vue';
// 不使用自定义组件，使用params参数:projectId，组件内部使用了projectId
// 其他query参数可选version、disabled等
// 使用自定义组件，使用api-params传参
{
  path: "/:projectId",
  name: "Project",
  component: VRLabelTool
},
{
  path: "/preview/:projectId",
  name: "Preview",
  component: VRPreview
}
{
  path: '/test',
  component: TestLabelTool,
},

3、使用自定义组件

<template>
  <div>
    <VRLabelTool :api-params="apiParams">
      <template v-slot:resource2="{srcType, visible, closeResource, loadResource}">
        <ElementSelector v-if="visible"
                         :src-type="srcType"
                         :visible="visible"
                         :close-resource="closeResource"
                         :load-resource="loadResource"
        ></ElementSelector>
      </template>
    </VRLabelTool>
  </div>
</template>

<script>
import { VRLabelTool, EventHub } from '../src/index';
import ElementSelector from './components/element-selector.vue';

export default {
  components: { VRLabelTool, ElementSelector },
  data() {
    return {
      apiParams: {
        projectId: 'f-80-353',
      },
    };
  },
  mounted() {
    // VR组件加载完成事件
    EventHub.$on('stageInited', this.stageInited);
    // 标注组件加载完成事件
    EventHub.$on('labelingToolInited', this.labelingToolInited);
    // 保存事件前置事件，可return Promise.reject();阻止保存
    EventHub.onBeforeEvent = this.onBeforeEvent;
    // 保存事件完成后的事件
    EventHub.onAfterEvent = this.onAfterEvent;
  },
  methods: {
    async onBeforeEvent(name, data) {
      console.log('onBeforeEvent', name, data);
      // 如果想阻止保存 return Promise.reject();
      return Promise.resolve();
    },
    async onAfterEvent(name, data) {
      // 更新或者创建初始视角时，更新封面
      console.log('onAfterEvent', name, data);
    },
    labelingToolInited(tool) {
      console.log(tool);
    },
    // VR加载完成事件
    stageInited(stage) {
      console.log(stage);
    },
  },
};
</script>

4、资源位选择，需要提供 作用域插槽 v-slot:resource="{srcType, visible, closeResource, loadResource}"

|参数|说明|属性/方法参数| |:--|:--|:--| |srcType|资源类型（image、video、model）|-| |visible|弹框可见性|-| |closeResource|关闭弹框事件|-| |loadResource|确定选择资源|{ srcType: '资源类型', url: '资源地址', thumbnailUrl: '资源缩略图', title: '资源标题' }|

Update

$ npm i @aibee/vr-label-tool@latest