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

kdbush to check for hover near track

Browse Source
This commit is contained in:
vcoppe
2024-04-23 18:36:16 +02:00
parent e7a6e68520
commit dff39366fa
5 changed files with 102 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/package-lock.json generated
View File

@@ -13,6 +13,7 @@
"chart.js": "^4.4.2",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"kdbush": "^4.0.2",
"lucide-svelte": "^0.365.0",
"mapbox-gl": "^3.2.0",
"sortablejs": "^1.15.2",

1
website/package.json
View File

@@ -46,6 +46,7 @@
"chart.js": "^4.4.2",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"kdbush": "^4.0.2",
"lucide-svelte": "^0.365.0",
"mapbox-gl": "^3.2.0",
"sortablejs": "^1.15.2",

5
website/src/lib/components/GPX.svelte
View File

@@ -49,6 +49,11 @@
let layerId = getLayerId();
let layerColor = getColor();
Object.defineProperty(file, 'layerId', {
value: layerId,
writable: false
});
function selectOnClick(e: any) {
if (e.originalEvent.shiftKey) {
get(selectFiles).addSelect(file);

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

@@ -8,8 +8,12 @@
import { CircleHelp } from 'lucide-svelte';
import { map, selectedFiles } from '$lib/stores';
import { AnchorPointHierarchy } from './routing';
import { AnchorPointHierarchy, getMarker } from './routing';
import { onDestroy } from 'svelte';
import mapboxgl from 'mapbox-gl';
import KDBush from 'kdbush';
import type { GPXFile } from 'gpx';
let routingProfile = {
value: 'bike',
@@ -28,6 +32,8 @@
let privateRoads = false;
let markers: mapboxgl.Marker[] = [];
let file: GPXFile | null = null;
let kdbush: KDBush | null = null;
function addMarkersForZoomLevel() {
if ($map) {
@@ -42,6 +48,38 @@
}
}
function extendFile(e: mapboxgl.MapMouseEvent) {
console.log(e.lngLat);
}
let insertableMarker: mapboxgl.Marker | null = null;
function moveInsertableMarker(e: mapboxgl.MapMouseEvent) {
if (insertableMarker && kdbush && $map) {
let bounds = $map.getBounds();
let latLngDistance = Math.max(
Math.abs(bounds.getNorth() - bounds.getSouth()),
Math.abs(bounds.getEast() - bounds.getWest())
);
if (kdbush.within(e.lngLat.lng, e.lngLat.lat, latLngDistance / 200).length > 0) {
insertableMarker.setLngLat(e.lngLat);
} else {
insertableMarker.remove();
insertableMarker = null;
$map.off('mousemove', moveInsertableMarker);
}
}
}
function showInsertableMarker(e: mapboxgl.MapMouseEvent) {
if ($map && !insertableMarker) {
insertableMarker = getMarker({
lon: e.lngLat.lng,
lat: e.lngLat.lat
});
insertableMarker.addTo($map);
$map.on('mousemove', moveInsertableMarker);
}
}
function clean() {
markers.forEach((marker) => {
marker.remove();
@@ -49,16 +87,45 @@
markers = [];
if ($map) {
$map.off('zoom', addMarkersForZoomLevel);
$map.off('click', extendFile);
if (file) {
$map.off('mouseover', file.layerId, showInsertableMarker);
}
if (insertableMarker) {
insertableMarker.remove();
}
}
kdbush = null;
}
$: if ($selectedFiles.size == 1 && $map) {
let file = $selectedFiles.values().next().value;
clean();
file = $selectedFiles.values().next().value;
// record time
let start = performance.now();
let anchorPoints = AnchorPointHierarchy.create(file);
// record time
let end = performance.now();
console.log('Time to create anchor points: ' + (end - start) + 'ms');
markers = anchorPoints.getMarkers($map);
addMarkersForZoomLevel();
$map.on('zoom', addMarkersForZoomLevel);
$map.on('click', extendFile);
$map.on('mouseover', file.layerId, showInsertableMarker);
let points = file.getTrackPointsAndStatistics().points;
start = performance.now();
kdbush = new KDBush(points.length);
for (let i = 0; i < points.length; i++) {
kdbush.add(points[i].getLongitude(), points[i].getLatitude());
}
kdbush.finish();
end = performance.now();
console.log('Time to create kdbush: ' + (end - start) + 'ms');
} else {
clean();
}

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

@@ -1,6 +1,15 @@
import type { Coordinates, GPXFile, TrackPoint } from "gpx";
import mapboxgl from "mapbox-gl";
export function getMarker(coordinates: Coordinates, draggable: boolean = false, hidden: boolean = false): mapboxgl.Marker {
let element = document.createElement('div');
element.className = `${hidden ? 'hidden' : ''} h-3 w-3 rounded-full bg-background border-2 border-black cursor-pointer`;
return new mapboxgl.Marker({
draggable,
element
}).setLngLat(coordinates);
}
export type TrackPointWithIndex = { point: TrackPoint, index: number };
export class AnchorPointHierarchy {
@@ -20,13 +29,7 @@ export class AnchorPointHierarchy {
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,
element
});
marker.setLngLat(this.point.point.getCoordinates());
let marker = getMarker(this.point.point.getCoordinates());
marker.addTo(map);
Object.defineProperty(marker, '_hierarchy', { value: this });
markers.push(marker);
@@ -181,3 +184,19 @@ function bearing(latA: number, lonA: number, latB: number, lonB: number): number
Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA));
}
export function route(points: TrackPoint[], brouterProfile: string, privateRoads: boolean, routing: boolean) {
if (routing) {
getRoute(points, brouterProfile, privateRoads).then(response => {
return response.json();
});
} else {
return new Promise((resolve) => {
resolve(points);
});
}
}
function getRoute(points: TrackPoint[], brouterProfile: string, privateRoads: boolean): Promise<Response> {
let url = `https://routing.gpx.studio?profile=${brouterProfile + privateRoads ? '-private' : ''}&lonlats=${points.map(point => `${point.getLongitude()},${point.getLatitude()}`).join('|')}&format=geojson&alternativeidx=0`;
return fetch(url);
}