115 lines
3.4 KiB
HTML
115 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!-- 传整个数组节点 -->
|
|
|
|
<head>
|
|
<!-- for optimal display on high DPI devices -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<link rel="stylesheet" href="@photo-sphere-viewer/core/index.css" />
|
|
<link rel="stylesheet" href="@photo-sphere-viewer/markers-plugin/index.css" />
|
|
<script src="./three.min.js"></script>
|
|
<script type="module">
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
function setIframe(data, str) {
|
|
load(data, str)
|
|
}
|
|
</script>
|
|
<!-- <script type="module">
|
|
import * as THREE from './three.min.js';
|
|
window.THREE = THREE;
|
|
console.log(THREE)
|
|
</script> -->
|
|
<script src="@photo-sphere-viewer/core/index.js"></script>
|
|
<script src="@photo-sphere-viewer/markers-plugin/index.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<!-- the viewer container must have a defined size -->
|
|
<div id="viewer" style="width: 100vw; height: 100vh;"></div>
|
|
|
|
<script>
|
|
function load(path, str) {
|
|
let url = new URL(path)
|
|
let options = {}
|
|
if (str.length) {
|
|
let obj = JSON.parse(str)
|
|
options.markers = initMarker(obj.neighbors)
|
|
}
|
|
|
|
const viewer = new PhotoSphereViewer.Viewer({
|
|
container: document.querySelector('#viewer'),
|
|
// panorama: "http://localhost:8890/yjearth4.0/api/v1/vr/97ef82188bc7e2d074502c5730e2b3ec.jpg",
|
|
panorama: path,
|
|
plugins: [
|
|
[PhotoSphereViewer.MarkersPlugin, options],
|
|
],
|
|
});
|
|
const markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
|
|
markersPlugin.addEventListener('select-marker', ({ marker }) => {
|
|
let str = marker.config.myPath
|
|
window.marker = marker
|
|
let imgUrl = `${url.origin}/yjearth4.0/api/v1/vr/${str}.jpg`
|
|
let json = `${url.origin}/yjearth4.0/api/v1/vr/${str}.json`
|
|
let markers = undefined
|
|
fetch(json).then(res => {
|
|
if (res.ok) {
|
|
res.json().then(json => {
|
|
markers = initMarker(json.neighbors)
|
|
add(imgUrl, markers)
|
|
})
|
|
} else {
|
|
add(imgUrl)
|
|
}
|
|
})
|
|
});
|
|
function add(imgUrl, markers) {
|
|
viewer.setPanorama(imgUrl, {})
|
|
viewer.animate({
|
|
zoom: 100,
|
|
speed: "-2rpm",
|
|
}).then(() => {
|
|
markersPlugin.clearMarkers()
|
|
if (markers) {
|
|
markersPlugin.setMarkers(markers)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
function initMarker(arr) {
|
|
let markers = []
|
|
for (let i = 0; i < arr.length; i++) {
|
|
const element = arr[i];
|
|
console.log(Math.atan2(Math.sin(element.position.lng), Math.cos(element.position.lat)))
|
|
let obji = {
|
|
id: 'image' + i,
|
|
image: './定位.png',
|
|
tooltip: element.name,
|
|
position: { yaw: element.degree + 'deg', pitch: '1deg' },
|
|
size: { width: 32, height: 32 },
|
|
myPath: element.node_id,
|
|
data: {
|
|
generated: true,
|
|
},
|
|
}
|
|
markers.push(obji)
|
|
}
|
|
return markers
|
|
}
|
|
</script>
|
|
|
|
<body>
|
|
|
|
</body>
|
|
|
|
</html> |