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

116
src/UI/Test.svelte
View file

@ -3,111 +3,37 @@
import { onMount } from "svelte"
export let imageInfo
// Tiles of the panorama, not geotiles
let tilemeta = imageInfo?.asset_templates?.tiles_webp || imageInfo?.asset_templates?.tiles
import "@photo-sphere-viewer/core/index.css"
// import "@photo-sphere-viewer/virtual-tour-plugin/index.css"
// import "@photo-sphere-viewertileUrl/gallery-plugin/index.css"
// import "@photo-sphere-viewer/markers-plugin/index.css"
import { AbstractAdapter, Viewer as PSViewer } from "photo-sphere-viewer"
import { PhotoAdapter } from "./Image/photoAdapter"
export const PSV_DEFAULT_ZOOM = 30
export const PSV_ANIM_DURATION = 250
export const PIC_MAX_STAY_DURATION = 3000
const BASE_PANORAMA = {
baseUrl: "./assets/loader_base.jpg",
width: 1280,
cols: 2,
rows: 1,
tileUrl: () => null
}
import { PhotoSphereViewerWrapper } from "./Image/photoSphereViewerWrapper"
let container: HTMLElement
let isSmall = () => container?.offsetWidth < 576
let shouldGoFast = () => true
function constructPanoramaInfo() {
const f = imageInfo
const hdUrl = (Object.values(f.assets).find(a => a?.roles?.includes("data")) || {}).href
const matrix = f?.properties?.["tiles:tile_matrix_sets"]?.geovisio
const baseUrlWebp = Object.values(f.assets).find(a => a.roles?.includes("visual") && a.type === "image/webp")
const baseUrlJpeg = Object.values(f.assets).find(a => a.roles?.includes("visual") && a.type === "image/jpeg")
const baseUrl = (baseUrlWebp || baseUrlJpeg).href
const thumbUrl = (Object.values(f.assets).find(a => a.roles?.includes("thumbnail") && a.type === "image/jpeg"))?.href
let panorama = {
baseUrl,
origBaseUrl: baseUrl,
basePanoData: (img) => ({
fullWidth: img.width,
fullHeight: img.height
}),
hdUrl,
thumbUrl,
cols: matrix && matrix.tileMatrix[0].matrixWidth,
rows: matrix && matrix.tileMatrix[0].matrixHeight,
width: matrix && (matrix.tileMatrix[0].matrixWidth * matrix.tileMatrix[0].tileWidth),
tileUrl: matrix && ((col, row) => tilemeta.href.replace(/\{TileCol}/g, col).replace(/\{TileRow}/g, row))
}
return panorama
}
PSViewer["useNewAnglesOrder"] = true
onMount(() => {
const viewer = new PSViewer({
container,
panorama: BASE_PANORAMA.baseUrl,
adapter: [{ PhotoAdapter, prototype: AbstractAdapter }
, {
showErrorTile: false,
baseBlur: false,
resolution: isSmall() ? 32 : 64
// shouldGoFast
}],
//withCredentials: parent._options?.fetchOptions?.credentials == "include",
//requestHeaders: parent._options?.fetchOptions?.headers,
//lang: parent._t.psv,
minFov: 5,
loadingTxt: "&nbsp;",
navbar: null
})
console.log("Creating viewer...")
const features = [
{
"type": "Feature",
"properties": { "name": "trap" },
"geometry": {
"coordinates": [
3.742395038713312,
51.05237592785801
],
"type": "Point"
}
}
]
const viewer = new PhotoSphereViewerWrapper(container, imageInfo, features)
const panorama = constructPanoramaInfo()
console.log(panorama, container)
viewer.setOptions({
adapter: [PhotoAdapter, {
showErrorTile: false,
baseBlur: false,
resolution: isSmall() ? 32 : 64
}]
})
viewer.setPanorama(panorama.hdUrl, {
zoom: 0, longitude: 45, latitude: -45
})
window.setTimeout(() => {
console.log(viewer.getPosition())
}, 2000)
// console.log(panorama, container)
})
</script>
<div bind:this={container} class="h-screen w-screen"></div>
<head>
<link rel="stylesheet" href="./node_modules/pannellum/build/pannellum.css">
</head>
<div bind:this={container} class="h-screen w-screen border" style="height: 500px"></div>