photo-sphere-viewer全景图使用案例

1.安装photo-sphere-viewer，两种方式都可以

npm install @photo-sphere-viewer/core

yarn add @photo-sphere-viewer/core

2.项目中去引入 

import { Viewer } from 'photo-sphere-viewer'
import * as PhotoSphereViewer from "photo-sphere-viewer/dist/adapters/cubemap.js";
import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers'
import { EquirectangularTilesAdapter } from "photo-sphere-viewer/dist/adapters/equirectangular-tiles"
import 'photo-sphere-viewer/dist/plugins/markers.css';

3.代码页面

viewdata.value = new Viewer({
            container: idname,//必填参数，放置全景图的div元素。
            adapter: EquirectangularTilesAdapter,//适配器
            
            // panorama: img,//必填参数，全景图的路径
            panorama: {
                width: 1200,
                cols: 16,//2的几次方
                rows: 8,//2的几次方
                baseUrl: `${img}/low.jpg`,//图片路径
                tileUrl: (col, row) => {
                    return `${img}/row-${col+1}-column-${row+1}.jpg`;//根据后台的图片规则去拼接路径
                },
            },
            autorotateDelay: false,//可选，默认值为true，true为自动调用全景图，false为在后面加载全景图(通过.load()方法)。
            size: {
                width: '100%',
                height: '100%'
            },
            maxFov: 100,//100,//可选，默认值为90，观察的最小区域，单位degrees，在1-179之间
            minFov: 50,//10,//可选，默认值为30，观察的最大区域，单位degrees，在1-179之间。
            navbar: false,//可选值，默认为false。显示导航条。
            touchmoveTwoFingers: false,
            mousewheelCtrlKey: false,
            autorotateSpeed:0,
            plugins: [
                [MarkersPlugin, {
                    markers: [ ],
                }],
            ],
        }).on('ready', function () {
             console.log('pano ok')
        })

4.每次切换的时候，先删除上一张

if (viewdata.value) try {
            const viewer = document.getElementById(idname)
            viewer.removeChild(viewer.childNodes[0])
        } catch (e) {
            // viewdata.value.destroy()
            // console.log(e)
        }

 文笔不好，自己做记录用的，有需要的可以拿去用