mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2026-10-06 22:04:06 +00:00
fix markers
This commit is contained in:
@@ -1,11 +1,13 @@
|
|||||||
import { currentTool, Tool } from '$lib/components/toolbar/tools';
|
import { currentTool, Tool } from '$lib/components/toolbar/tools';
|
||||||
import { gpxStatistics, hoveredPoint, slicedGPXStatistics } from '$lib/logic/statistics';
|
import { hoveredPoint } from '$lib/logic/statistics';
|
||||||
import type { GeoJSONSource } from 'maplibre-gl';
|
import type { GeoJSONSource } from 'maplibre-gl';
|
||||||
import { get } from 'svelte/store';
|
import { get } from 'svelte/store';
|
||||||
import { map } from '$lib/components/map/map';
|
import { map } from '$lib/components/map/map';
|
||||||
import { allHidden } from '$lib/logic/hidden';
|
import { allHidden } from '$lib/all-hidden';
|
||||||
import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
|
import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
|
||||||
import { loadSVGIcon } from '$lib/utils';
|
import { loadSVGIcon } from '$lib/utils';
|
||||||
|
import { slicedStatistics } from '$lib/logic/selection-statistics';
|
||||||
|
import { engine } from '$lib/engine';
|
||||||
|
|
||||||
const startMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
const startMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||||
<circle cx="8" cy="8" r="6" fill="#22c55e" stroke="white" stroke-width="1.5"/>
|
<circle cx="8" cy="8" r="6" fill="#22c55e" stroke="white" stroke-width="1.5"/>
|
||||||
@@ -26,14 +28,16 @@ const hoverMarkerSVG = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="h
|
|||||||
<circle cx="8" cy="8" r="6" fill="#00b8db" stroke="white" stroke-width="1.5"/>
|
<circle cx="8" cy="8" r="6" fill="#00b8db" stroke="white" stroke-width="1.5"/>
|
||||||
</svg>`;
|
</svg>`;
|
||||||
|
|
||||||
|
const { statistics } = engine;
|
||||||
|
|
||||||
export class StartEndMarkers {
|
export class StartEndMarkers {
|
||||||
updateBinded: () => void = this.update.bind(this);
|
updateBinded: () => void = this.update.bind(this);
|
||||||
unsubscribes: (() => void)[] = [];
|
unsubscribes: (() => void)[] = [];
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
map.onLoad((map_) => map_.on('style.load', this.updateBinded));
|
map.onLoad((map_) => map_.on('style.load', this.updateBinded));
|
||||||
this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
|
this.unsubscribes.push(statistics.subscribe(this.updateBinded));
|
||||||
this.unsubscribes.push(slicedGPXStatistics.subscribe(this.updateBinded));
|
this.unsubscribes.push(slicedStatistics.subscribe(this.updateBinded));
|
||||||
this.unsubscribes.push(hoveredPoint.subscribe(this.updateBinded));
|
this.unsubscribes.push(hoveredPoint.subscribe(this.updateBinded));
|
||||||
this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
|
this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
|
||||||
this.unsubscribes.push(allHidden.subscribe(this.updateBinded));
|
this.unsubscribes.push(allHidden.subscribe(this.updateBinded));
|
||||||
@@ -46,8 +50,8 @@ export class StartEndMarkers {
|
|||||||
this.loadIcons();
|
this.loadIcons();
|
||||||
|
|
||||||
const tool = get(currentTool);
|
const tool = get(currentTool);
|
||||||
const statistics = get(gpxStatistics);
|
const stats = get(statistics);
|
||||||
const slicedStatistics = get(slicedGPXStatistics);
|
const sliced = get(slicedStatistics);
|
||||||
const hovered = get(hoveredPoint);
|
const hovered = get(hoveredPoint);
|
||||||
const hidden = get(allHidden);
|
const hidden = get(allHidden);
|
||||||
if (!hidden) {
|
if (!hidden) {
|
||||||
@@ -56,18 +60,17 @@ export class StartEndMarkers {
|
|||||||
features: [],
|
features: [],
|
||||||
};
|
};
|
||||||
|
|
||||||
if (statistics.global.length > 0 && tool !== Tool.ROUTING) {
|
if (stats.length > 0 && tool !== Tool.ROUTING) {
|
||||||
const start = statistics
|
const start = [stats.lng[sliced?.start ?? 0], stats.lat[sliced?.start ?? 0]];
|
||||||
.getTrackPoint(slicedStatistics?.[1] ?? 0)!
|
const end = [
|
||||||
.trkpt.getCoordinates();
|
stats.lng[sliced?.end ?? stats.length - 1],
|
||||||
const end = statistics
|
stats.lat[sliced?.end ?? stats.length - 1],
|
||||||
.getTrackPoint(slicedStatistics?.[2] ?? statistics.global.length - 1)!
|
];
|
||||||
.trkpt.getCoordinates();
|
|
||||||
data.features.push({
|
data.features.push({
|
||||||
type: 'Feature',
|
type: 'Feature',
|
||||||
geometry: {
|
geometry: {
|
||||||
type: 'Point',
|
type: 'Point',
|
||||||
coordinates: [start.lon, start.lat],
|
coordinates: start,
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
icon: 'start-marker',
|
icon: 'start-marker',
|
||||||
@@ -77,7 +80,7 @@ export class StartEndMarkers {
|
|||||||
type: 'Feature',
|
type: 'Feature',
|
||||||
geometry: {
|
geometry: {
|
||||||
type: 'Point',
|
type: 'Point',
|
||||||
coordinates: [end.lon, end.lat],
|
coordinates: end,
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
icon: 'end-marker',
|
icon: 'end-marker',
|
||||||
|
|||||||
Reference in New Issue
Block a user