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

Feature: first working version of inspecting 360° images

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-03-30 03:10:29 +02:00
parent 7d104b4266
commit 01ba98a820
24 changed files with 330 additions and 436 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Logic/ImageProviders/GenericImageProvider.ts
View file

@ -44,4 +44,8 @@ export default class GenericImageProvider extends ImageProvider {
public DownloadAttribution(_) {
return undefined
}
getPanoramaInfo(image: { id: string }): undefined {
return undefined
}
}

17
src/Logic/ImageProviders/ImageProvider.ts
View file

@ -1,7 +1,8 @@
import { Store, Stores, UIEventSource } from "../UIEventSource"
import { Store, Stores } from "../UIEventSource"
import BaseUIElement from "../../UI/BaseUIElement"
import { LicenseInfo } from "./LicenseInfo"
import { Utils } from "../../Utils"
import { Feature, Point } from "geojson"
export interface ProvidedImage {
url: string
@ -19,6 +20,17 @@ export interface ProvidedImage {
lat?: number
lon?: number
host?: string
isSpherical?: boolean
}
export interface PanoramaView {
url: string,
/**
* 0 - 359
* Degrees in which the picture is taken, with north = 0; going clockwise
*/
northOffset?: number,
pitchOffset?: number
}
export default abstract class ImageProvider {
@ -89,6 +101,8 @@ export default abstract class ImageProvider {
public abstract apiUrls(): string[]
public abstract getPanoramaInfo(image: { id: string }): Promise<Feature<Point, PanoramaView>> | undefined;
public static async offerImageAsDownload(image: ProvidedImage) {
const response = await fetch(image.url_hd ?? image.url)
const blob = await response.blob()
@ -96,4 +110,5 @@ export default abstract class ImageProvider {
mimetype: "image/jpg",
})
}
}

4
src/Logic/ImageProviders/Imgur.ts
View file

@ -116,4 +116,8 @@ export class Imgur extends ImageProvider {
return license
}
getPanoramaInfo(image: { id: string }): undefined {
return undefined
}
}

44
src/Logic/ImageProviders/Mapillary.ts
View file

