我的第一个 Photo Sphere Viewer Demo
fancie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.css"/>
<style>
/* the viewer container must have a defined size */
#viewer {
width: 100vw;
height: 50vh;
}
</style>
</head>
<body>
<div id="viewer">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js">
</script><script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/plugins/markers.js"></script>
<script>
(function(){
const goMarkerStyle = {
fill: "rgba(255,255,0,0.3)",
stroke: "#ccc",
strokeWidth: "2px", //边框
};
const tipMarkerStyle = {
fill: "rgba(255,0,0,0.3)",
stroke: "#ccc",
strokeWidth: "2px", //边框
}
var viewer = new PhotoSphereViewer.Viewer({
container: document.querySelector('#viewer'),
// container: 'viewer',
panorama: './imgs/1.jpg',
caption: '我的第一个全景项目',
minFov: 30,
maxFov: 90,
defaultZoomLvl: 50,
panoData: {
fullWidth: 11300,
fullHeight: 5650,
croppedWidth: 12432,
croppedHeight: 3504,
croppedX: 0,
croppedY: 1356,
poseHeading: 0, // 0 to 360
posePitch: 0, // -90 to 90
poseRoll: 0, // -180 to 180
},
navbar: [
'autorotate',
'zoom',
'caption',
'fullscreen'
],
plugins: [
[PhotoSphereViewer.MarkersPlugin, {
markers: [
{
id: "go1", //标记的唯一标识符
tooltip: "去1501", //提示的内容
circle: 30, //直径
svgStyle: goMarkerStyle,
visible: true, //标记的初始可见性。默认true
longitude: -1.5, //位置
latitude: -0.28, //位置
anchor: "center right"
},
{
id: "tip1",
tooltip: "讲解1",
circle: 10,
svgStyle: tipMarkerStyle,
visible: true,
longitude: -1,
latitude: -0.28,
anchor: "center right",
content: "这里是1501前台", //点击标记后侧边列表框显示的内容
},
{
id: "go2",
tooltip: "去1502",
circle: 30,
svgStyle: goMarkerStyle,
longitude: -1.6,
latitude: -0.28,
anchor: "center right",
visible: false,
},
{
id: "tip2",
tooltip: "讲解2",
circle: 10,
svgStyle: tipMarkerStyle,
visible: false,
longitude: -1,
latitude: -0.28,
anchor: "center right",
content: "这里是1502",
},
{
id: "go3",
tooltip: "去1502前台",
circle: 30,
svgStyle: goMarkerStyle,
longitude: -1.6,
latitude: -0.28,
anchor: "center right",
visible: false,
},
],
}],
],
});
const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
markersPlugin.on('select-marker', (e, marker) => {
const markerid = marker.id;
console.log(markerid);
if (markerid == 'go1') {
markersPlugin.hideMarker(markerid);//隐藏点击的marker
markersPlugin.hideMarker('tip1');//隐藏点击的marker
go1501();
}
if (markerid == 'go2') {
markersPlugin.hideMarker(markerid);//隐藏点击的marker
markersPlugin.hideMarker('tip2');//隐藏点击的marker
go1502()
}
if (markerid == 'go3') {
markersPlugin.hideMarker(markerid);//隐藏点击的marker
goFirst();
}
});
function go1501(){
viewer.setPanorama('./imgs/2.jpg',{
panoData: {
fullWidth: 10800,
fullHeight: 5650,
croppedWidth: 12432,
croppedHeight: 3504,
croppedX: 0,
croppedY: 1356,
poseHeading: 0, // 0 to 360
posePitch: 0, // -90 to 90
poseRoll: 0, // -180 to 180
},
}).then(() => {
markersPlugin.showMarker("go2")//显示你需要显示的marker
markersPlugin.showMarker("tip2")//显示你需要显示的marker
})
}
function go1502(){
viewer.setPanorama('./imgs/3.jpg',{
panoData: {
fullWidth: 12100,
fullHeight: 5650,
croppedWidth: 12432,
croppedHeight: 3504,
croppedX: 0,
croppedY: 1356,
poseHeading: 0, // 0 to 360
posePitch: 0, // -90 to 90
poseRoll: 0, // -180 to 180
},
}).then(() => {
markersPlugin.showMarker("go3")//显示你需要显示的marker
})
}
function goFirst(){
viewer.setPanorama('./imgs/1.jpg',{
panoData: {
fullWidth: 11300,
fullHeight: 5650,
croppedWidth: 12432,
croppedHeight: 3504,
croppedX: 0,
croppedY: 1356,
poseHeading: 0, // 0 to 360
posePitch: 0, // -90 to 90
poseRoll: 0, // -180 to 180
},
}).then(() => {
markersPlugin.showMarker("go1")//显示你需要显示的marker
markersPlugin.showMarker("tip1")//显示你需要显示的marker
})
}
})()
</script>
</html>
类似资料：