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