Photo Sphere Viewer 实现虚拟漫游中特定全景图链接分享功能

技术背景

Photo Sphere Viewer 是一个强大的全景图查看器，而其 Virtual Tour 插件则扩展了多场景漫游功能。在实际应用中，用户经常需要分享特定全景场景的直达链接，而不是整个漫游的入口链接。

核心实现方案

1. 节点切换机制

Virtual Tour 插件提供了 setCurrentNode 方法，这是实现场景切换的关键。该方法接受节点ID作为参数，可以动态切换到指定的全景场景。

2. URL 参数处理

要实现通过URL直接定位到特定场景，需要监听URL中的hash参数变化。例如：

tour.html#node61

其中"node61"就是目标场景的节点ID。

3. 实现步骤

1. 初始化监听：在页面加载时解析URL中的hash参数
2. 场景切换：如果存在有效节点ID，调用setCurrentNode方法
3. 状态同步：在用户手动切换场景时更新URL hash

4. 右键菜单扩展

要实现"复制当前场景链接"功能，需要：

1. 获取相册DOM元素
2. 添加contextmenu事件监听器
3. 使用事件委托处理相册项点击
4. 构建包含当前节点ID的完整URL
5. 提供复制到剪贴板的功能

代码示例

// 初始化时检查hash
const initialNode = window.location.hash.substring(1); // 去掉#
if (initialNode) {
    viewer.getPlugin('virtual-tour').setCurrentNode(initialNode);
}

// 场景变化时更新URL
viewer.on('node-changed', (e, node) => {
    window.location.hash = node.id;
});

// 相册右键菜单
document.querySelector('.psv-gallery').addEventListener('contextmenu', (e) => {
    const item = e.target.closest('.psv-gallery-item');
    if (item) {
        e.preventDefault();
        const nodeId = item.dataset.nodeId;
        const url = `${window.location.origin}${window.location.pathname}#${nodeId}`;
        // 实现复制逻辑...
    }
});

注意事项

1. 考虑浏览器兼容性，特别是hashchange事件
2. 移动端可能需要不同的交互方式
3. 对无效节点ID要有容错处理
4. URL长度限制可能影响特别长的节点ID

通过以上实现，用户可以方便地获取并分享特定全景场景的直达链接，大大提升了用户体验和分享便利性。