添加热点

本文主要介绍了热点的数据结构以及热点的增删改查（全景视频暂不支持热点添加）。

1、热点数据结构

// 通用热点标签
{
  id: '', // 标签id
  name: '', // 标签名称，自定义扩展使用
  type: 'hot', // 类型标识
  spotId: 'p1', // 所属场景
  includeSpots: ['p1', 'p2', 'p3'], // 可见场景
  anchor: { // 标签位置
    x: -0.8017596904060821,
    y: 0.5705978493783883,
    z: -0.18082516335579235
  },
  info: { // 标签信息
    titleConfig: { // 标题配置
      content: '',
      fontSize: '',
      color: '',
      backgroundColor: '',
      opacity: 0.5,
      showStrategy: 'always' | 'hover',
    },
    iconConfig: { // 图标配置
      url: '',
      width: 40,
      height: 40,
      opacity: 0.5,
    },
  },
  // 用户自定义信息的存储字段，比如事件，类别
  extra: {
    event: { // 业务自定义事件字段的参考示例
      type: 'link' | 'jumpScene' | 'playAudio' | 'playVideo' | 'popImage' | 'popText' | 'none',
      link: "xxxx",
      jumpScene: 'p3',
      popText: {
        content: '',
        fontSize: '',
        width: 40,
        height: 40,
        backgroundColor: '',
        opacity: 0.5,
      },
      popImage: {
        list: [{src: '', name: ''}],
        width: 40,
        height: 40,
        opacity: 0.5,
        radius: '5px',
      },
      playAudio: {
        url: '',
        name: '',
        volume: '',
        loop: true | false,
      },
      playVideo: {
        url: '',
        width: 40,
        height: 40,
        volume: '',
        loop: true | false,
      }
    },
  }
}

// 嵌入热点标签
{
  id: '', // 标签id
  type: 'image', // 类型标识
  spotId: 'p1', // 所属场景
  info: {
    src: '', // 标签资源，图片或视频
  },
  scale: { x: 0.2, y: 0.2 }, // 标签缩放
  anchor: { // 标签位置
    x: 2.2086117756845676,
    y: 0.605570390278817,
    z: 0
  },
  normal: { // 标签法向量
    x: 0,
    y: 0,
    z: 0
  },
  rotation: { // 标签旋转信息
    x: 0,
    y: 0,
    z: 0
  },
  extra: { // 业务自定义附加信息

  }
}

2、添加热点

前端示例代码：

// 获取标签api
const elementsAPI = app.getInstance("elementsAPI");

// 编辑器添加热点
elementsAPI.startAnnotating('hot'); // 通用热点标签
elementsAPI.startAnnotating('image'); // 嵌入热点标签

// 监听热点添加完成事件
elementsAPI.event.on("annotationAdd", async(el) => {})

// 监听标签点击事件
elementsAPI.event.on("click", async(tagId) => {})

// 监听标签开始拖拽事件
elementsAPI.event.on("moveStart", async(el) => {})

// 监听标签结束拖拽事件
elementsAPI.event.on("moveEnd", async(el) => {})

// 已有标签数据情况下，可以通过接口直接渲染出标签
const tagConfig = {"hot-7eb8972b-13b9-40c7-ad13-12697890d8e4":{}, "image-7990c237-64e0-4630-8fd8-8fe183ff6a67": {}}
elementsAPI.init(tagConfig); // 初始化加载标签

标签热点示意图：

嵌入热点示意图：

3、删除热点

前端示例代码：

const elementsAPI = app.getInstance("elementsAPI");
elementsAPI.removeElementById(tagId);

4、修改热点

前端示例代码：

// 查找热点
const tag = elementsAPI.getElementById(tagId); // 根据id查找热点实例
const tagList = elementsAPI.getElements(); // 获取场景中所有热点实例

// 热点重要属性
tag.id; // 热点的唯一标识
tag.elementConfig; // 热点的数据配置，会跟随热点方法的编辑实时更新
tag.position; // 热点的位置信息

// 通用热点方法如下
tag.setTagConfig(config: object); // 设置标签配置，一次性更新所有数据变化，入参为标签的数据对象
tag.setTitle(title: string); // 设置标题
tag.setTitleStyle(key: string, value: any) // 设置标题css样式
tag.setIcon(iconUrl: string); // 设置图标
tag.setIconStyle(key: string, value: any) // 设置图标css样式
tag.setPosition({x: number, y: number, z: number}); // 设置标签位置
tag.setExtra(extraInfo: any) // 设置用户自定义字段
tag.showTitle(); // 显示标签卡片
tag.hideTitle(); // 隐藏标签卡片
tag.highlight(color: number[]); // 高亮标签
tag.unhighlight(); // 取消标签高亮
tag.lookAt(); // 相机跳转到当前标签所在场景并聚焦当前标签

//嵌入热点方法如下
tag.setTagConfig(config: object); // 设置标签配置，一次性更新所有数据变化，入参为标签的数据对象
tag.setLabel(url: string); // 设置标签的内容链接
tag.setPosition({x: number, y: number, z: number}); // 设置标签位置
tag.setScale({x: number, y: number}); // 设置标签缩放
tag.setRotation({x: number, y: number, z: number}); // 设置标签旋转弧度
tag.setExtra(extraInfo: any) // 设置用户自定义字段
tag.playVideo(); // 播放嵌入视频
tag.pauseVideo(); // 暂停嵌入视频播放
tag.setMuted(muted: boolean); // 设置嵌入视频是否静音
tag.setVisible(visible: boolean); // 设置标签的可见性
tag.highlight(color: number[]); // 高亮标签
tag.unhighlight(); // 取消标签高亮
tag.lookAt(); // 相机跳转到当前标签所在场景并聚焦当前标签