适应于全景Photo Sphere Viewer PHP切图算法

要将 Photo Sphere Viewer 与 PHP 切图算法 结合使用，通常是为了将高分辨率的全景图片切割成适合网页加载的格式（例如立方体贴图或分块瓦片），以提高加载性能和用户体验。以下是实现这一目标的步骤和算法思路：

1. 切图目标

立方体贴图（Cubemap）：将等距圆柱投影（equirectangular）全景图转换为 6 张立方体面（前、后、左、右、上、下）。
分块瓦片（Tiling）：将全景图切割成多个小块（tiles），类似于 Google Maps 的瓦片系统，按需加载以提高性能。

2. PHP 切图算法实现

A. 立方体贴图（Cubemap）生成

使用 PHP 的图像处理库（如 GD 或 Imagick）将等距圆柱投影图转换为立方体贴图。

<?php
// 加载等距圆柱投影全景图
$panorama = imagecreatefromjpeg('path/to/panorama.jpg');
$width = imagesx($panorama);
$height = imagesy($panorama);

// 立方体面尺寸（假设为正方形）
$cubeSize = 1024;

// 创建立方体贴图（6个面）
$front = imagecreatetruecolor($cubeSize, $cubeSize);
$back = imagecreatetruecolor($cubeSize, $cubeSize);
$left = imagecreatetruecolor($cubeSize, $cubeSize);
$right = imagecreatetruecolor($cubeSize, $cubeSize);
$top = imagecreatetruecolor($cubeSize, $cubeSize);
$bottom = imagecreatetruecolor($cubeSize, $cubeSize);

// 转换算法（示例：前表面）
for ($y = 0; $y < $cubeSize; $y++) {
    for ($x = 0; $x < $cubeSize; $x++) {
        // 将立方体坐标映射到全景图坐标
        $u = ($x / $cubeSize) * 2 - 1; // [-1, 1]
        $v = ($y / $cubeSize) * 2 - 1; // [-1, 1]
        
        // 计算球面坐标
        $theta = atan2($u, 1); // 经度
        $phi = asin($v / sqrt($u * $u + $v * $v + 1)); // 纬度
        
        // 映射到全景图
        $panoramaX = (($theta + M_PI) / (2 * M_PI)) * $width;
        $panoramaY = (M_PI / 2 - $phi) / M_PI * ($height / 2);
        
        // 采样像素
        $color = imagecolorat($panorama, $panoramaX, $panoramaY);
        imagesetpixel($front, $x, $y, $color);
    }
}

// 保存立方体贴图
imagejpeg($front, 'path/to/front.jpg');
imagejpeg($back, 'path/to/back.jpg');
// ... 其他面类似
?>

B. 分块瓦片（Tiling）生成

将全景图切割成多个瓦片，按金字塔层级（LOD）组织。

<?php
// 加载全景图
$panorama = imagecreatefromjpeg('path/to/panorama.jpg');
$width = imagesx($panorama);
$height = imagesy($panorama);

// 定义瓦片大小（例如 512x512）
$tileSize = 512;

// 生成金字塔层级
$levels = 4; // 层级数
for ($level = 0; $level < $levels; $level++) {
    $levelWidth = $width / pow(2, $level);
    $levelHeight = $height / pow(2, $level);
    
    // 计算瓦片行列数
    $cols = ceil($levelWidth / $tileSize);
    $rows = ceil($levelHeight / $tileSize);
    
    // 切割瓦片
    for ($row = 0; $row < $rows; $row++) {
        for ($col = 0; $col < $cols; $col++) {
            $tile = imagecreatetruecolor($tileSize, $tileSize);
            
            // 计算源图坐标
            $srcX = $col * $tileSize;
            $srcY = $row * $tileSize;
            $srcWidth = min($tileSize, $levelWidth - $srcX);
            $srcHeight = min($tileSize, $levelHeight - $srcY);
            
            // 复制瓦片
            imagecopyresized(
                $tile, $panorama,
                0, 0, $srcX, $srcY,
                $tileSize, $tileSize,
                $srcWidth, $srcHeight
            );
            
            // 保存瓦片
            $path = "tiles/{$level}/{$row}_{$col}.jpg";
            imagejpeg($tile, $path);
        }
    }
}
?>

3. 在 Photo Sphere Viewer 中使用切图结果

立方体贴图直接加载立方体贴图：

const viewer = new Viewer({
  container: document.querySelector('#viewer'),
  panorama: {
    type: 'cubemap',
    front: 'path/to/front.jpg',
    back: 'path/to/back.jpg',
    left: 'path/to/left.jpg',
    right: 'path/to/right.jpg',
    top: 'path/to/top.jpg',
    bottom: 'path/to/bottom.jpg',
  },
});

分块瓦片

使用 PhotoSphereViewer.Tiles 插件加载瓦片：

import { Viewer, TilesPlugin } from '@photo-sphere-viewer/core';

const viewer = new Viewer({
  container: document.querySelector('#viewer'),
  panorama: {
    type: 'multires',
    levels: [
      { tileSize: 512, size: 4096, fallbackOnly: true },
      { tileSize: 512, size: 2048 },
      { tileSize: 512, size: 1024 },
    ],
    tilesPath: 'path/to/tiles/{level}/{row}_{col}.jpg',
  },
});

4. 注意事项
性能优化：对于高分辨率全景图，建议先压缩再切图。
边缘处理：切图时注意边缘像素的插值，避免接缝问题。
服务器配置：如果使用分块瓦片，确保服务器支持动态路径请求（如 tiles/2/3_1.jpg）。
通过 PHP 切图算法与 Photo Sphere Viewer 的结合，可以高效地展示大规模全景内容，适用于需要高性能、高交互性的应用场景。