ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Feature: photoSphereViewer exports the currently seen image

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-06-05 11:38:29 +02:00
parent 9725e98e6f
commit 236d4d87da
1 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/UI/Image/photoSphereViewerWrapper.ts
View file

@ -3,18 +3,26 @@ import "pannellum"
import { Feature, Geometry, Point } from "geojson" import { Feature, Geometry, Point } from "geojson"
import { GeoOperations } from "../../Logic/GeoOperations" import { GeoOperations } from "../../Logic/GeoOperations"
import { HotspotProperties, PanoramaView } from "../../Logic/ImageProviders/ImageProvider" import { HotspotProperties, PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
export class PhotoSphereViewerWrapper { export class PhotoSphereViewerWrapper {
private imageInfo: Feature<Point, PanoramaView> private _imageInfo: UIEventSource<NonNullable<Feature<Point, PanoramaView>>> = new UIEventSource(undefined)
public imageInfo: Store<NonNullable<Feature<Point, PanoramaView>>> = this._imageInfo
private readonly viewer: Pannellum.Viewer private readonly viewer: Pannellum.Viewer
private nearbyFeatures: Feature<Geometry, HotspotProperties>[] = [] private nearbyFeatures: Feature<Geometry, HotspotProperties>[] = []
/**
*
* @param container The HTML-element to bind to
* @param imageInfo An eventSource containing the panorama-info. Might be changed by this component if walking around;
* @param nearbyFeatures Nearby features to show a point about, e.g. to walk around
*/
constructor( constructor(
container: HTMLElement, container: HTMLElement,
imageInfo: Feature<Point, PanoramaView>, imageInfo: Feature<Point, PanoramaView>,
nearbyFeatures?: Feature<Geometry, HotspotProperties>[] nearbyFeatures?: Feature<Geometry, HotspotProperties>[]
) { ) {
this.imageInfo = imageInfo this._imageInfo.set(imageInfo)
this.viewer = pannellum.viewer(container, <any>{ this.viewer = pannellum.viewer(container, <any>{
default: { default: {
firstScene: imageInfo.properties.url, firstScene: imageInfo.properties.url,
@ -31,16 +39,17 @@ export class PhotoSphereViewerWrapper {
compass: true, compass: true,
showControls: false, showControls: false,
northOffset: imageInfo.properties.northOffset, northOffset: imageInfo.properties.northOffset,
horizonPitch: imageInfo.properties.pitchOffset, horizonPitch: imageInfo.properties.pitchOffset
}, },
}, },
}) })
this.setNearbyFeatures(nearbyFeatures) this.setNearbyFeatures(nearbyFeatures)
} }
public calculatePitch(feature: Feature): number { public calculatePitch(feature: Feature): number {
const coors = this.imageInfo.geometry.coordinates const coors = this.imageInfo.data.geometry.coordinates
const distance = GeoOperations.distanceBetween( const distance = GeoOperations.distanceBetween(
coors, coors,
GeoOperations.centerpointCoordinates(feature) GeoOperations.centerpointCoordinates(feature)
@ -72,7 +81,6 @@ export class PhotoSphereViewerWrapper {
return return
} }
this.clearHotspots() this.clearHotspots()
this.imageInfo = imageInfo
this.viewer.addScene(imageInfo.properties.url, <any>{ this.viewer.addScene(imageInfo.properties.url, <any>{
panorama: imageInfo.properties.url, panorama: imageInfo.properties.url,
northOffset: imageInfo.properties.northOffset, northOffset: imageInfo.properties.northOffset,
@ -82,27 +90,29 @@ export class PhotoSphereViewerWrapper {
this.viewer.loadScene(imageInfo.properties.url, 0, imageInfo.properties.northOffset) this.viewer.loadScene(imageInfo.properties.url, 0, imageInfo.properties.northOffset)
this.setNearbyFeatures(this.nearbyFeatures) this.setNearbyFeatures(this.nearbyFeatures)
this._imageInfo.set(imageInfo)
} }
private clearHotspots() { private clearHotspots() {
const hotspots = const currentUrl = this.imageInfo.data.properties.url
this.viewer.getConfig()["scenes"][this.imageInfo.properties.url].hotSpots ?? [] const hotspots = this.viewer.getConfig()["scenes"][currentUrl].hotSpots ?? []
for (const hotspot of hotspots) { for (const hotspot of hotspots) {
this.viewer.removeHotSpot(hotspot?.id, this.imageInfo.properties.url) this.viewer.removeHotSpot(hotspot?.id, currentUrl)
} }
} }
public setNearbyFeatures(nearbyFeatures: Feature<Geometry, HotspotProperties>[]) { public setNearbyFeatures(nearbyFeatures: Feature<Geometry, HotspotProperties>[]) {
const imageInfo = this.imageInfo const imageInfo = this.imageInfo.data
if (!this.imageInfo) { if (!this.imageInfo) {
return return
} }
const northOffs = imageInfo.properties.northOffset const northOffs = imageInfo.properties.northOffset
this.nearbyFeatures = nearbyFeatures this.nearbyFeatures = nearbyFeatures
this.clearHotspots() this.clearHotspots()
const centralImageLocation = this.imageInfo.geometry.coordinates const centralImageLocation = imageInfo.geometry.coordinates
for (const f of nearbyFeatures ?? []) { for (const f of nearbyFeatures ?? []) {
if (f.properties.gotoPanorama?.properties?.url === this.imageInfo.properties.url) { if (f.properties.gotoPanorama?.properties?.url === imageInfo.properties.url) {
continue // This is the current panorama, no need to show it continue // This is the current panorama, no need to show it
} }
const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f)) const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f))
@ -128,7 +138,7 @@ export class PhotoSphereViewerWrapper {
this.setPanorama(f.properties.gotoPanorama) this.setPanorama(f.properties.gotoPanorama)
}, },
}, },
this.imageInfo.properties.url imageInfo.properties.url
) )
if (f.properties.focus) { if (f.properties.focus) {
this.viewer.setYaw(yaw - northOffs) this.viewer.setYaw(yaw - northOffs)