简介
用于显示 Photo Sphere 全景图的 JavaScript 库
为什么选择这个库，可以看这里
官网
使用
直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
html, body, #photosphere {
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8.1.3/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2.0.0/browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.126.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css">
<div id="photosphere"></div>
<script>
new PhotoSphereViewer.Viewer({
panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
container: 'photosphere',
caption: 'Parc national du Mercantour <b>© Damien Sorel</b>',
loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
defaultLat: 0.3,
touchmoveTwoFingers: true,
mousewheelCtrlKey: true,
});
</script>
</body>
</html>
在vue用使用
添加依赖
yarn add photo-sphere-viewer
简单例子
<template>
<div id="viewer">
</div>
</template>
<script>
import {Viewer} from 'photo-sphere-viewer';
export default {
name: 'Home',
mounted() {
const viewer = new Viewer({
container: document.querySelector('#viewer'),
panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
navbar: [
],
});
},
components: {}
}
</script>
<style>
#viewer{
width: 100vw;
height: 70vh;
background: rebeccapurple;
}
</style>
引用插件，添加标记点，点击事件
<template>
<div id="viewer">
</div>
</template>
<script>
import {Viewer} from 'photo-sphere-viewer';
import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers';
import 'photo-sphere-viewer/dist/plugins/markers.css'
import img360 from './360.jpg'
export default {
name: 'Home',
mounted() {
const viewer = new Viewer({
// panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
panorama: img360,
container: 'viewer',
// loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
caption: 'Parc national du Mercantour <b>© Damien Sorel</b>',
defaultLat: 0.3,
plugins: [
[MarkersPlugin, {
// list of markers
markers: [
{
// image marker that opens the panel when clicked
id: 'image',
longitude: 0.32,
latitude: 0.11,
image: 'https://photo-sphere-viewer.js.org/assets/pin-blue.png',
width: 32,
height: 32,
anchor: 'bottom center',
tooltip: 'A image marker. <b>Click me!</b>',
},
{
// html marker with custom style
id: 'text',
longitude: 0,
latitude: 0,
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'
},
tooltip: {
content: 'An HTML marker',
position: 'right'
}
},
{
// polygon marker
id: 'polygon',
polylineRad: [
[6.2208, 0.0906],
[0.0443, 0.1028],
[0.2322, 0.0849],
[0.4531, 0.0387],
[0.5022, -0.0056],
[0.4587, -0.0396],
[0.2520, -0.0453],
[0.0434, -0.0575],
[6.1302, -0.0623],
[6.0094, -0.0169],
[6.0471, 0.0320],
[6.2208, 0.0906],
],
svgStyle: {
fill: 'rgba(200, 0, 0, 0.2)',
stroke: 'rgba(200, 0, 50, 0.8)',
strokeWidth: '2px'
},
tooltip: {
content: 'A dynamic polygon marker',
position: 'right bottom'
}
},
{
// polyline marker
id: 'polyline',
polylinePx: [2478, 1635, 2184, 1747, 1674, 1953, 1166, 1852, 709, 1669, 301, 1519, 94, 1399, 34, 1356],
svgStyle: {
stroke: 'rgba(140, 190, 10, 0.8)',
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeWidth: '10px'
},
tooltip: 'A dynamic polyline marker'
},
{
// circle marker
id: 'circle',
circle: 20,
x: 2500,
y: 1000,
tooltip: 'A circle marker'
}
]
}]
]
});
let markersPlugin = viewer.getPlugin(MarkersPlugin);
/**
* Create a new marker when the user clicks somewhere
*/
viewer.on('click', function (e, data) {
console.log(e)
console.log(data)
if (!data.rightclick) {
markersPlugin.addMarker({
id: '#' + Math.random(),
longitude: data.longitude,
latitude: data.latitude,
image: 'https://photo-sphere-viewer.js.org/assets/pin-red.png',
width: 32,
height: 32,
anchor: 'bottom center',
tooltip: 'Generated pin',
data: {
generated: true
}
});
}
});
/**
* Delete a generated marker when the user double-clicks on it
* Or change the image if the user right-clicks on it
*/
markersPlugin.on('select-marker', function (e, marker, data) {
console.log('点了某一个点')
console.log(marker)
console.log(data)
if (marker.data && marker.data.generated) {
if (data.dblclick) {
// 下面用maker和用id删都可以
// markersPlugin.removeMarker(marker);
markersPlugin.removeMarker(marker.id);
} else if (data.rightclick) {
markersPlugin.updateMarker({
id: marker.id,
image: 'https://photo-sphere-viewer.js.org/assets/pin-blue.png',
});
}
}
});
},
components: {}
}
</script>
<style>
#viewer {
width: 100vw;
height: 70vh;
background: rebeccapurple;
}
</style>
