最近公司接到一个项目，要做一个街道的全景图展示效果。于是就想到了使用photo sphere viewer来实现；通过官网逐步了解一些基本的和高级的使用方法。最基本的就是使用原始图进行展示，但是实际生产的全景图基本在60M到120M之间，如果只是单纯地使用原始全景图进行展示的话非常影响用户体验，因为加载一张60M的图片所耗费的时间是无法想象的。通过查阅官方文档，可以将全景图切片然后以加载瓦片的形式加载切片以后的全景图。

1、环境准备

1.初始化项目

npm init vite@latest vue-photo-sphere-viewer --template vue-ts

2.安装photo sphere viewer

npm install photo-sphere-viewer

或者

yarn add photo-sphere-viewer

2、原始全景图展示

1.准备容器

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

2.准备全景图
这是一张分辨率为20800*10400的全景图，大小为91.7MB，算是一张比较大的全景图，不作任何处理我直接放在项目根目录的public里面一个名为panorama的文件夹里面。

大小
分辨率
位置

2.初始化photo-sphere-viewer

//先导入photo-sphere-viewer插件和它的样式
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
// 定义视图容器
let viewer: Viewer | null;
//注意这里应该在onMounted初始化，不然可能找不到html元素
onMounted(() => {
  viewer = new Viewer({
    container: "viewer",
    panorama: '/panorama/161.jpg',
    navbar: undefined
  })
})

到此，基本上已经可以跑起来了，看下效果

效果

我们可以看到原始全景图来展示初次加载需要很长时间，而且我还是在本地的图片，想象一下如果是请求服务器的资源那加载的时间肯定是灾难性的，如果你的全景图是小于2MB的，这种展示方式稍微能容忍。但是全景图基本上都是高分辨率的占用空间很大的图片，所以考虑将比较大的全景图进行切片，切成一块块比较小的图片然后按需加载，有点类似加载地图瓦片的意思。

5、全景图切片展示

1.首先根据全景图名称（我这里是161）新建一个文件夹（161），然后把原始全景图修改一下尺寸，分辨率变成2160×1080，修改以后大小变为399KB，并命名为low.jpg，保存到161文件夹下
2.然后将原始全景图（分辨率为：20800×10400）复制到161文件夹下，现在将原始全景图切片，切成32列16行，相当于把原始全景图切成32×16也就是512份，每一份分辨率为650×650。具体的切片步骤在这里，切片之后图片是这样的

切片

3.图片准备好以后，接下来代码实现

//引入切片适配器
import { EquirectangularTilesAdapter } from "photo-sphere-viewer/dist/adapters/equirectangular-tiles"

//初始化
// 定义视图容器
let viewer: Viewer | null;

onMounted(() => {
  viewer = new Viewer({
    adapter: EquirectangularTilesAdapter,
    container: "viewer",
    panorama: {
       width: 1200,
      cols: 32,
      rows: 16,
      baseUrl: `/panorama/161/low.jpg`,
      tileUrl: (col:number, row:number) => {
        return `/panorama/161/161_${col}_${row}.jpg`
      }
    },
    navbar: undefined
  })
})

具体效果如下：

切片以后的展示效果

可以看到我们进入场景基本上是秒开的，基本上加载时间能达到几十毫秒。

3结语

今天介绍的也不是什么高深的技术，主要是刚开始做的时候也是各种坑，官网是英文的直译过来的中文十分拗口。项目也挺急的于是各种资料搜索整理，到现在也算是有一些眉目了吧，所以分享出来让有需要的人少入点坑。