uniapp中使用PhotoSphereViewer全景图 vue.js

近期有个项目要用到全景图，就开始研究做了一个demo，每次使用一个新东西，迎接的都是挑战
本案例是在uniapp中引入全景图,插入markers节点：
1. 下载依赖包

npm install photo-sphere-viewer

安装之后下载下来的包含 three.jsuevent.jsphoto-sphere-viewer

文章图片

注：可以不用在当前项目下创建node_modules，只需要把用到的文件复制到项目目录下即可
2.uniapp中使用es6引入外部文件
page.vue 中
引入PhotoSphereViewer，MarkersPlugin，GyroscopePlugin,StereoPlugin，最新PhotoSphereViewer中没有MarkersPlugin，GyroscopePlugin,StereoPlugin，使用时需要单独引入，视情况而定
import { Viewer as PhotoSphereViewer } from 'photo-sphere-viewer';
import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
import 'photo-sphere-viewer/dist/plugins/markers.css';
var viewer = new PhotoSphereViewer({
container: ‘container’, //容器
panorama: ‘urls’, //拼合图片路径
size: {
width: '100%',
height: screen.availHeight
},
defaultZoomLvl: 50，
navbar: [
'autorotate', 'zoom', 'download', 'markers', 'markersList','caption', 'fullscreen',
],
plugins: [
// GyroscopePlugin,//根据需要引入
// StereoPlugin,
[MarkersPlugin, {
markers: (function () {
var a = []；
a.push({
id: 'circle',
tooltip: 'A circle of radius 30',
circle: 30,
svgStyle : {
fill: 'rgba(255,255,0,0.3)',
stroke: 'yellow',
strokeWidth: '2px',
},
longitude: -0.5,
latitude : -0.28,
anchor: 'center right',
});

a.push({
id: 'ellipse',
tooltip: 'An ellipse of radius 60/30',
ellipse: [60, 30],
svgStyle : {
fill: 'rgba(255,255,0,0.3)',
stroke: 'yellow',
strokeWidth: '2px',
},
longitude: -0.5,
latitude : -0.28,
anchor: 'center left',
});

return a;
}())
}],
]
})
3.获取MarkersPlugin
const markersPlugin= viewer.getPlugin(MarkersPlugin);

markersPlugin.addMarker({ id: 'new-marker', longitude: '45deg', latitude: '0deg', image: 'assets/pin-red.png', });

markersPlugin.on('select-marker', (e, marker) => { markersPlugin.updateMarker({ id: marker.id, image: 'assets/pin-blue.png' }); });

【uniapp中使用PhotoSphereViewer全景图】4.更多使用还请看官网案例
https://photo-sphere-viewer.js.org
https://github.com/mistic100/Photo-Sphere-Viewer/issues/377
此版本和上一版本变化比较大，没有头绪时可以看下迭代日志