elgaard/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

7
src/UI/Image/AttributedImage.svelte
View file

@ -3,6 +3,8 @@
* Shows an image with attribution
*/
import ImageAttribution from "./ImageAttribution.svelte"
import { Store } from "../../Logic/UIEventSource"
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
import { UIEventSource } from "../../Logic/UIEventSource"
@ -32,6 +34,8 @@
export let attributionFormat: "minimal" | "medium" | "large" = "medium"
let previewedImage: UIEventSource<Partial<ProvidedImage>> = MenuState.previewedImage
export let canZoom = previewedImage !== undefined
export let nearbyFeatures: Feature[] | Store<Feature[]> = []
let loaded = false
let showBigPreview = new UIEventSource(false)
onDestroy(
@ -74,9 +78,8 @@
</script>
<Popup shown={showBigPreview} bodyPadding="p-0" dismissable={true}>
<div slot="close" />
<div style="height: 80vh">
<ImageOperations {image}>
<ImageOperations {image} {nearbyFeatures}>
<slot name="preview-action" />
<slot name="dot-menu-actions" slot="dot-menu-actions" />
</ImageOperations>

5
src/UI/Image/ImageOperations.svelte
View file

@ -14,9 +14,12 @@
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
import DotMenu from "../Base/DotMenu.svelte"
import type { Feature } from "geojson"
import { Store } from "../../Logic/UIEventSource"
export let image: Partial<ProvidedImage> & { id: string; url: string }
export let clss: string = undefined
export let nearbyFeatures: Feature[] | Store<Feature[]> = []
let isLoaded = new UIEventSource(false)
</script>
@ -28,7 +31,7 @@
<Loading />
</div>
{/if}
<ImagePreview {image} {isLoaded} />
<ImagePreview {image} {isLoaded} {nearbyFeatures} />
</div>
<DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>

52
src/UI/Image/ImagePreview.svelte
View file

@ -6,23 +6,50 @@
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import { UIEventSource } from "../../Logic/UIEventSource"
import Zoomcontrol from "../Zoomcontrol"
import { onDestroy } from "svelte"
import { getContext, onDestroy } from "svelte"
import type { PanoramaView } from "./photoSphereViewerWrapper"
import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
import type { Feature, Point } from "geojson"
import { Store } from "../../Logic/UIEventSource"
export let nearbyFeatures: Feature[] | Store<Feature[]> = []
export let image: Partial<ProvidedImage>
let panzoomInstance = undefined
let panzoomEl: HTMLElement
let viewerEl: HTMLElement
export let isLoaded: UIEventSource<boolean> = undefined
onDestroy(Zoomcontrol.createLock())
async function initPhotosphere() {
let f: Feature<Point, PanoramaView> = await image.provider.getPanoramaInfo(image)
const viewer = new PhotoSphereViewerWrapper(viewerEl, f)
if (Array.isArray(nearbyFeatures)) {
viewer.setNearbyFeatures(nearbyFeatures)
} else {
nearbyFeatures.addCallbackAndRunD(feats => {
viewer.setNearbyFeatures(feats)
})
}
isLoaded.set(true)
}
$: {
if (panzoomEl) {
if (image.isSpherical) {
initPhotosphere()
} else if (panzoomEl) {
panzoomInstance = panzoom(panzoomEl, {
bounds: true,
boundsPadding: 0.49,
minZoom: 0.1,
maxZoom: 25,
initialZoom: 1.0,
initialZoom: 1.0
})
} else {
panzoomInstance?.dispose()
@ -30,11 +57,18 @@
}
</script>
<img
bind:this={panzoomEl}
class="panzoom-image h-fit max-w-fit"
on:load={() => {
<head>
<link rel="stylesheet" href="./node_modules/pannellum/build/pannellum.css">
</head>
{#if image.isSpherical}
<div bind:this={viewerEl} class="w-full h-full" />
{:else}
<img
bind:this={panzoomEl}
class="panzoom-image h-fit max-w-fit"
on:load={() => {
isLoaded?.setData(true)
}}
src={image.url_hd ?? image.url}
/>
src={image.url_hd ?? image.url}
/>
{/if}

7
src/UI/Image/LinkableImage.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import { UIEventSource } from "../../Logic/UIEventSource"
import type { Store } from "../../Logic/UIEventSource"
import type { OsmTags } from "../../Models/OsmFeature"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
@ -16,7 +17,6 @@
import LoginToggle from "../Base/LoginToggle.svelte"
import { onDestroy } from "svelte"
import { Utils } from "../../Utils"
export let tags: UIEventSource<OsmTags>
export let state: SpecialVisualizationState
export let image: P4CPicture
@ -24,7 +24,7 @@
export let layer: LayerConfig
export let highlighted: UIEventSource<string> = undefined
export let nearbyFeatures: Feature[] | Store<Feature[]> = []
export let linkable = true
let targetValue = Object.values(image.osmTags)[0]
let isLinked = new UIEventSource(Object.values(tags.data).some((v) => targetValue === v))
@ -36,8 +36,8 @@
provider: AllImageProviders.byName(image.provider),
date: new Date(image.date),
id: Object.values(image.osmTags)[0],
isSpherical: image.details.isSpherical
}
async function applyLink(isLinked: boolean) {
console.log("Applying linked image", isLinked, targetValue)
const currentTags = tags.data
@ -86,6 +86,7 @@
<AttributedImage
{state}
image={providedImage}
{nearbyFeatures}
imgClass="max-h-64 w-auto sm:h-32 md:h-64"
attributionFormat="minimal"
/>

35
src/UI/Image/NearbyImages.svelte
View file

@ -24,6 +24,7 @@
import { onDestroy } from "svelte"
import { BBox } from "../../Logic/BBox"
import PanoramaxLink from "../BigComponents/PanoramaxLink.svelte"
import { GeoOperations } from "../../Logic/GeoOperations"
export let tags: UIEventSource<OsmTags>
export let state: SpecialVisualizationState
@ -45,8 +46,7 @@
pics
.filter(
(p: P4CPicture) =>
!loadedImages.data.has(p.pictureUrl) && // We don't show any image which is already linked
!p.details.isSpherical
!loadedImages.data.has(p.pictureUrl) // We don't show any image which is already linked
)
.slice(0, 25),
[loadedImages]
@ -59,12 +59,13 @@
type: "Feature",
geometry: {
type: "Point",
coordinates: [p4c.coordinates.lng, p4c.coordinates.lat],
coordinates: [p4c.coordinates.lng, p4c.coordinates.lat]
},
properties: {
id: p4c.pictureUrl,
rotation: p4c.direction,
},
spherical: p4c.details.isSpherical ? "yes" : "no"
}
}
)
)
@ -76,14 +77,14 @@
type: "Feature",
geometry: {
type: "Point",
coordinates: [s.coordinates.lng, s.coordinates.lat],
coordinates: [s.coordinates.lng, s.coordinates.lat]
},
properties: {
id: s.pictureUrl,
selected: "yes",
rotation: s.direction,
},
},
rotation: s.direction
}
}
]
})
@ -108,7 +109,7 @@
rotation: state.mapProperties.rotation,
pitch: state.mapProperties.pitch,
zoom: new UIEventSource<number>(16),
location: new UIEventSource({ lon, lat }),
location: new UIEventSource({ lon, lat })
})
const geocodedImageLayer = new LayerConfig(<LayerConfigJson>geocoded_image)
@ -117,8 +118,9 @@
layer: geocodedImageLayer,
zoomToFeatures: true,
onClick: (feature) => {
console.log("CLicked:", feature.properties)
highlighted.set(feature.properties.id)
},
}
})
ShowDataLayer.showMultipleLayers(map, new StaticFeatureSource([feature]), state.theme.layers)
@ -141,8 +143,17 @@
layer: geocodedImageLayer,
onClick: (feature) => {
highlighted.set(feature.properties.id)
},
}
})
let nearbyFeatures: Feature[] = [{
type: "Feature",
geometry: { type: "Point", coordinates: GeoOperations.centerpointCoordinates(feature) },
properties: {
name: layer.title?.GetRenderValue(feature.properties).Subs(feature.properties).txt
}
}
]
onDestroy(
tags.addCallbackAndRunD((tags) => {
if (
@ -180,7 +191,7 @@
selected.set(undefined)
}}
>
<LinkableImage {tags} {image} {state} {feature} {layer} {linkable} {highlighted} />
<LinkableImage {tags} {image} {state} {feature} {layer} {linkable} {highlighted} {nearbyFeatures} />
</span>
{/each}
</div>

54
src/UI/Image/photoAdapter.ts
View file

@ -1,54 +0,0 @@
import {
EquirectangularTilesAdapter,
EquirectangularTilesAdapterConfig
} from "@photo-sphere-viewer/equirectangular-tiles-adapter"
export class PhotoAdapter extends EquirectangularTilesAdapter {
// This code was shamelessly stolen from https://gitlab.com/panoramax/clients/web-viewer/-/blob/develop/src/utils/PhotoAdapter.js
// MIT-license; thank you adrien!
private readonly _shouldGoFast: () => boolean
constructor(viewer, config?: EquirectangularTilesAdapterConfig & { shouldGoFast?: () => boolean }) {
super(viewer, config)
this._shouldGoFast = config?.shouldGoFast ?? (() => true)
}
/**
* Override to skip loading SD images according to shouldGoFast option.
*/
public async loadTexture(panorama, loader) {
if (!panorama.origBaseUrl) {
panorama.origBaseUrl = panorama.baseUrl
} else {
panorama.baseUrl = panorama.origBaseUrl
}
// Fast mode + thumbnail available + no HD image loaded yet + flat picture
if (
this._shouldGoFast()
&& panorama.thumbUrl
&& !panorama.hdLoaded
&& panorama.rows == 1
) {
panorama.baseUrl = panorama.thumbUrl
}
let data = await super.loadTexture(panorama, loader)
if (panorama.baseUrl === panorama.origBaseUrl) {
panorama.hdLoaded = true
}
return data
}
/**
* Override to skip loading tiles according to shouldGoFast option.
* @private
*/
/*
private __loadTiles(tiles) {
if (!this._shouldGoFast()) {
super.__loadTiles(tiles)
}
}*/
}

67
src/UI/Image/photoSphereViewerWrapper.ts Normal file
View file

@ -0,0 +1,67 @@
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
})
}
}
}