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

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

实现效果如上,在输入框输入网址点击搜索即可在线显示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>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue 3中使用photo-sphere-viewer来切换图片,你需要遵循以下步骤: 1. 首先,你需要在你的Vue项目中安装photo-sphere-viewer。你可以使用npm或yarn来完成此操作。安装完成后,你需要在Vue组件中引入photo-sphere-viewer。 ``` npm install photo-sphere-viewer ``` 2. 接下来,你需要在Vue组件中创建一个photo-sphere-viewer实例,并将其添加到DOM中。你可以使用Vue的生命周期钩子函数mounted()来完成此操作。 ``` <template> <div ref="viewerContainer"></div> </template> <script> import PhotoSphereViewer from 'photo-sphere-viewer'; export default { mounted() { this.viewer = new PhotoSphereViewer({ container: this.$refs.viewerContainer, panorama: '/path/to/your/panorama.jpg' }); } } </script> ``` 3. 现在,你可以使用Vue的事件处理程序来切换图片。例如,你可以在Vue组件中添加一个按钮,当用户单击该按钮时,你可以更改panorama选项来加载新的图片。 ``` <template> <div> <div ref="viewerContainer"></div> <button @click="changePanorama">切换图片</button> </div> </template> <script> import PhotoSphereViewer from 'photo-sphere-viewer'; export default { mounted() { this.viewer = new PhotoSphereViewer({ container: this.$refs.viewerContainer, panorama: '/path/to/your/panorama.jpg' }); }, methods: { changePanorama() { this.viewer.setPanorama('/path/to/your/new/panorama.jpg'); } } } </script> ``` 这样,当用户单击“切换图片”按钮时,你的Vue组件将调用changePanorama()方法,并使用setPanorama()方法更改photo-sphere-viewer实例的panorama选项,从而加载新的图片
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值