photo-sphere-viewer中文文档

photo-sphere-viewer中文文档

• • 安装插件
  • Configuration 配置项
  • • Standard options 常规配置
    • • container (required)
      • adapter 适配器
      • panorama (required)
      • plugins 插件
      • caption 标题
      • size 全景图宽度高度
      • markers 标注
      • navbar 导航栏
      • minFov
      • maxFov
      • defaultZoomLvl
      • fisheye
      • defaultLong
      • defaultLat
      • longitudeRange
      • latitudeRange
      • autorotateDelay
      • autorotateSpeed
      • autorotateLat
      • lang
      • loadingImg
      • loadingTxt
      • mousewheel
      • mousemove
      • mousewheelCtrlKey
      • captureCursor
      • touchmoveTwoFingers
    • Advanced options 高级选项
    • • sphereCorrection 球面校正
      • moveSpeed
      • zoomSpeed
      • useXmpData
      • panoData 全景数据
      • requestHeaders
      • canvasBackground
      • moveInertia
      • clickEventOnMarker
      • withCredentials
      • keyboard 键盘
  • Viewer Methods方法
  • • 常用方法
    • • 初始化全景图
      • animate(options): Animation
      • destroy()
      • getPosition(): Position
      • getZoomLevel(): number
      • rotate(position)
      • setOption(option, value)
      • setOptions(options)
      • • setPanorama(panorama, options): Promise
      • zoom(level) | zoomIn() | zoomOut()
  • Events 事件
  • • 常用事件
    • • 初始化全景图
      • 全景图点击事件 click(data) | dblclick(data)
    • 全景图位置变化时触发的回调 position-updated(position)
    • • 全景图加载完成时的回调 ready
      • 全景图缩放时的回调 zoom-updated(level)
  • MarkersPlugin 标注插件
  • • 用法
    • 标注定义
    • 标注配置项
    • • id (required)
      • x & y or latitude & longitude (required)
      • width & height (required for images, recommended for html)
      • scale
      • className
      • style
      • svgStyle
      • anchor
      • • visible
      • tooltip
      • content
      • hideList
      • data
    • Configuration
    • • lang
      • hideButton
      • listButton
      • clickEventOnMarker
    • 标注常用方法
    • • 添加标注 addMarker(properties)
      • 清除所有标注 clearMarkers()
      • 获取当前标注 getCurrentMarker(): Marker
      • 前往指定标注 gotoMarker(id, speed): Animation
      • 隐藏/显示 标注 hideMarker(id) | showMarker(id) | toggleMarker(id)
      • removeMarker(id) | removeMarkers(ids)
      • 替换标注 setMarkers(properties[])
      • 更新标注 updateMarker(properties)
    • 标记事件
    • • over-marker(marker) | leave-marker(marker)
      • select-marker(marker, data)
      • unselect-marker(marker)
  • 推荐阅读
  • • Vue源码学习目录
    • 连点成线 - 前端成长之路

勤学如春起之苗，不见其增，日有所长；
辍学如磨刀之石，不见其损，日有所亏。

业务这边想要实现右边链接的效果阿里云付费全景图，类似VR看房，支持360° x 360°任意旋转，支持自定义添加标注，支持切换场景等功能，效果如下

阿里云的全景图需要付费，而且个别功能不满足我们业务需要，那边无法及时调整，所以后面由我们内部自己实现

前端组长这边提供了photo-sphere-viewer相关的文章作为参考

内部基于 photo-sphere-viewer 插件实现效果如下

全景图实现使用了 photo-sphere-viewer 插件，它基于three.js和uEvent 2实现

这边实现主要用了 photo-sphere-viewer和他的标记Markers插件

安装插件

使用 npm 或 yarn 下载安装

npm install photo-sphere-viewer --save

yarn add photo-sphere-viewer 

文章使用的版本"photo-sphere-viewer": "^4.3.0"

使用如下

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

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

this.viewer = new Viewer({
    container:document.querySelector('#viewer'),
    panorama:'https://aupup-mall-pub.oss-cn-shenzhen.aliyuncs.com/public/aa28925e-8ef9-4a2d-9217-e82a86b6ee15.jpg',
    size:{
        width: '100%',
        height: '100%',
    },
    plugins: [
        [MarkersPlugin, {
            markers: [
                {
                    id:'circle',
                    tooltip:'A circle of radius 30',
                    circle:30,
                    svgStyle : {
                        fill:'rgba(255,255,0,0.3)',
                        stroke:'yellow',
                        strokeWidth:'2px',
                    },
                    longitude: -1.5,
                    latitude: -0.28,
                    anchor: 'center right',
                }
            ],
        }],
    ],
});

Configuration 配置项

一个陌生的对象，打断点后，去控制台查看，可以很方便看到对象的属性方法之类的信息

Standard options 常规配置

container (required)

• type: HTMLElement | string

全景图的容器，可以是DOM元素或者DOM的ID

container: document.querySelector('.viewer')

container: 'viewer' // will target [id="viewer"]

adapter 适配器

• default: equirectangular

用于加载全景图的适配器

panorama (required)

• type: *

全景图地址，如果用默认的适配器，只支持传单个

plugins 插件

• type: array

Introduction to plugins
这里只用到标注插件，后面单独介绍

caption 标题

• type: string

导航栏中显示的文本。如果导航栏被禁用，它无论如何都会显示，但没有按钮。允许使用 HTML

size 全景图宽度高度

• type: { width: integer, height: integer }

全景容器的最终尺寸。默认情况下使用容器的大小，并在窗口调整大小期间遵循

markers 标注

标注的配置

navbar 导航栏

导航栏的配置

minF