photo-sphere-viewer4 全景图插件应用

应用场景

业务是需要做一个百度全景图类似的功能，看了下百度地图的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 } = data
  console.log('当前节点信息：', fromLink)
  console.log('上一节点经纬度（弧度）：',fromLinkPosition)
  console.log('上一节点信息：', fromNode)
})