Vue实现3D全景图，photo-sphere-viewer_vue 全景图

文档里面讲的很详细很清楚 ===>>> 传送门

安装依赖

npm install photo-sphere-viewer
1

新建vue组件

<template>
  <div id="viewer"></div>
</template>
1
2
3

引用

import {Viewer} from 'photo-sphere-viewer' // 引入组件
1

初始化实例

import MapImage from '../assets/images/a.jpeg' // 引入图片
import TentImage from '../assets/images/tent.png' // 引入图片

export default {
	mounted() {
		this.viewer = new Viewer({
			container:document.querySelector('#viewer'),
			// 全景图片，也支持多种适配器，默认 全景图
			panorama: panorama，
			// 这里定义展示视图的大小，也可以通过CSS在样式中定义
	        size:{
		        width: '90vw',
		        height: '90vh',
	        },
	        touchmoveTwoFingers: true
		})
	}
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

添加标记

• 在全景图上添加标记进行交互

import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' // 引入样式

this.viewer = new Viewer({
      // （必需的） 将包含全景图或元素标识符的 HTML 元素
      container:document.querySelector('#viewer'),
      // （必需的） 全景路径。必须是默认 equirectangular 适配器的单个 URL。其他适配器支持其他值。
      // photo-sphere-viewer支持多种适配器，这里讲到的是默认的 equirectangular 适配器，使用起来最为简单，但是要求图片必须为全景图
      panorama: PanoramaImage,
      // 这里定义展示视图的大小，也可以通过CSS在样式中定义
      size:{
        width: '90vw',
        height: '90vh',
      },
      touchmoveTwoFingers: true,
      plugins: [
        [MarkersPlugin, {
          markers: [
            {
              id        : '1',
              imageLayer: TentImage,
              width     : 120,
              height    : 94,
              longitude : -0.45,
              latitude  : -0.1,
              tooltip   : 'test-1',
              content   : '<div class="tooltip-content"><h3>test-1</h3><p>描述</p></div>',
            },
            {
              id        : '2',
              imageLayer: TentImage,
              width     : 120,
              height    : 94,
              longitude : 1,
              latitude  : 0,
              tooltip   : 'test-2',
              content: '<div class="tooltip-content"><h3>test-2</h3><p>描述</p></div>',
            },

            {
              // polyline marker
              id: 'polyline',
              polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],
              svgStyle: {
                stroke: 'rgba(140, 190, 10, 0.8)',
                strokeLinecap: 'round',
                strokeLinejoin: 'round',
                strokeWidth: '10px'
              },
              tooltip: 'A dynamic polyline marker',
              content: '<div class="tooltip-content"><h3>旅游路线</h3><p>描述</p></div>'
            },
            {
              // polygon marker
              id: 'polygon',
              polylineRad: [
                [5.998, 0.232],
                [6.582, 0.232],
                [6.582, -0.182],
                [5.998, -0.182],
                [5.998, 0.232],
              ],
              svgStyle: {
                fill: 'rgba(200, 0, 0, 0.2)',
                stroke: 'rgba(200, 0, 50, 0.8)',
                strokeWidth: '4px'
              },
              tooltip: {
                content: '电视机',
                position: 'right bottom'
              },
              content: '<div class="tooltip-content"><h3>电视机</h3><p>描述</p></div>',
            },

          ]
        }]
      ]
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

给标记添加选择事件

  const markersPlugin = this.viewer.getPlugin(MarkersPlugin);

  markersPlugin.on('select-marker', (e, marker) => {
     console.log("select-marker", marker);
     // markersPlugin.updateMarker({
     //   id: marker.id,
     //   content: '123123123123123123'
     // });
   });
   console.log("this.viewer", this.viewer)
1
2
3
4
5
6
7
8
9
10

版本

nuxt: ^2.15.8
photo-sphere-viewer: ^4.6.4
vue: ^2.6.14
1
2
3