应用场景

业务是需要做一个百度全景图类似的功能，看了下百度地图的api，发现只能调用百度自己的图片，不能使用自己的图。因此找了photo-sphere-viewer来实现功能，版本是4.8.1。具体效果图如下（图片中十字线是另外地方用的，插件本身并没有）：

先安装

npm install photo-sphere-viewer@4.8.1 -S

实现步骤

import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

import 'photo-sphere-viewer/dist/plugins/markers.css'

import 'photo-sphere-viewer/dist/plugins/gallery.css'

import 'photo-sphere-viewer/dist/plugins/virtual-tour.css'

import { Viewer } from 'photo-sphere-viewer'

// 这里只用到了标签插件/图库插件/虚拟漫游插件这三个插件，如果用陀螺仪插件的话域名必须是https的。

import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers';

import { GalleryPlugin } from 'photo-sphere-viewer/dist/plugins/gallery';

import { VirtualTourPlugin } from 'photo-sphere-viewer/dist/plugins/virtual-tour';

因为用的vue，所以定义都放外面了，没有放data里面。

let PSV = null

let markersPlugin = null

let galleryPlugin = null

let virtualTourPlugin = null

具体代码如下

PSV = new Viewer({container: document.getElementById("viewer"),navbar: [ // 底部导航栏，依次是自动播放、缩放、图库、文字、全屏'autorotate','zoom','gallery','caption','fullscreen',],lang: { // 鼠标移到导航栏显示的文字说明autorotate: '自动旋转',zoom      : '缩放',zoomOut   : '缩小',zoomIn    : '放大',gallery   : '图库',fullscreen: '全屏'},plugins: [ // 用到的插件需要在这里提前写入[MarkersPlugin, {// markers: arr}],[GalleryPlugin, {// visibleOnLoad: true,}],[VirtualTourPlugin, {positionMode: VirtualTourPlugin.MODE_GPS,renderMode  : VirtualTourPlugin.MODE_3D,}]]
})
// 标记
markersPlugin = PSV.getPlugin(MarkersPlugin); // 所有插件用到的时候都需要提前获取
// 标记的事件用on直接写，具体有哪些可以查官网https://photo-sphere-viewer-4.netlify.app/
markersPlugin.on('select-marker', function(e) { console.log('psv-marker:', e)
});// 图库
const galleryPlugin = PSV.getPlugin(GalleryPlugin);
// 图库的setItems方法用来设置图库的全景和全景缩略图
galleryPlugin.setItems([{id: 'sphere1',panorama : _this.baseUrl + 'demo1.jpg',thumbnail: _this.baseUrl + 'demo1-thumb.jpg', // 缩略图options  : {caption: 'Test <b>html1</b>', // 这里可以直接写html},}
])
// 漫游
virtualTourPlugin = PSV.getPlugin(VirtualTourPlugin);
let arrowStyle = { // 自定义箭头颜色，但没办法改箭头的图案，就很不人性化color       : 0xffffff,hoverColor  : 0xaa5500,outlineColor: 0x7fdcdcdc,// scale       : [1, 4],
}
virtualTourPlugin.setNodes([{    id: '1',panorama: _this.baseUrl + 'demo1.jpg',// 全景图thumbnail: _this.baseUrl + 'demo1-thumb.jpg', // 图库插件的缩略图name: 'One', // 图库和箭头显示的文字links: [{ nodeId: '2', arrowStyle }, // 需要展示的全景图id],markers: [ // 全景中需要添加的标记{id: 'marker-1',image: _this.baseUrl + 'point.png',tooltip: 'Cape Florida Light, Key Biscayne',width    : 56,height   : 80,anchor   : 'bottom center',longitude: '105deg',latitude: '35deg',}],position: [120.090258, 30.322021, 3], // GPS/WGS84经纬度，+高程（可不填）panoData: {poseHeading: 270, // 0 to 360，水平视角posePitch: 0, // -90 to 90，竖直方向的角度poseRoll: 0, // -180 to 180}},{id: '2',panorama: _this.baseUrl + 'demo2.jpg',// 全景图thumbnail: _this.baseUrl + 'demo2-thumb.jpg', // 图库插件的缩略图name: 'two',links: [ // 点击箭头后需要展示的全景图，{ nodeId: '1', arrowStyle }, // 有来有回，节点1中展示2，那节点2中必须有1，这里的nodeId应对节点的id],position: [120.089913, 30.321986, 3]}
]
// 切换后的回调
virtualTourPlugin.on('node-changed', (e, nodeId, data) => {const { fromLink, fromLinkPosition, fromNode } = dataconsole.log('当前节点信息：', fromLink)console.log('上一节点经纬度（弧度）：',fromLinkPosition)console.log('上一节点信息：', fromNode)
})