uniapp中使用PhotoSphereViewer全景图
近期有个项目要用到全景图，就开始研究做了一个demo，每次使用一个新东西，迎接的都是挑战
本案例是在uniapp中引入全景图,插入markers节点：
1. 下载依赖包
npm install photo-sphere-viewer安装之后下载下来的包含 three.js uevent.js photo-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'
});
});4.更多使用 还请看官网案例
https://photo-sphere-viewer.js.org
https://github.com/mistic100/Photo-Sphere-Viewer/issues/377
此版本和上一版本变化比较大，没有头绪时可以看下迭代日志