Feature: first working version of inspecting 360° images

src/UI/Image/photoSphereViewerWrapper.ts

@@ -0,0 +1,67 @@
+import "pannellum"
+
+import { Feature, Point } from "geojson"
+import { GeoOperations } from "../../Logic/GeoOperations"
+import { PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
+
+
+export class PhotoSphereViewerWrapper {
+
+    private readonly imageInfo: Feature<Point, PanoramaView>
+    private readonly viewer: Pannellum.Viewer
+
+
+    constructor(container: HTMLElement, imageInfo: Feature<Point, PanoramaView>, nearbyFeatures?: Feature[]) {
+        this.imageInfo = imageInfo
+        this.viewer = pannellum.viewer(container, {
+            type: "equirectangular",
+            hfov: 110,
+            panorama: imageInfo.properties.url,
+            autoLoad: true,
+            hotSpots: [],
+            compass: true,
+            showControls: false,
+            northOffset: imageInfo.properties.northOffset,
+            horizonPitch: imageInfo.properties.pitchOffset
+        })
+
+        /* for (let i = 0; i < 360; i += 45) {
+
+             viewer.addHotSpot({
+                 type: "info",
+                 yaw: i,
+                 text: "YAW " + i
+             })
+         }
+
+         console.log("North offset:", imageInfo.properties.northOffset)
+         viewer.addHotSpot({
+             type: "info",
+             yaw: -northOffs,
+             text: "Supposedely north "
+         })*/
+
+        this.setNearbyFeatures(nearbyFeatures)
+    }
+
+    public setNearbyFeatures(nearbyFeatures: Feature[]) {
+        const imageInfo = this.imageInfo
+        const northOffs = imageInfo.properties.northOffset
+
+        const hotspots = this.viewer.getConfig().hotSpots ?? []
+        for (const hotspot of hotspots) {
+            this.viewer.removeHotSpot(hotspot.id)
+        }
+        // this.viewer.removeHotSpot()
+        for (const f of nearbyFeatures ?? []) {
+            const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f))
+            this.viewer.addHotSpot({
+                type: "info",
+                yaw: (yaw - northOffs) % 360,
+                text: f.properties.name
+            })
+        }
+    }
+
+
+}