跳到主要内容

📦 全景户型雷达图

PanoFloorplanRadarPlugin​

此插件强依赖于户型图数据,请率先了解如何获取户型图数据。

示例效果​

功能说明​

全景户型雷达图插件 提供了在全景模式下展示二维户型图的功能。

支持的特性有:

  • 雷达指引:以"雷达"图标的方式展示当前点位的位置和朝向。
  • 户型图自适应填充:最小边大小自动计算,保障展示在 DOM 容器中心。
  • 全景模式下走点出现楼层变更时会自动切换至当前楼层的户型图。
  • 配置 hoverEnable 为 true (默认配置)时,鼠标 hover 相关分间会高亮。

安装引用​

请按需选择 yarn 或 npm 安装方式:

npm install @realsee/dnalogel

通过 es 引用:

import { PanoFloorplanRadarPlugin } from "@realsee/dnalogel"

开发指南​

初始化​

在初始化 Five 实例的时候,将 PanoFloorplanRadarPlugin 配置在初始化插件参数即可。

import Five from '@realsee/five'
import { PanoFloorplanRadarPlugin } from "@realsee/dnalogel"

// 初始化 five 实例
const five = new Five({
plugins: [
[PanoFloorplanRadarPlugin, 'panoFloorplanRadar', {
//初始化参数
}]
]
})

React 初始化​

在创建 FiveProvider 组件时将 PanoFloorplanRadarPlugin 配置在初始化插件参数即可。

import { createFiveProvider } from '@realsee/five/react'
import { PanoFloorplanRadarPlugin } from "@realsee/dnalogel"

// 创建 FiveProvider 组件
const FiveProvider = createFiveProvider({
plugins: [
[PanoFloorplanRadarPlugin, "panoFloorplanRadar", {
// 初始化参数
}]
]
})

Vue 初始化​

在使用 FiveProvider 时,将 PanoFloorplanRadarPlugin 配置在初始化插件参数即可。

<template>
<FiveProvider :fiveInitArgs="fiveInitArgs">
</FiveProvider>
</template>
<script setup>
import PanoFloorplanRadarPlugin from "@realsee/dnalogel/libs/PanoFloorplanRadarPlugin";
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
const fiveInitArgs = {
plugins: [
[
PanoFloorplanRadarPlugin,
'panoFloorplanRadarPlugin', // 自定义插件名称
{
// 参数配置
}
]
]
}
</script>

载入数据​

// 获取插件实例
const pluginInstance = five.plugins.panoFloorplanRadar
// 载入数据
pluginInstance.load(floorplanServerData)

核心方法​

PanoFloorplanRadarPlugin 提供的核心方法有:

  • async load(data: FloorplanServerData) 载入户型图数据;

您需要手动载入户型图数据,[FloorplanServerData] 的数据来源请阅读如视开放平台 API。

  • appendTo(wrapper: Element) 挂载 DOM 节点;

将户型图DOM模块载入您的 HTML 结构中。

  • setState(state: Partial<State>, options: BaseOptions = {}) 更改插件 State;

  • changeConfigs(config: Config, userAction = true) 修改插件配置信息

  • setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]) 在雷达图上展示额外内容

  • async show(options: BaseOptions = {}) 展示户型图数据;

  • async hide(options: BaseOptions = {}) 隐藏户型图数据;

  • enable(options: BaseOptions = {}) 启用插件;

  • disable(options: BaseOptions = {}) 禁用插件;

在雷达图上展示额外内容​

对于一些三维场景中的物体,我们可以在雷达图上用一些特殊的图标进行展示

setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]) 设置在户型图上展示的三维物体列表。

三维数据的结构如下

// 能够映射到雷达图上的三维物体
export interface FloorplanExtraObject3D {
id: string
// [x, y, z]
position: number[]
}

配置参数​

  • wrapper: string | Element 插件挂载的 DOM 节点。

  • hoverEnable?: boolean 否开启鼠标 hover 高亮分间。

配置样例参考:


import { PanoFloorplanRadarPlugin } from "@realsee/dnalogel"
import { Five, FivePluginInit } from '@realsee/five'

const five = new Five({
plugins: [
[
PanoFloorplanRadarPlugin,
'floorpalnRadar',
{
wrapper: '.floorplan-radar-wrapper',
configs: {
hoverEnable: true
}
}
],
],
})

demo 源码参考​

demo 源码参考