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

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>