创建新仓库

2025-07-03 17:39:09 +08:00
commit c781d38c0c
12944 changed files with 807291 additions and 0 deletions
--- a/static/vrHtml/index.html
+++ b/static/vrHtml/index.html
@ -0,0 +1,115 @@
+<!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>