测量

PanoMeasurePlugin

功能说明

用于在空间中测量或展示标尺数据。

效果展示

快速开始

声明配置

import type { const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin } from '@realsee/dnalogel'

const const pcConfig: PanoMeasureParameterTypepcConfig: type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : neverObtain the parameters of a function type in a tupleParameters<typeof const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin>[1] = {
  PanoMeasureParameterType.useGuideController?: boolean | GuideControllerParams | undefineduseGuideController: true,
  PanoMeasureParameterType.useUIController?: boolean | UIControllerParams | undefineduseUIController: {
    UIControllerParams.useNewUI?: boolean | undefineduseNewUI: true,
    UIControllerParams.showExit?: boolean | undefined@description: 是否展示退出按钮showExit: true,
  },
  PanoMeasureParameterType.editParams?: EditParameter | undefinededitParams: {
    EditParameter.pointSelectorMode?: PointSelectorMode | undefined@description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来选点，'cursor' 为跟随鼠标移动pointSelectorMode: 'cursor',
    EditParameter.allowMeasureType?: MeasureType[] | undefined@description选择测量插件的模式@default['line']@exampleallowMeasureType: ['line', 'area'],
    EditParameter.autoEndConfig?: autoEndConfig | undefinedautoEndConfig: { autoEndConfig.line?: number | null | undefinedline: null },
  },
  PanoMeasureParameterType.openParams?: OpenParameter | undefinedopenParams: {
    OpenParameter.isMobile?: boolean | undefinedisMobile: false,
  },
  PanoMeasureParameterType.magnifierParams?: MagnifierParameter | undefinedmagnifierParams: {
    MagnifierParameter.height?: number | undefinedheight: 120,
    MagnifierParameter.scale?: number | undefinedscale: 2,
    MagnifierParameter.width?: number | undefinedwidth: 120,
    dragEnabled?: boolean | undefined允许拖动放大镜dragEnabled: false,
    autoFixPCPosition?: boolean | undefinedrenderWithPoint 时，是否应该自动更新放大镜的位置autoFixPCPosition: true,
  },
  PanoMeasureParameterType.pointSelectorConfig?: Partial<Config> | undefinedpointSelectorConfig: {
    actionIfNoIntersection?: ActionIfNoIntersection | undefined@description当鼠标位置没有模型时的行为
virtualPoint: 生成一个虚拟点
lastPoint: 选点器停留在上一个点处
disable: 禁止选点@default'virtualPoint'actionIfNoIntersection: 'disable',
  },
}

移动设备

import type { const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin } from '@realsee/dnalogel'

const const mobileConfig: PanoMeasureParameterTypemobileConfig: type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : neverObtain the parameters of a function type in a tupleParameters<typeof const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin>[1] = {
  PanoMeasureParameterType.useGuideController?: boolean | GuideControllerParams | undefineduseGuideController: true,
  PanoMeasureParameterType.useUIController?: boolean | UIControllerParams | undefineduseUIController: {
    UIControllerParams.useNewUI?: boolean | undefineduseNewUI: true,
  },
  PanoMeasureParameterType.editParams?: EditParameter | undefinededitParams: {
    EditParameter.allowMeasureType?: MeasureType[] | undefined@description选择测量插件的模式@default['line']@exampleallowMeasureType: ['line', 'area'],
    EditParameter.pointSelectorMode?: PointSelectorMode | undefined@description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来选点，'cursor' 为跟随鼠标移动pointSelectorMode: 'fixed',
    EditParameter.autoEndConfig?: autoEndConfig | undefinedautoEndConfig: {
      autoEndConfig.line?: number | null | undefinedline: 2,
    },
  },
  PanoMeasureParameterType.openParams?: OpenParameter | undefinedopenParams: {
    OpenParameter.isMobile?: boolean | undefinedisMobile: true,
  },
  PanoMeasureParameterType.magnifierParams?: MagnifierParameter | undefinedmagnifierParams: {
    MagnifierParameter.height?: number | undefinedheight: 120,
    MagnifierParameter.scale?: number | undefinedscale: 2,
    MagnifierParameter.width?: number | undefinedwidth: 120,
    dragEnabled?: boolean | undefined允许拖动放大镜dragEnabled: false,
    autoFixPCPosition?: boolean | undefinedrenderWithPoint 时，是否应该自动更新放大镜的位置autoFixPCPosition: false,
  },
}

