图层管理

图层管理

图层（Layer）是叠加在全景查看器界面之上的 2D 元素，不随全景画面旋转，始终固定在屏幕指定位置。常用于放置品牌 Logo、自定义导航按钮、二维码、装饰边框、促销横幅等界面元素。

图层类型

图片图层

上传 PNG/JPG/GIF 图片作为图层内容：

透明背景支持：使用 PNG 透明底图，图层仅显示有效像素区域
GIF 动图：支持上传 GIF 格式实现简单的循环动画效果
点击行为：可为图片图层绑定点击事件（跳转链接、弹窗等）

HTML 图层

使用自定义 HTML/CSS 代码创建复杂的交互图层：

富文本内容：可嵌入格式化文字、列表、链接等
表单元素：可实现简单的信息收集表单
自定义样式：完全自主控制外观和布局

自定义图层

通过自定义代码实现复杂的交互效果，面向高级用户。

位置与尺寸

每个图层均可精确控制在屏幕上的位置和大小：

对齐方式

提供 9 宫格对齐系统：

左上、正上、右上
左中、正中、右中
左下、正下、右下

尺寸设定

固定像素：以 px 为单位设定图层的宽度和高度
百分比模式：以屏幕宽度/高度的百分比设定，自动适应不同分辨率的终端
锁定宽高比：开启后修改宽度时高度等比例缩放

偏移微调

X 偏移：在对齐基准点上水平方向的像素偏移量
Y 偏移：垂直方向的像素偏移量
通过偏移微调可以实现精确到像素的位置控制

图层动画

每个图层可配置三种独立的 CSS 动画，让界面元素更加生动：

入场动画

图层首次出现时播放的动画效果：

可选效果：淡入(fadeIn)、从左滑入(slideInLeft)、从下弹入(bounceInUp)、缩放出现(zoomIn)等数十种预设
持续时间：动画播放时长（毫秒）
延迟时间：等待多久后开始播放
缓动函数：linear / ease / ease-in / ease-out / ease-in-out / 自定义贝塞尔曲线

退场动画

图层消失时播放的动画效果（与入场动画对应的反向动画）。

常驻动画

图层在屏幕上持续播放的循环动画：

呼吸效果(pulse)：图层大小在 100%~110% 之间缓慢交替
浮动效果(float)：图层上下小幅度漂浮运动
旋转效果(rotate)：图层持续匀速旋转
闪烁效果(flash)：图层透明度周期性变化
循环次数：1次 / 3次 / 无限循环
播放方向：正向 / 反向 / 交替正反

设备适配

图层支持针对不同终端设置独立的样式：

仅 PC 显示：此图层只在电脑浏览器中显示
仅移动端显示：此图层只在手机/平板中显示
全部显示：所有设备都显示
PC 端和移动端可分别设置不同的尺寸、位置和对齐方式

遮罩图层

特殊类型的图层，为全景画面添加装饰性边框效果：

暗角遮罩：四角渐变暗化，营造电影质感
相框遮罩：为全景画面添加装饰性外框
遮罩图层不影响全景的触摸/拖拽交互操作