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 { GeoOperations } from "../../Logic/GeoOperations"
import { HotspotProperties, PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
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 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(
container: HTMLElement,
imageInfo: Feature<Point, PanoramaView>,
nearbyFeatures?: Feature<Geometry, HotspotProperties>[]
) {
this.imageInfo = imageInfo
this._imageInfo.set(imageInfo)
this.viewer = pannellum.viewer(container, <any>{
default: {
firstScene: imageInfo.properties.url,
@ -31,16 +39,17 @@ export class PhotoSphereViewerWrapper {
compass: true,
showControls: false,
northOffset: imageInfo.properties.northOffset,
horizonPitch: imageInfo.properties.pitchOffset,
horizonPitch: imageInfo.properties.pitchOffset
},
},
})
this.setNearbyFeatures(nearbyFeatures)
}
public calculatePitch(feature: Feature): number {
const coors = this.imageInfo.geometry.coordinates
const coors = this.imageInfo.data.geometry.coordinates
const distance = GeoOperations.distanceBetween(
coors,
GeoOperations.centerpointCoordinates(feature)
@ -72,7 +81,6 @@ export class PhotoSphereViewerWrapper {
return
}
this.clearHotspots()
this.imageInfo = imageInfo
this.viewer.addScene(imageInfo.properties.url, <any>{
panorama: imageInfo.properties.url,
northOffset: imageInfo.properties.northOffset,
@ -82,27 +90,29 @@ export class PhotoSphereViewerWrapper {
this.viewer.loadScene(imageInfo.properties.url, 0, imageInfo.properties.northOffset)
this.setNearbyFeatures(this.nearbyFeatures)
this._imageInfo.set(imageInfo)
}
private clearHotspots() {
const hotspots =
this.viewer.getConfig()["scenes"][this.imageInfo.properties.url].hotSpots ?? []
const currentUrl = this.imageInfo.data.properties.url
const hotspots = this.viewer.getConfig()["scenes"][currentUrl].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>[]) {
const imageInfo = this.imageInfo
const imageInfo = this.imageInfo.data
if (!this.imageInfo) {
return
}
const northOffs = imageInfo.properties.northOffset
this.nearbyFeatures = nearbyFeatures
this.clearHotspots()
const centralImageLocation = this.imageInfo.geometry.coordinates
const centralImageLocation = imageInfo.geometry.coordinates
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
}
const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f))
@ -128,7 +138,7 @@ export class PhotoSphereViewerWrapper {
this.setPanorama(f.properties.gotoPanorama)
},
},
this.imageInfo.properties.url
imageInfo.properties.url
)
if (f.properties.focus) {
this.viewer.setYaw(yaw - northOffs)