vue 加载720全景图

原创已于 2022-07-07 15:19:44 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

于 2021-10-14 10:11:40 首次发布

VUE 同时被 3 个专栏收录

36 篇文章

订阅专栏

javascript

31 篇文章

订阅专栏

GIS\2D\3D

13 篇文章

订阅专栏

这篇博客介绍了如何利用photo-sphere-viewer库在网页中展示360度全景图片。首先通过npm安装并引入库文件，然后在HTML中设置容器，并在JavaScript中加载图片，监听视图和缩放级别的变化。示例代码详细展示了实现过程。

步骤
1.安装photo-sphere-viewer
官网 https://photo-sphere-viewer.js.org/

npm install --save photo-sphere-viewer

2.引入

import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { Viewer } from 'photo-sphere-viewer'

3.主要代码

<div id="viewer720"></div>

showViewer720 () {
    let tempUrl = require('../../public/mp4/yjy.jpg') // 加载720图片地址
    this.viewer = new Viewer({
        container: document.querySelector('#viewer720'),
        panorama: tempUrl
    })
    // 当视图经度和/或纬度改变时触发
    this.viewer.on('position-updated', (e, position) => {
        console.log(`视图经度和/或纬度改变111: ${position.longitude} latitude: ${position.latitude}`,  position.longitude*(Math.PI / 360), position.latitude*(Math.PI / 180))
    })
    // 当缩放级别改变时触发
    this.viewer.on('zoom-updated', (e, level) => {
        console.log(`放级别改变 ${level}`, e)
    })
}