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

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}