photo-sphere-viewer实现全景的方法如下：
import { onMounted, reactive, ref } from 'vue'
import { Viewer } from '@photo-sphere-viewer/core'
import '@photo-sphere-viewer/core/index.css'
import {MarkersPlugin} from '@photo-sphere-viewer/markers-plugin'
import '@photo-sphere-viewer/markers-plugin/index.css'
let viewer = null
onMounted(() => {
viewer = new Viewer({
container: document.querySelector("#viewer"),
adapter: EquirectangularTilesAdapter,
// 一张图，加载非常慢
panorama: '/oss/1.jpg',
caption: '博物馆',
size: {
width: "100%",
height: "100%",
},
loadingTxt:"加载中...",
})
})这个的确能实现，但是由于全景图太大，导致加载速度太慢，所以要用瓦片去实现。点击ImageMagick瓦片切片方式，查看如何用ImageMagick将图片切成瓦片。下面是重新加载瓦片的代码：
1、安装equirectangular-tiles-adapter
npm i @photo-sphere-viewer/equirectangular-tiles-adapter@5.7.1
注意，这里要锁定版本，版本号和您的@photo-sphere-viewer/core一致，否则可能安装失败
2、使用EquirectangularTilesAdapter
// 加载相关adapter
import { EquirectangularTilesAdapter } from '@photo-sphere-viewer/equirectangular-tiles-adapter'
onMounted(() => {
viewer = new Viewer({
container: document.querySelector("#viewer"),
adapter: EquirectangularTilesAdapter,
panorama: {
// 原始图片尺寸
width: 8192,
cols: 32,
rows: 16,
// 这里为压缩后的全景图，用来首次加载
baseUrl: `./oss/s1.jpg`,
// 这里是加载当前场景的瓦片
tileUrl: (col, row) => {
return `/oss/1_${col}_${row}.jpg`
}
},
caption: '博物馆',
size: {
width: "100%",
height: "100%",
},
loadingTxt:"加载中...",
})
})这时，加载速度明显快多了，看下效果图：
