MapComplete/src/UI/Image/photoSphereViewerWrapper.ts

67 lines
2 KiB
TypeScript

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
})
}
}
}