Photo-Sphere-Viewer 实现标记拖拽功能的技术解析

Photo-Sphere-Viewer 是一个优秀的全景图片查看器，虽然它主要定位为查看器而非编辑器，但开发者仍然可以通过其API实现一些交互功能，比如标记(Marker)的拖拽操作。

核心实现思路

实现标记拖拽功能需要处理三个关键事件：

1. 鼠标按下事件(mousedown)：开始拖拽
2. 鼠标移动事件(mousemove)：实时更新标记位置
3. 鼠标释放事件(mouseup)：结束拖拽

事件监听实现

虽然Photo-Sphere-Viewer本身没有直接提供拖拽相关的事件，但我们可以通过监听容器元素的原生DOM事件来实现：

// 获取查看器容器
const container = viewer.container;

// 鼠标移动事件
container.addEventListener('mousemove', (e) => {
  if (isDragging) {  // 拖拽中标志
    // 阻止事件冒泡，避免影响全景图本身的旋转
    e.stopPropagation();
    
    // 计算在查看器中的坐标
    const boundingRect = container.getBoundingClientRect();
    const viewerX = e.clientX - boundingRect.left;
    const viewerY = e.clientY - boundingRect.top;
    
    // 转换为球面坐标
    const { yaw, pitch } = viewer.dataHelper.viewerCoordsToSphericalCoords({
      x: viewerX,
      y: viewerY
    });
    
    // 更新标记位置
    updateMarkerPosition(yaw, pitch);
  }
});

// 鼠标释放事件
container.addEventListener('mouseup', () => {
  isDragging = false;
});

坐标转换关键点

在实现拖拽功能时，坐标转换是最关键的环节：

1. 首先获取鼠标相对于查看器容器的坐标
2. 然后使用查看器的dataHelper工具将2D坐标转换为球面坐标(yaw, pitch)
3. 最后用转换后的球面坐标更新标记位置

性能优化建议

在实际实现中，可以考虑以下优化点：

1. 使用事件委托减少事件监听器数量
2. 对高频的mousemove事件进行节流(throttle)处理
3. 在拖拽结束时才真正更新标记的DOM，而不是每次mousemove都更新

注意事项

1. 记得在mousemove事件中调用stopPropagation()，否则会影响全景图本身的旋转控制
2. 对于触摸设备，还需要考虑touchstart/touchmove/touchend事件
3. 拖拽过程中可能需要临时提高标记的z-index，确保它显示在其他元素上方

通过以上方法，开发者可以在Photo-Sphere-Viewer中实现流畅的标记拖拽功能，扩展查看器的交互能力。