UX: stepwise search in panoramax: allow wider FOV when nearby

This commit is contained in:
Pieter Vander Vennet 2025-05-06 01:46:06 +02:00
parent 875b3a3ea8
commit 3f2e48e4aa
4 changed files with 65 additions and 34 deletions

View file

@ -8,7 +8,7 @@ import Constants from "../../Models/Constants"
import { Utils } from "../../Utils"
import { Point } from "geojson"
import { Imgur } from "../ImageProviders/Imgur"
import { Panoramax, PanoramaxXYZ } from "panoramax-js/dist"
import { ImageData, Panoramax, PanoramaxXYZ } from "panoramax-js/dist"
interface ImageFetcher {
/**
@ -181,36 +181,59 @@ class ImagesFromPanoramaxFetcher implements ImageFetcher {
}
}
public async fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
const images = await this._panoramax.search({
place: [lon, lat],
place_distance: this._radius ?? 50,
place_fov_tolerance: 180,
limit: 50,
})
private static convert(imageData: ImageData): P4CPicture {
const [lng, lat] = imageData.geometry.coordinates
return {
pictureUrl: imageData.assets.sd.href,
coordinates: { lng, lat },
return images.map((i) => {
const [lng, lat] = i.geometry.coordinates
return {
pictureUrl: i.assets.sd.href,
coordinates: { lng, lat },
provider: "panoramax",
direction: i.properties["view:azimuth"],
osmTags: {
panoramax: i.id,
},
thumbUrl: i.assets.thumb.href,
date: new Date(i.properties.datetime).getTime(),
license: i.properties["geovisio:license"],
author: i.providers.at(-1).name,
detailsUrl: i.id,
details: {
isSpherical:
i.properties["exif"]["Xmp.GPano.ProjectionType"] === "equirectangular",
},
provider: "panoramax",
direction: imageData.properties["view:azimuth"],
osmTags: {
panoramax: imageData.id
},
thumbUrl: imageData.assets.thumb.href,
date: new Date(imageData.properties.datetime).getTime(),
license: imageData.properties["geovisio:license"],
author: imageData.providers.at(-1).name,
detailsUrl: imageData.id,
details: {
isSpherical:
imageData.properties["exif"]["Xmp.GPano.ProjectionType"] === "equirectangular"
}
})
}
}
public async fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
const radiusSettings = [{
place_fov_tolerance: 180,
radius: 15
}, {
place_fov_tolerance: 180,
radius: 25
}, {
place_fov_tolerance: 90,
radius: 50
}]
const promises: Promise<ImageData[]>[] = []
const maxRadius = this._radius
let prevRadius = 0
for (const radiusSetting of radiusSettings) {
const promise = this._panoramax.search({
place: [lon, lat],
place_distance: [prevRadius, Math.min(maxRadius, radiusSetting.radius)],
place_fov_tolerance: radiusSetting.place_fov_tolerance,
limit: 50
})
promises.push(promise)
prevRadius = radiusSetting.radius
if (radiusSetting.radius >= maxRadius) {
break
}
}
const images = await Promise.all(promises)
return [].concat(...images).map((i) => ImagesFromPanoramaxFetcher.convert(i))
}
}