最近公司接到一個項目，要做一個街道的全景圖展示效果。于是就想到了使用photo sphere viewer來實現(xiàn)；通過官網(wǎng)逐步了解一些基本的和高級的使用方法。最基本的就是使用原始圖進(jìn)行展示，但是實際生產(chǎn)的全景圖基本在60M到120M之間，如果只是單純地使用原始全景圖進(jìn)行展示的話非常影響用戶體驗，因為加載一張60M的圖片所耗費(fèi)的時間是無法想象的。通過查閱官方文檔，可以將全景圖切片然后以加載瓦片的形式加載切片以后的全景圖。

1、環(huán)境準(zhǔn)備

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.準(zhǔn)備容器

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

2.準(zhǔn)備全景圖
這是一張分辨率為20800*10400的全景圖，大小為91.7MB，算是一張比較大的全景圖，不作任何處理我直接放在項目根目錄的public里面一個名為panorama的文件夾里面。

大小

分辨率

位置

2.初始化photo-sphere-viewer

//先導(dǎo)入photo-sphere-viewer插件和它的樣式
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
// 定義視圖容器
let viewer: Viewer | null;
//注意這里應(yīng)該在onMounted初始化，不然可能找不到html元素
onMounted(() => {
  viewer = new Viewer({
    container: "viewer",
    panorama: '/panorama/161.jpg',
    navbar: undefined
  })
})

到此，基本上已經(jīng)可以跑起來了，看下效果

效果

我們可以看到原始全景圖來展示初次加載需要很長時間，而且我還是在本地的圖片，想象一下如果是請求服務(wù)器的資源那加載的時間肯定是災(zāi)難性的，如果你的全景圖是小于2MB的，這種展示方式稍微能容忍。但是全景圖基本上都是高分辨率的占用空間很大的圖片，所以考慮將比較大的全景圖進(jìn)行切片，切成一塊塊比較小的圖片然后按需加載，有點類似加載地圖瓦片的意思。

5、全景圖切片展示

1.首先根據(jù)全景圖名稱（我這里是161）新建一個文件夾（161），然后把原始全景圖修改一下尺寸，分辨率變成2160×1080，修改以后大小變?yōu)?99KB，并命名為low.jpg，保存到161文件夾下
2.然后將原始全景圖（分辨率為：20800×10400）復(fù)制到161文件夾下，現(xiàn)在將原始全景圖切片，切成32列16行，相當(dāng)于把原始全景圖切成32×16也就是512份，每一份分辨率為650×650。具體的切片步驟在這里，切片之后圖片是這樣的

切片

3.圖片準(zhǔn)備好以后，接下來代碼實現(xiàn)

//引入切片適配器
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
  })
})

具體效果如下：

切片以后的展示效果

可以看到我們進(jìn)入場景基本上是秒開的，基本上加載時間能達(dá)到幾十毫秒。

3結(jié)語

今天介紹的也不是什么高深的技術(shù)，主要是剛開始做的時候也是各種坑，官網(wǎng)是英文的直譯過來的中文十分拗口。項目也挺急的于是各種資料搜索整理，到現(xiàn)在也算是有一些眉目了吧，所以分享出來讓有需要的人少入點坑。