@ -1,10 +1,11 @@
import ImageProvider, { ProvidedImage } from "./ImageProvider"
import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
import BaseUIElement from "../../UI/BaseUIElement"
import { Utils } from "../../Utils"
import { LicenseInfo } from "./LicenseInfo"
import Constants from "../../Models/Constants"
import SvelteUIElement from "../../UI/Base/SvelteUIElement"
import MapillaryIcon from "./MapillaryIcon.svelte"
import { Feature, Point } from "geojson"
export class Mapillary extends ImageProvider {
public static readonly singleton = new Mapillary()
@ -16,7 +17,7 @@ export class Mapillary extends ImageProvider {
"http://mapillary.com",
"https://mapillary.com",
"http://www.mapillary.com",
"https://www.mapillary.com",
"https://www.mapillary.com"
]
defaultKeyPrefixes = ["mapillary", "image"]
@ -69,7 +70,7 @@ export class Mapillary extends ImageProvider {
lat: location?.lat,
lng: location?.lon,
z: location === undefined ? undefined : Math.max((zoom ?? 2) - 1, 1),
pKey,
pKey
}
const baselink = `https://www.mapillary.com/app/?`
const paramsStr = Utils.NoNull(
@ -137,6 +138,41 @@ export class Mapillary extends ImageProvider {
return [img]
}
/**
* Download data necessary for the 360°-viewer
* @param pkey
* @constructor
*/
public async getPanoramaInfo(image: { id: number | string }): Promise<Feature<Point, PanoramaView>> {
const pkey = image.id
const metadataUrl =
"https://graph.mapillary.com/" +
pkey +
"?fields=computed_compass_angle,geometry,is_pano,thumb_2048_url,thumb_original_url&access_token=" +
Constants.mapillary_client_token_v4
const response = await Utils.downloadJsonCached<
{
computed_compass_angle: number,
geometry: Point,
is_pano: boolean,
thumb_2048_url: string,
thumb_original_url: string,
id: string,
}>(metadataUrl, 60 * 60)
return {
type: "Feature",
geometry: response.geometry,
properties: {
url: response.thumb_2048_url,
northOffset: response.computed_compass_angle
}
}
}
public async DownloadAttribution(providedImage: { id: string }): Promise<LicenseInfo> {
const mapillaryId = providedImage.id
const metadataUrl =
@ -182,7 +218,7 @@ export class Mapillary extends ImageProvider {
key,
rotation,
lat: geometry.coordinates[1],
lon: geometry.coordinates[0],
lon: geometry.coordinates[0]
}
}
}

17
src/Logic/ImageProviders/Panoramax.ts
View file

@ -1,7 +1,7 @@
import { ImageUploader } from "./ImageUploader"
import { AuthorizedPanoramax, ImageData, Panoramax, PanoramaxXYZ } from "panoramax-js/dist"
import ExifReader from "exifreader"
import ImageProvider, { ProvidedImage } from "./ImageProvider"
import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
import BaseUIElement from "../../UI/BaseUIElement"
import { LicenseInfo } from "./LicenseInfo"
import { GeoOperations } from "../GeoOperations"
@ -10,6 +10,7 @@ import { Store, Stores, UIEventSource } from "../UIEventSource"
import SvelteUIElement from "../../UI/Base/SvelteUIElement"
import Panoramax_bw from "../../assets/svg/Panoramax_bw.svelte"
import Link from "../../UI/Base/Link"
import { Feature, Point } from "geojson"
export default class PanoramaxImageProvider extends ImageProvider {
public static readonly singleton: PanoramaxImageProvider = new PanoramaxImageProvider()
@ -187,6 +188,20 @@ export default class PanoramaxImageProvider extends ImageProvider {
}
return new Panoramax(host)
}
public async getPanoramaInfo(image: { id: string }): Promise<Feature<Point, PanoramaView>> | undefined {
const imageInfo = await PanoramaxImageProvider.xyz.imageInfo(image.id)
const url = (imageInfo.assets.sd ?? imageInfo.assets.thumb ?? imageInfo.assets.hd).href
const northOffset = imageInfo.properties["view:azimuth"]
const pitchOffset = Number(imageInfo.properties.exif["Xmp.GPano.PosePitchDegrees"])
return <Feature<Point, PanoramaView>>{
type: "Feature",
geometry: imageInfo.geometry,
properties: {
url, northOffset, pitchOffset
}
}
}
}
export class PanoramaxUploader implements ImageUploader {

48
src/Logic/State/UserSettingsMetaTagging.ts
View file

@ -1,42 +1,14 @@
import { Utils } from "../../Utils"
/** This code is autogenerated - do not edit. Edit ./assets/layers/usersettings/usersettings.json instead */
export class ThemeMetaTagging {
public static readonly themeName = "usersettings"
public static readonly themeName = "usersettings"
public metaTaggging_for_usersettings(feat: { properties: Record<string, string> }) {
Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_md", () =>
feat.properties._description
.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)
?.at(1)
)
Utils.AddLazyProperty(
feat.properties,
"_d",
() => feat.properties._description?.replace(/&lt;/g, "<")?.replace(/&gt;/g, ">") ?? ""
)
Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_a", () =>
((feat) => {
const e = document.createElement("div")
e.innerHTML = feat.properties._d
return Array.from(e.getElementsByTagName("a")).filter(
(a) => a.href.match(/mastodon|en.osm.town/) !== null
)[0]?.href
})(feat)
)
Utils.AddLazyProperty(feat.properties, "_mastodon_link", () =>
((feat) => {
const e = document.createElement("div")
e.innerHTML = feat.properties._d
return Array.from(e.getElementsByTagName("a")).filter(
(a) => a.getAttribute("rel")?.indexOf("me") >= 0
)[0]?.href
})(feat)
)
Utils.AddLazyProperty(
feat.properties,
"_mastodon_candidate",
() => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a
)
feat.properties["__current_backgroun"] = "initial_value"
}
}
public metaTaggging_for_usersettings(feat: {properties: Record<string, string>}) {
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_md', () => feat.properties._description.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)?.at(1) )
Utils.AddLazyProperty(feat.properties, '_d', () => feat.properties._description?.replace(/&lt;/g,'<')?.replace(/&gt;/g,'>') ?? '' )
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_a', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href }) (feat) )
Utils.AddLazyProperty(feat.properties, '_mastodon_link', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.getAttribute("rel")?.indexOf('me') >= 0)[0]?.href})(feat) )
Utils.AddLazyProperty(feat.properties, '_mastodon_candidate', () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a )
feat.properties['__current_backgroun'] = 'initial_value'
}
}

