forked from MapComplete/MapComplete
Feature: first working version of inspecting 360° images
This commit is contained in:
parent
7d104b4266
commit
01ba98a820
24 changed files with 330 additions and 436 deletions
|
|
@ -44,4 +44,8 @@ export default class GenericImageProvider extends ImageProvider {
|
|||
public DownloadAttribution(_) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
getPanoramaInfo(image: { id: string }): undefined {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -116,4 +116,8 @@ export class Imgur extends ImageProvider {
|
|||
|
||||
return license
|
||||
}
|
||||
|
||||
getPanoramaInfo(image: { id: string }): undefined {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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(/</g, "<")?.replace(/>/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(/</g,'<')?.replace(/>/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'
|
||||
}
|
||||
}
|
||||
|
|
@ -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))
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
67
src/UI/Image/photoSphereViewerWrapper.ts
Normal 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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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: " ",
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
import LevelSelector from "./BigComponents/LevelSelector.svelte"
|
||||
import type { RasterLayerPolygon } from "../Models/RasterLayers"
|
||||
import { AvailableRasterLayers } from "../Models/RasterLayers"
|
||||
import { onDestroy } from "svelte"
|
||||
import { onDestroy, setContext } from "svelte"
|
||||
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
|
||||
import StateIndicator from "./BigComponents/StateIndicator.svelte"
|
||||
import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"
|
||||
|
|
|
|||
12
src/test.ts
12
src/test.ts
|
|
@ -1,13 +1,17 @@
|
|||
import { Mapillary } from "./Logic/ImageProviders/Mapillary"
|
||||
import Test from "./UI/Test.svelte"
|
||||
import { ImageData, PanoramaxXYZ } from "panoramax-js"
|
||||
|
||||
const target = document.getElementById("maindiv")
|
||||
target.innerHTML = ""
|
||||
let img = "https://panoramax-storage-public-fast.s3.gra.perf.cloud.ovh.net/main-pictures/d2/8c/ba/cf/c807-4dbf-b8c8-b1c3aa89182d.jpg"
|
||||
let imgId = "d28cbacf-c807-4dbf-b8c8-b1c3aa89182d"
|
||||
/*
|
||||
let imgId = "8af265ba-3521-4c46-b2a9-c072215c1de3"
|
||||
let panoramax = new PanoramaxXYZ()
|
||||
panoramax.imageInfo(imgId).then((imageInfo: ImageData) => {
|
||||
console.log("IMG INFO: ", imageInfo)
|
||||
new Test({ target, props: { imageInfo } })
|
||||
})
|
||||
})*/
|
||||
|
||||
let pkey = 1199645818028177
|
||||
new Mapillary().DownloadImageInfo(pkey).then(imageInfo => {
|
||||
new Test({ target, props: { imageInfo } })
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue