vue3使用Photo-Sphere-viewer浏览全景图片

PinkM∞n7

已于 2024-02-02 10:18:18 修改

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2024-02-01 17:24:53 首次发布

本文链接：https://blog.youkuaiyun.com/w1060436872/article/details/135978834

本文介绍了如何在Vue应用中集成photo-sphere-viewer库，实现在输入框输入网址后显示360全景图片的功能，包括安装指令和组件模板的详细代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果如上，在输入框输入网址点击搜索即可在线显示360全景图片

安装命令：

npm install photo-sphere-viewer

yarn add photo-sphere-viewer

<template>
    <div class="container">
        <el-input v-model="imgUrl" placeholder="请输入图片地址">
            <template #append>
                <el-button type="primary" @click="getData()"> 查看 </el-button>
            </template>
        </el-input>
        <div id="viewer" class="canvas-box"></div>
    </div>
</template>


  <script setup>
import { Viewer } from '@photo-sphere-viewer/core';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import '@photo-sphere-viewer/core/index.css';
const route = useRoute();
let router = useRouter();

const imgUrl = ref();
var viewer;
onMounted(() => {
    if (route.query.url) {
        imgUrl.value = route.query.url;
    }
    addimg(imgUrl.value);
});
const addimg = (img) => {
    if (document.querySelector('#viewer')) {
        // 清除元素的内容
        document.querySelector('#viewer').innerHTML = '';
    }
    if (route.query.url) {
        img = route.query.url;
    } else {
        img = 'http://全景图片.jpg';
    }
    console.log('imgurl----add', imgUrl.value);
    viewer = new Viewer({
        container: document.querySelector('#viewer'),
        // panorama: '/src/assets/publicImg/fullscreen.jpg',
        panorama: imgUrl.value,
        lang: {
            zoom: 'Zoom',
            zoomOut: 'Zoom out',
            zoomIn: 'Zoom in',
            moveUp: 'Move up',
            moveDown: 'Move down',
            moveLeft: 'Move left',
            moveRight: 'Move right',
            download: 'Download',
            fullscreen: 'Fullscreen',
            menu: 'Menu',
            close: 'Close',
            twoFingers: 'Use two fingers to navigate',
            ctrlZoom: 'Use ctrl + scroll to zoom the image',
            loadError: "The panorama can't be loaded"
        },
        pan: { enabled: true },
        minFov: 0,
        maxFov: 180,
        touchmoveTwoFingers: true,
        mousewheelCtrlKey: true
    });
};
const getData = () => {
    router.push({
        path: '/',
        query: { url: imgUrl.value }
    });
    addimg();
};
</script>
<style>
@import '/node_modules/@photo-sphere-viewer/core/index.css';
</style>

<style lang="less" scoped>
.container {
    box-sizing: border-box;
    padding: 20px;
    overflow: hidden;
    height: 100vh;
    .canvas-box {
        width: 100%;
        height: calc(100% - 100px);
        margin-top: 20px;
    }
}
</style>