1.Photo Sphere Viewer插件安裝：
title=插件安裝 體驗AI代碼助手 代碼解讀復制代碼npm install photo-sphere-viewer -S
或
yarn add photo-sphere-viewer -S

2.原始全景圖展示
初始化標簽容器 體驗AI代碼助手 代碼解讀復制代碼

// 全景圖的根節點必須要具備寬高

TS引用，創建全景示例 體驗AI代碼助手 代碼解讀復制代碼

使用本地的原始全景圖資源文件來進行展示初次加載需要很長時間，如果全景圖是小于2MB的，這種展示方式的加載稍微能容忍。但是全景圖基本上都是高分辨率的高清大圖，所以需將全景圖進行切片，切成一塊塊比較小的圖片然后按需加載，提高加載速度。
3.全景圖切片
①降低初始全景級別分辨率
根據全景圖名稱（例如vr.jpg）新建一個文件夾（例如vr），然后把原始全景圖修改一下尺寸，根據實際開發需要降低全景圖的分辨率(例如：1920x1080或2560x1080)，另存為low.jpg，保存到vr文件夾下；
②原始高清大圖切片
將原始全景圖vr.jpg復制到vr文件夾下，現在將原始全景圖切片，切成32列16行，相當于把原始全景圖切成32×16也就是512份（根據實際開發需求制定切片方案）。
具體的切片步驟如下：
切片工具可使用ImageMagick(需要下載相關軟件后使用cmd命令行切片)或online tool，使用ImageMagick的切片命令在原始全景圖vr.jpg的路徑下運行cmd命令行：-crop x ，這里的切片分辨率（即下方切片命令中的-crop 600x600）需要由切片期望(panorama配置中的cols和rows的值,32列x16行或者其他切片行列數)自行計算。filename用于對切片后的瓦片進行命名，這里使用了官方Demo中的默認命名方式，有興趣的可自行研究。
ImageMagick切片命令 體驗AI代碼助手 代碼解讀復制代碼magick vr.jpg -crop 600x600 -set filename:tile "%[fx:page.x/600]%[fx:page.y/600]" -set filename:orig %t %[filename:orig]%[filename:tile].jpg