Vue Photo Sphere Viewer 实现场景切换
下载插件使用npm或yarn下载安装npm install photo-sphere-vieweryarn add photo-sphere-viewer直接上代码，附带注释：<template><div id="viewer"></div></template><script>import { Viewer } from "photo-
·
下载插件
使用npm或yarn下载安装
npm install photo-sphere-viewer
yarn add photo-sphere-viewer直接上代码，附带注释：
<template>
<div id="viewer"></div>
</template>
<script>
import { Viewer } from "photo-sphere-viewer";
import MarkersPlugin from "photo-sphere-viewer/dist/plugins/markers"; //Markers插件
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import "photo-sphere-viewer/dist/plugins/markers.css"; //Markers插件
export default {
data() {
return {
viewer: "",
imgurl1: require("../assets/10.jpg"),
imgurl2: require("../assets/2.jpg"),
imgurl3: require("../assets/3.jpg"),
imgurl4: require("../assets/4.jpg"),
};
},
mounted() {
this.viewer = new Viewer({
container: document.querySelector("#viewer"),
panorama: this.imgurl1,
size: {
width: "100vw",
height: "100vh",
},
autorotateLat:0,//
autorotateSpeed:0.20943951023931962,//自传速度
defaultZoomLvl: 0,//默认缩放
defaultLong:0.0027446609001040845,//经度
defaultLat:0.015220228499811306,//维度
autorotateDelay:1,//1毫秒后启动自动旋转
plugins: [
[
MarkersPlugin,
{
markers: [
{
id: "circle1", //标记的唯一标识符
tooltip: "circle1", //提示的内容
circle: 30, //直径
svgStyle: {
fill: "rgba(255,255,0,0.3)",
stroke: "#ccc",
strokeWidth: "2px", //边框
},
visible: true, //标记的初始可见性。默认true
longitude: -1.5, //位置
latitude: -0.28, //位置
anchor: "center right",
// content: "9999999999", //点击标记后侧边列表框显示的内容
// image: 'assets/3.jpg',
// defaultZoomLvl:-30
},
{
id: "circle2", //标记的唯一标识符
tooltip: "circle2", //提示的内容
circle: 30, //直径
svgStyle: {
fill: "rgba(255,255,0,0.3)",
stroke: "red",
strokeWidth: "2px", //边框
},
longitude: -1.6, //位置
latitude: -0.28, //位置
anchor: "center right",
visible: false, //标记的初始可见性。默认true
// image: this.imgurl3,
},
{
id: "circle3",
tooltip: "circle3", //提示的内容
longitude: -1.9, //位置
latitude: -0.28, //位置
rect: { width: 100, height: 100 }, //矩形宽高
svgStyle: {
fill: "rgba(194,29,18,1)",
cursor: "help",
},
visible: false,
},
{
id: "circle4",
tooltip: "circle4", //提示的内容
x: 2058,
y: 1069,
html: "HTML <b>marker</b> ♥",
anchor: "bottom right",
scale: [0.5, 1.5],
style: {
maxWidth: "100px",
color: "white",
fontSize: "20px",
fontFamily: "Helvetica, sans-serif",
textAlign: "center",
},
visible: false,
},
],
},
],
],
});
// 初始化之后，可以使用getPlugin方法获得插件实例，从而允许在插件上调用方法并订阅事件
const markersPlugin = this.viewer.getPlugin(MarkersPlugin);
// 点击事件监听
// this.viewer.on('click', (e, data) => {
// console.log(`${data.rightclick ? 'right clicked' : 'clicked'} at longitude: ${data.longitude} latitude: ${data.latitude}`);
// });
// 监听放大缩小
// this.viewer.on('zoom-updated', (e,level) => {
// console.log(level);
// });
// 启用/禁用自动旋转时触发
this.viewer.on('autorotate', (e,enabled) => {
// enabled:false没有旋转 true：旋转
// console.log(enabled);
// console.log(999);
if(!enabled){
setTimeout(() => {
this.viewer.toggleAutorotate();//开启自动旋转/不旋转
}, 5000);
}
});
// 当所有当前动画停止时触发
// this.viewer.on('stop-all', (e) => {
// enabled:false没有旋转 true：旋转
// console.log(enabled);
// alert(1)
// });
// 当视图经度和/或纬度发生变化时触发。
this.viewer.on('position-updated', (e, position) => {
// 可以获取到当前的经纬度，可以用于测试时获取经纬度
// console.log(`new position is longitude: ${position.longitude} latitude: ${position.latitude}`);
});
// 监听点击marker
markersPlugin.on("select-marker", (e, marker) => {
console.log(marker.id);
const markerid = marker.id;
this.viewer
// 动画
.animate({
longitude: marker.config.longitude,
latitude: marker.config.latitude,
zoom: 100,
speed: "-2rpm",
})
// .then(() =>
// this.viewer.setPanorama(this.imgurl2).then(
// () =>
// markersPlugin.updateMarker({
// id: marker.id,
// longitude: -1.8,
// latitude: -0.28,
// }),
// this.viewer
// .animate({
// zoom: 50,
// speed: "2rpm",
// })
// .then(
// () => (this.imgurl2 = this.imgurl3),
// console.log("继续操作")
// )
// )
// );
.then(() => {
// markersPlugin.clearMarkers()//移除所有markers
// this.viewer.rotate({x: 1500,y: 600,});//改变摄像机的位置
markersPlugin.hideMarker(marker.id);//隐藏点击的marker
// this.viewer.defaultZoomLvl=0
if (markerid == "circle1") {
// setPanorama参数：图片地址、下一个场景的初始经纬度、transition 默认（false）
this.viewer.setPanorama(this.imgurl2,{ longitude: 6.232589417434965, latitude: 0.07016253709436304 }, true).then(() => {
markersPlugin.showMarker("circle2")//显示你需要显示的marker
}
);
console.log(this.viewer.defaultZoomLvl)
}
if (markerid == "circle2") {
this.viewer
.setPanorama(this.imgurl3,{ longitude: 6.113027338614143, latitude:-2.914362084993627e-9 }, true)
.then(() => markersPlugin.showMarker("circle3"));
}
if (markerid == "circle3") {
this.viewer
.setPanorama(this.imgurl4)
.then(() => markersPlugin.showMarker("circle4"));
}
if (markerid == "circle4") {
this.viewer.setPanorama(this.imgurl1)
.then(() => markersPlugin.showMarker("circle1"));
}
this.viewer.zoom(0)//改变缩放
// this.viewer.setOption('defaultLong',100);
// this.viewer.setOption('defaultLat',100);
// this.viewer.toggleAutorotate();//开启自动旋转/不旋转
});
});
},
};
// setPanorama(新全景图文件的网址) :加载新的全景文件,参数
// new position is longitude: 6.232589417434965 latitude: 0.07016253709436304
</script>
参考链接：
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)