Photo Sphere Viewer加载全景切片

一、制作切片

利用[ImageMagick](https://www.imagemagick.org)工具对完整的全景影像做切片，语法：

convert sphere.jpg -crop 94x94 -set 'filename:tile' '%[fx:page.x/94+1]_%[fx:page.y/94+1]' +repage +adjoin './tiles//tiled_%[filename:tile].jpg'

二、加载切片

1. 在html中增加窗口

<div id="viewer" style="width: 100vw; height: 100vh;"></div>

2. 安装Photo Sphere Viewer包

npm install @photo-sphere-viewer/core

3. 导入相关的类

import { Viewer } from '@photo-sphere-viewer/core';
import { EquirectangularTilesAdapter } from '@photo-sphere-viewer/equirectangular-tiles-adapter';

4. 新建Viewer

const viewer = new Viewer({
                container: 'viewer',
                adapter: EquirectangularTilesAdapter,
                panorama: {
                    width: 6656,
                    cols: 64,
                    rows: 32,
                    baseUrl: this.baseUrl + `sphere-small.jpg`,
                    tileUrl: (col, row) => {
                        const num = row * 16 + col + 1;
                        return this.baseUrl + `tiles/tiled_${col+1}_${row+1}.jpg`;
                    },
                },
                mousewheelCtrlKey: true,
            });