初始化

通过 five plugins 方式初始化

import { const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin } from '@realsee/dnalogel'
import { class Five如视 VR Web展示器
@example// 初始化构造函数
const five = new Five();
// 将绘制区域添加到页面上
five.appendTo(document.body);
// 加载 Work 数据
five.load({...});Five } from '@realsee/five'

// 加载five插件
const const five: Fivefive = new new Five(initArgs?: FiveInitArgs | undefined): Five如视 VR Web展示器
@example// 初始化构造函数
const five = new Five();
// 将绘制区域添加到页面上
five.appendTo(document.body);
// 加载 Work 数据
five.load({...});Five({
  FiveInitArgs.plugins?: (((five: Five) => void) | [Plugin: ((five: Five) => any) | ((five: Five, parameters: any) => any), instanceName: string | null] | [Plugin: ((five: Five) => any) | ((five: Five, parameters: any) => any), instanceName: string | null, parameters: any] | [Plugin: (five: Five) => any, instanceName: string | null])[] | undefined插件定义
@description详见插件部分。plugins: [
    [const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin, 'panoMeasurePlugin', const pcConfig: PanoMeasureParameterTypepcConfig] // 根据实际情况选择 pcConfig 或 mobileConfig
  ]
})

const const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin = const five: Fivefive.Five.plugins: {
    [key: string]: any;
}插件暴露的方法plugins.__type[string]: anypanoMeasurePlugin as type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : anyObtain the return type of a function typeReturnType<typeof const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin>

也可以自己初始化

import { const PanoMeasurePlugin: (five: Five, parameters: PanoMeasureParameterType) => MeasureControllerPanoMeasurePlugin } from '@realsee/dnalogel'

// five 为 Five 实例；根据实际情况选择 pcConfig 或 mobileConfig
const const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin = function PanoMeasurePlugin(five: Five, parameters: PanoMeasureParameterType): MeasureControllerPanoMeasurePlugin(const five: Fivefive, const pcConfig: PanoMeasureParameterTypepcConfig)

数据展示

获取数据

您可以参考开放 API 了解如何获取标尺数据。对应接口为：/open/v3/ruler/search

加载数据并展示

const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin.MeasureController.load(data: MeasurePluginData | MeasurePluginServerData): void加载数据
@description数据加载时会覆盖当前已保存的数据@description如果当前正在编辑中，会自动退出并保存编辑load(const serverData: MeasurePluginServerDataserverData)
const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin.MeasureController.enable(config?: {
    mode: Mode;
} | undefined): void插件功能入口
@description会隐藏鼠标的默认聚焦环@description会隐藏当前 VR 内的点位展示enable({ mode: Modemode: 'View' })

关闭数据展示

const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin.MeasureController.disable: () => void关闭插件功能
@description清除标尺线条@description还原点位展示和默认鼠标 UIdisable()

测量

开启测量功能

const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin.MeasureController.enable(config?: {
    mode: Mode;
} | undefined): void插件功能入口
@description会隐藏鼠标的默认聚焦环@description会隐藏当前 VR 内的点位展示enable() // pc
const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin.MeasureController.enable(config?: {
    mode: Mode;
} | undefined): void插件功能入口
@description会隐藏鼠标的默认聚焦环@description会隐藏当前 VR 内的点位展示enable({ mode: Modemode: 'Edit' }) // mobile

关闭测量功能

const panoMeasurePlugin: MeasureControllerpanoMeasurePlugin.MeasureController.disable: () => void关闭插件功能
@description清除标尺线条@description还原点位展示和默认鼠标 UIdisable()

PanoMeasurePlugin​

功能说明​

效果展示​

快速开始​

声明配置​

初始化​

数据展示​

测量​

PanoMeasurePlugin

功能说明

效果展示

快速开始

声明配置

初始化

数据展示

测量