120
src/Logic/Web/NearbyImagesSearch.ts
View file

@ -7,8 +7,6 @@ import { BBox } from "../BBox"
import Constants from "../../Models/Constants"
import { Utils } from "../../Utils"
import { Point } from "geojson"
import MvtSource from "../FeatureSource/Sources/MvtSource"
import AllImageProviders from "../ImageProviders/AllImageProviders"
import { Imgur } from "../ImageProviders/Imgur"
import { Panoramax, PanoramaxXYZ } from "panoramax-js/dist"
@ -211,111 +209,6 @@ class ImagesFromPanoramaxFetcher implements ImageFetcher {
}
}
class ImagesFromCacheServerFetcher implements ImageFetcher {
private readonly _searchRadius: number
public readonly name = "fromCacheServer"
private readonly _serverUrl: string
constructor(searchRadius: number = 500, serverUrl: string = Constants.VectorTileServer) {
this._searchRadius = searchRadius
this._serverUrl = serverUrl
}
async fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
return (
await Promise.all([
this.fetchImagesForType(lat, lon, "lines"),
this.fetchImagesForType(lat, lon, "pois"),
this.fetchImagesForType(lat, lon, "polygons"),
])
).flatMap((x) => x)
}
async fetchImagesForType(
targetlat: number,
targetlon: number,
type: "lines" | "pois" | "polygons"
): Promise<P4CPicture[]> {
const { x, y, z } = Tiles.embedded_tile(targetlat, targetlon, 14)
const url = this._serverUrl
async function getFeatures(x: number, y: number) {
const src = new MvtSource(
Utils.SubstituteKeys(url, {
type,
x,
y,
z,
layer: "item_with_image",
}),
x,
y,
z
)
await src.updateAsync()
return src.features.data
}
const features = (
await Promise.all([
getFeatures(x, y),
getFeatures(x, y + 1),
getFeatures(x, y - 1),
getFeatures(x + 1, y + 1),
getFeatures(x + 1, y),
getFeatures(x + 1, y - 1),
getFeatures(x - 1, y - 1),
getFeatures(x - 1, y),
getFeatures(x - 1, y + 1),
])
).flatMap((x) => x)
const pics: P4CPicture[] = []
for (const f of features) {
const [lng, lat] = GeoOperations.centerpointCoordinates(f)
if (
GeoOperations.distanceBetween([targetlon, targetlat], [lng, lat]) >
this._searchRadius
) {
return []
}
for (let i = -1; i < 50; i++) {
let key = "image"
if (i >= 0) {
key += ":" + i
}
const v = f.properties[key]
console.log(v)
if (!v) {
continue
}
let provider = "unkown"
try {
provider = (await AllImageProviders.selectBestProvider("image", v))?.name
} catch (e) {
console.error("Could not detect provider for", "image", v)
}
pics.push({
pictureUrl: v,
coordinates: { lat, lng },
details: {
isSpherical: false,
},
osmTags: {
image: v,
},
thumbUrl: v,
provider,
})
}
}
return pics
}
}
class MapillaryFetcher implements ImageFetcher {
public readonly name = "mapillary_new"
private readonly _panoramas: "only" | "no" | undefined
@ -390,7 +283,7 @@ class MapillaryFetcher implements ImageFetcher {
mapillary: img.id,
},
details: {
isSpherical: img.is_pano,
isSpherical: this._panoramas === "only"
},
})
}
@ -407,15 +300,20 @@ export class CombinedFetcher {
constructor(radius: number, maxage: Date, indexedFeatures: IndexedFeatureSource) {
this.sources = [
new ImagesInLoadedDataFetcher(indexedFeatures, radius),
new ImagesFromCacheServerFetcher(radius),
new ImagesFromPanoramaxFetcher(),
new ImagesFromPanoramaxFetcher(Constants.panoramax.url),
// For mapillary, we need to query both with and without panoramas. See https://www.mapillary.com/developer/api-documentation/
new MapillaryFetcher({
max_images: 25,
start_captured_at: maxage,
panoramas: "only"
}),
new P4CImageFetcher("mapillary"),
new P4CImageFetcher("wikicommons"),
new MapillaryFetcher({
max_images: 25,
start_captured_at: maxage,
panoramas: "no"
}), new P4CImageFetcher("mapillary"),
new P4CImageFetcher("wikicommons")
].map((f) => new CachedFetcher(f))
}