简体中文

全景查看器

全景查看器，用于加载和展示全景图像，支持全景点切换、视角控制、与 3D Viewer 联动，以及要素识别等功能。

类定义

class PanoramaViewer

属性

DOM 相关

属性	类型	说明
`container`	`HTMLDivElement`	外层容器 DOM 元素
`_container`	`HTMLDivElement`	内部容器 DOM 元素
`canvas`	`HTMLCanvasElement`	渲染画布
`renderer`	`{ domElement: HTMLCanvasElement }`	渲染器，包含渲染目标画布

相机

属性	类型	说明
`camera`	`{ position: Position3D; rotation: { x, y, z, order }; fov: number; aspect: number }`	相机对象，包含位置、旋转、视野角度和宽高比
`cameraHeading`	`number`	相机朝向角度（只读 getter）

视角控制

属性	类型	说明
`_lng`	`number`	水平视角（经度方向）
`_lat`	`number`	垂直视角（纬度方向）
`pos`	`Position3D & { fov, heading, pitch }`	当前位置与视角信息（运行时由 render 回调赋值）

坐标与绑定

属性	类型	说明
`epsg`	`number`	坐标系 EPSG 编码
`bindViewer`	`Viewer \| undefined`	绑定的 3D Viewer 实例（getter/setter，setter 接受 `null` 用于解绑）
`syncViewer`	`boolean`	是否与绑定的 3D Viewer 同步视角（getter/setter）

全景点标记

属性	类型	说明
`panoMarkerSize`	`number`	全景标记大小
`panoMarkerColor`	`number`（getter）/ `string`（setter）	全景标记颜色
`_panoMarkerObj`	`{ _panoList: Array }`	全景标记内部对象

交互与识别

属性	类型	说明
`identifyFeature`	`boolean`	是否启用要素识别

全景切换

属性	类型	说明
`switchDuration`	`number`	切换全景时的过渡动画时长
`stepSize`	`number`	全景前进步长

显示设置

属性	类型	说明
`showCompass`	`boolean`	是否显示指南针
`compassLocale`	`LocaleName`	指南针显示语言
`brightness`	`number`	亮度
`contrast`	`number`	对比度
`saturation`	`number`	饱和度
`hue`	`number`	色调

构造函数

constructor(containerId: string, options?: PanoViewerOptions)

参数	类型	必填	说明
`containerId`	`string`	是	容器元素 ID
`options`	`PanoViewerOptions`	否	配置项

PanoViewerOptions

属性	类型	必填	说明
`licensingServiceUrl`	`string`	否	许可服务 URL
`bindViewer`	`Viewer`	否	初始绑定的 3D Viewer 实例
`syncViewer`	`boolean`	否	是否同步 3D Viewer 视角
`panoMarkerSize`	`number`	否	全景标记大小

方法

on(eventName, callback)

public on<K extends keyof PanoViewerEventMap>(
    eventName: K,
    callback: PanoViewerEventMap[K]
): void

注册事件监听器。支持的事件类型参见下方事件部分。

参数	类型	说明
`eventName`	`keyof PanoViewerEventMap`	事件名称
`callback`	`PanoViewerEventMap[K]`	回调函数

loadPano(targetPano, nearbyPanoList, config?)

public loadPano(
    targetPano: PanoPoint,
    nearbyPanoList: PanoPoint[],
    config?: { heading?: number; pitch?: number }
): void

首次加载全景点。

参数	类型	必填	说明
`targetPano`	`PanoPoint`	是	目标全景点
`nearbyPanoList`	`PanoPoint[]`	是	附近全景点列表
`config`	`{ heading?: number; pitch?: number }`	否	初始视角配置

switchPano(targetPano, nearbyPanoList)

public switchPano(targetPano: PanoPoint, nearbyPanoList: PanoPoint[]): void

切换到另一个全景点（全景已加载后使用）。

参数	类型	说明
`targetPano`	`PanoPoint`	目标全景点
`nearbyPanoList`	`PanoPoint[]`	附近全景点列表

getScreenCapture(fileName)

public getScreenCapture(fileName: string): void

截取当前全景画面并下载。

参数	类型	说明
`fileName`	`string`	下载的文件名

destroy()

public destroy(): void

销毁全景查看器，释放资源。

事件 (PanoViewerEventMap)

通过 on(eventName, callback) 监听。

事件名	回调签名	说明
`panoClick`	`(panoId: number) => void`	点击全景点标记时触发，返回全景点 ID
`render`	`(pos: Position3D & { fov, heading, pitch }) => void`	每帧渲染时触发，返回当前位置和视角信息
`panoLoad`	`() => void`	全景加载完成时触发
`pinpointStart`	`() => void`	定点操作开始时触发
`pinpointStop`	`() => void`	定点操作结束时触发
`identify`	`(featureInfo: { layerId, featureId, position, attributes }) => void`	要素识别时触发

identify 回调参数详情

featureInfo: {
    layerId: number;       // 图层 ID
    featureId: number;     // 要素 ID
    position: { x: number; y: number; z: number };  // 要素坐标
    attributes: Record<string, any>;                 // 属性键值对
}

全景查看器#

类定义#

属性#

DOM 相关#

相机#

视角控制#

坐标与绑定#

全景点标记#

交互与识别#

全景切换#

显示设置#

构造函数#

PanoViewerOptions#

方法#

on(eventName, callback)#

loadPano(targetPano, nearbyPanoList, config?)#

switchPano(targetPano, nearbyPanoList)#

getScreenCapture(fileName)#

destroy()#

事件 (PanoViewerEventMap)#

identify 回调参数详情#

相关类型#

PanoPoint#

全景查看器

类定义

属性

DOM 相关

相机

视角控制

坐标与绑定

全景点标记

交互与识别

全景切换

显示设置

构造函数

PanoViewerOptions

方法

on(eventName, callback)

loadPano(targetPano, nearbyPanoList, config?)

switchPano(targetPano, nearbyPanoList)

getScreenCapture(fileName)

destroy()

事件 (PanoViewerEventMap)

identify 回调参数详情

相关类型

PanoPoint