vue 配合 photo-sphere-viewer 实现全景图展示

最新推荐文章于 2023-04-17 11:28:24 发布

怕冷的北极熊856

最新推荐文章于 2023-04-17 11:28:24 发布

阅读量473

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_56039168/article/details/128792470

版权

项目中有个新需求展示全景图，也找过了多个插件，还是这个插件简单易懂。

一、下载依赖

npm install photo-sphere-viewer --save

yarn add photo-sphere-viewer

下载好依赖就可以开始使用了

二、使用

<!-- 全景看图 -->
<template>
  <div>
    <div class="PSViewer" ref="psvdbg"></div>
  </div>
</template>

<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";

export default {
  data() {
    return {
      PSV: "",
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    init() {
      let this_ = this;
      this.PSV = new Viewer({
        panorama: 'https://bbs.djicdn.com/data/attachment/forum/201711/12/121252sl9vnanggrvknz22.jpg', // 图片路径
        container: this_.$refs.psvdbg, // 容器
        autorotateDelay: 500,
        navbar: false,//是否展示工具栏
        size: {
          width: "100vw",
          height: "90vh",
        },
      });
    },
 
    
  },
};
</script>
<style lang='scss' scoped>

</style>

复制代码即可开箱使用。