![](https://img-blog.csdnimg.cn/direct/0c36bc90a6584acb846d4b430f6c9272.png)
实现效果如上,在输入框输入网址点击搜索即可在线显示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>