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

本文介绍了如何在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>

### 在 Vue3 中引入和配置 Photo-Sphere-Viewer 为了在 Vue3 项目中成功集成 `photo-sphere-viewer`,需遵循特定步骤来安装必要的依赖并编写相应的代码。 #### 安装依赖包 通过 npm 或者 yarn 来安装 `photo-sphere-viewer` 及其所需的 Three.js 库。执行如下命令可以完成这两个库的安装[^2]: ```bash npm install photo-sphere-viewer three --save ``` 或者如果偏好使用 Yarn,则运行: ```bash yarn add photo-sphere-viewer three ``` #### 创建组件文件结构 创建一个新的 Vue 组件用于展示全景图像,在此示例中命名为 `PanoramaView.vue`。该组件负责初始化 `PhotoSphereViewer` 实例以及设置初始参数[^1]。 #### 编写 PanoramaView.vue 文件内容 以下是完整的 `PanoramaView.vue` 的实现方式,包含了模板、样式与脚本部分。注意这里假设已经有一个名为 `pano.jpg` 的全景图片资源可供加载[^4]: ```html <template> <div id="viewer"></div> </template> <script setup> import { onMounted } from &#39;vue&#39;; import PhotoSphereViewer from &#39;photo-sphere-viewer&#39;; onMounted(() => { new PhotoSphereViewer.Viewer({ panorama: &#39;/path/to/your/image/pano.jpg&#39;, container: document.getElementById(&#39;viewer&#39;), loadingImg: null, caption: &#39;&#39;, defaultLat: 0, // 默认纬度角度 defaultLon: Math.PI / 8, // 默认经度角度 time_anim: false, mousewheelCtrl: true, touchmoveTwoFingers: true, navbar: [ &#39;autorotate&#39;, &#39;zoom&#39;, &#39;fullscreen&#39; ], plugins: [], }); }); </script> <style scoped> #viewer { width: 100%; height: calc(100vh - var(--header-height)); } </style> ``` 上述代码片段展示了如何利用 Composition API (`setup`) 和生命周期钩子函数 `onMounted()` 初始化 `PhotoSphereViewer` 实例,并将其绑定到指定 DOM 节点上[^3]。 #### 配置路由 (可选) 如果有需要的话,可以在项目的路由表里加入这个新组建以便于导航访问它。这一步骤取决于具体的应用架构设计需求。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值