首页 Web 开发

# 引言

本文使用的是 PhotoSphereViewer 库来实现预览全景图的功能。PhotoSphereViewer 是一个强大的 JavaScript 库，旨在帮助开发者轻松地在 Web 应用中展示全景图像。它支持多种交互功能，如缩放、旋转、标记、截图等，能够提供丰富的用户体验。

# 1. 安装依赖

首先，确保你在项目目录中，使用 npm 安装 PhotoSphereViewer 和自动旋转插件：

npm install @photo-sphere-viewer/core
npm install @photo-sphere-viewer/autorotate-plugin

# 2. 创建 Vue 组件

接下来，创建一个新的 Vue 组件，例如 PhotoSphereViewer.vue ，并在其中实现全景查看功能。

<template>
  <div id="photo-sphere-viewer" style="width: 100%; height: 500px;"></div>
</template>

<script>
import { Viewer } from '@photo-sphere-viewer/core';
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin';

export default {
  name: 'PhotoSphereViewer',
  props: {
    imageUrl: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.initViewer();
  },
  methods: {
    initViewer() {
      this.viewer = new Viewer({
        container: document.getElementById('photo-sphere-viewer'),
        panorama: this.imageUrl, // 这里设置全景图路径
        caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
        navbar: [
          'autorotate',
          'zoom',
          'markers',
          'move',
          'download',
          'fullscreen',
          {
            content: '截图',
            onClick: (viewer) => {
              viewer.addEventListener('render', () => {
                const link = document.createElement('a');
                link.download = 'screenshot.png';
                link.href = viewer.renderer.renderer.domElement.toDataURL();
                link.click();
              }, { once: true });
              viewer.needsUpdate();
            },
          },
        ],
      });

      // 添加自动旋转插件
      this.viewer.addPlugin(new AutorotatePlugin());
      
      // 双击缩放功能
      this.viewer.addEventListener('dblclick', ({ data }) => {
        this.viewer.animate({
          yaw: data.yaw,
          pitch: data.pitch,
          zoom: 100,
          speed: 1000,
        });
      });
    },
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
};
</script>

<style scoped>
#photo-sphere-viewer {
  width: 100%;
  height: 500px;
}
</style>

# 3. 使用组件

在你的主应用或其他组件中使用这个 PhotoSphereViewer 组件，传入全景图的 URL。

<template>
  <div>
    <h1>全景查看器示例</h1>
    <PhotoSphereViewer imageUrl="path/to/your/panorama.jpg" />
  </div>
</template>

<script>
import PhotoSphereViewer from './components/PhotoSphereViewer.vue';

export default {
  components: {
    PhotoSphereViewer,
  },
};
</script>

# 关键功能

  • 全景图展示：通过 panorama 属性设置全景图的 URL。
  • 截图功能：点击截图按钮可以下载当前视图为 PNG 图像。
  • 双击缩放：双击视图可以快速放大到指定位置。
  • 自动旋转插件：便于展示全景图。