steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

show/hide edit markers depending on zoom level

Browse Source
This commit is contained in:
vcoppe
2024-04-23 16:20:47 +02:00
parent 31989f4c3b
commit e7a6e68520
2 changed files with 52 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
website/src/lib/components/toolbar/routing/Routing.svelte
View File

@@ -9,6 +9,7 @@
import { map, selectedFiles } from '$lib/stores';
import { AnchorPointHierarchy } from './routing';
import { onDestroy } from 'svelte';
let routingProfile = {
value: 'bike',
@@ -26,11 +27,45 @@
let routing = true;
let privateRoads = false;
let markers: mapboxgl.Marker[] = [];
function addMarkersForZoomLevel() {
if ($map) {
let zoom = $map.getZoom();
markers.forEach((marker) => {
if (marker._hierarchy.lowestLevel <= zoom) {
marker.removeClassName('hidden');
} else {
marker.addClassName('hidden');
}
});
}
}
function clean() {
markers.forEach((marker) => {
marker.remove();
});
markers = [];
if ($map) {
$map.off('zoom', addMarkersForZoomLevel);
}
}
$: if ($selectedFiles.size == 1 && $map) {
let file = $selectedFiles.values().next().value;
let anchorPoints = AnchorPointHierarchy.create(file);
anchorPoints.createMarkers($map);
markers = anchorPoints.getMarkers($map);
addMarkersForZoomLevel();
$map.on('zoom', addMarkersForZoomLevel);
} else {
clean();
}
onDestroy(() => {
clean();
});
</script>
<ToolbarItemMenu>

22
website/src/lib/components/toolbar/routing/routing.ts
View File

@@ -18,24 +18,34 @@ export class AnchorPointHierarchy {
this.point = point;
}
createMarkers(map: mapboxgl.Map, last: boolean = true) {
getMarkers(map: mapboxgl.Map, last: boolean = true, markers: mapboxgl.Marker[] = []): mapboxgl.Marker[] {
if (this.left == null && this.right == null && this.point) {
let element = document.createElement('div');
element.className = 'hidden h-3 w-3 rounded-full bg-background border-2 border-black';
let marker = new mapboxgl.Marker({
draggable: true,
scale: 3 / Math.sqrt(this.lowestLevel)
}).setLngLat([this.point.point.getLongitude(), this.point.point.getLatitude()]).addTo(map);
element
});
marker.setLngLat(this.point.point.getCoordinates());
marker.addTo(map);
Object.defineProperty(marker, '_hierarchy', { value: this });
markers.push(marker);
}
if (this.right) {
this.right.forEach((point, index) => {
if ((index < this.right.length - 1) || last) {
point.createMarkers(map, (index >= this.right.length - 2) && last);
// (index >= this.right.length - 2) because the last point must be drawn by the second to last AnchorPointHierarchy
// because only the right children are drawn
point.getMarkers(map, (index >= this.right.length - 2) && last, markers);
}
});
}
return markers;
}
static create(file: GPXFile, initialEpsilon: number = 1000, minEpsilon: number = 50): AnchorPointHierarchy {
static create(file: GPXFile, initialEpsilon: number = 50000, minEpsilon: number = 50): AnchorPointHierarchy {
let hierarchies = [];
for (let track of file.getChildren()) {
for (let segment of track.getChildren()) {
@@ -70,7 +80,7 @@ export class AnchorPointHierarchy {
let childHierarchies = [];
for (let i = 0; i < simplified.length - 1; i++) {
childHierarchies.push(AnchorPointHierarchy.createRecursive(level + 1, i == 0 ? levelLeft : level, i == simplified.length - 2 ? levelRight : level, points, epsilon / 2, minEpsilon, simplified[i].index, simplified[i + 1].index));
childHierarchies.push(AnchorPointHierarchy.createRecursive(level + 1, i == 0 ? levelLeft : level, i == simplified.length - 2 ? levelRight : level, points, epsilon / 1.54, minEpsilon, simplified[i].index, simplified[i + 1].index));
hierarchy[i].right = childHierarchies[i];
hierarchy[i + 1].left = childHierarchies[i];