パノラマ写真

vueでphoto-sphere-viewerを使用する



Use Photo Sphere Viewer Vue



公式サイト： フォトスフィアビューアー

  • photo-sphere-viewerの依存関係をインストールします
npm install photo-sphere-viewer --save-dev
  • 使用する必要のあるページにファイルをインポートする
import PhotoSphereViewer from 'photo-sphere-viewer' import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

そうすれば普通に使えます



<div :id='photosphere' class='photosphere'></div> import PhotoSphereViewer from 'photo-sphere-viewer' import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' data() { return { panoramadata: null, nextPano: {}, loading_img: require('../../static/pano/assets/photosphere-logo.gif'), photosphere: 'photosphere', imageLoaded: false, } },

表示

showPhoto() { let that = this this.displayPanoramadata = true // this.panoramadata this.panoramadata = PhotoSphereViewer({ container: this.photosphere, panorama: this.nextPano.url, caption: this.nextPano.desc, //description loading_img: this.loading_img, // The default value is null, the path of the picture displayed during loading. // longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], // Optional, the longitude value passed by each pixel when moving. latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4], // Optional, the latitude value passed by each pixel when moving. anim_speed: '-2rpm', autoload: true, // Optional, the default value is true, true is to automatically call the panorama, false is to load the panorama later (via the .load () method) fisheye: true, move_speed: 1.1, time_anim: false, // How many milliseconds to play automatically size: { width: '100%', height: '100%', }, navbar: false, // The following navigation bar is not displayed // navbar: [ // 'autorotate', 'zoom', 'download', 'markers', // ], markers: (function() { let a = that.nextPano.nodes return a }()) }) },

パノラマでマーカーを選択します。



this.panoramadata.on('select-marker', function(marker, dblclick) { //marker })

IOSでのハンドオーバーの失敗を防ぐため

swichPhoto(url) { let that = this let photosphere = document.getElementById('photosphere') if (this.panoramadata) { photosphere.style.opacity = 0 this.imageLoaded = false this.panoramadata.setCaption(this.nextPano.desc) this.panoramadata.setPanorama(url, true, true).then(() => { this.imageLoaded = true photosphere.style.opacity = 1 console.log('------- Complete replacement picture --------') }) } else { this.showPhoto() } },

削除マーカーを追加

if(this.panoramadata.hud.markers) { // Determine whether the current panorama has a mark: this.panoramadata.hud.clearMarkers() } for(let i = 0 i < this.nextPano.nodes.length i+=1) { let node = this.nextPano.nodes[i] this.panoramadata.addMarker(node) }