Photo-Sphere-Viewer 中限制平面图插件最大化尺寸的方法

Photo-Sphere-Viewer 是一个功能强大的全景图片查看器，其中的 PlanPlugin（平面图插件）允许用户在查看全景时显示对应的平面图。在实际使用中，开发者可能会遇到需要控制平面图插件最大化时尺寸的需求。

问题背景

当用户将平面图插件最大化时，默认情况下它会占据整个可用屏幕空间。但在某些应用场景中，开发者可能希望限制其最大尺寸，使其不会完全覆盖整个视图区域。

解决方案

通过 CSS 可以有效地控制平面图插件在最大化状态下的尺寸。以下是推荐的实现方式：

/* 设置固定尺寸 */
.psv-plan--maximized {
  width: 500px !important;
  height: 500px !important;
}

/* 考虑导航栏存在时的高度调整 */
.psv--has-navbar .psv-plan--maximized {
  height: 500px !important;
}

/* 响应式处理 - 当容器宽度小于设定值时 */
@container psv-container (max-width: 500px) {
  .psv-plan--maximized {
    width: 100% !important;
  }
}

实现原理

1. 固定尺寸设置：通过 .psv-plan--maximized 选择器直接设置平面图在最大化状态下的宽高。

2. 导航栏兼容：当查看器带有导航栏时，需要单独调整高度以避免布局问题。

3. 响应式处理：使用 CSS 容器查询确保在小屏幕设备上平面图能够自适应宽度。

注意事项

• 必须使用 !important 声明来覆盖插件内部的样式优先级
• 尺寸值可以根据实际需求调整
• 这种方法不会影响平面图插件在正常状态下的显示

替代方案分析

虽然可以通过 JavaScript 监听 view-changed 事件并尝试动态调整尺寸，但这种方法存在以下问题：

1. 动画效果会出现异常
2. 实现复杂度较高
3. 不如 CSS 方案稳定可靠

因此，CSS 方案是当前最推荐的做法，既简单又有效。

通过这种方法，开发者可以灵活控制平面图插件在最大化状态下的显示尺寸，从而优化用户体验和界面布局。