mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 1 Projects 1 Releases Activity

Add ruler tool and fix types

Browse source
This commit is contained in:
ThePetrovich 2025-07-01 21:09:15 +08:00
parent 329c1c2215
commit bb390d50dc
16 changed files with 582 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/lib/components/Map.svelte
View file

@ -1,21 +1,19 @@
<script lang="ts">
import { onMount, createEventDispatcher } from "svelte";
import * as L from "leaflet";
import { ruler, Ruler } from "$lib/ext/leaflet-ruler/leaflet-ruler";
import type { Map as LeafletMap, LayerGroup } from "leaflet";
import "leaflet/dist/leaflet.css";
import WindVisualization from "$lib/components/WindVisualisation.svelte";
import { distHaversine } from "$lib/mathutil";
import type { PredictionData, TelemetryData } from "$lib/types";
import type { Prediction, Telemetry } from "$lib/types";
/**
* @type {'prediction' | 'telemetry'}
*/
export let mode: "prediction" | "telemetry" = "prediction";
export let data: PredictionData | TelemetryData | null = null;
export let data: Prediction | Telemetry | null = null;
let map: typeof LeafletMap | undefined;
let map: LeafletMap;
let mapContainer: HTMLDivElement;
let plotLayerGroup: typeof LayerGroup;
let plotLayerGroup: LayerGroup;
let mouseLat = 0;
let mouseLng = 0;
let isSelecting = false;
@ -36,6 +34,10 @@
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
ruler({
position: "bottomright",
}).addTo(map);
const response = await fetch("src/routes/testVelo.json");
windData = await response.json();
@ -68,11 +70,11 @@
if (mapContainer) mapContainer.style.cursor = "";
};
export const plotData = (plotData: PredictionData | TelemetryData) => {
export const plotData = (plotData: Prediction | Telemetry) => {
if (mode === "prediction") {
plotPrediction(plotData as PredictionData);
plotPrediction(plotData as Prediction);
} else if (mode === "telemetry") {
plotTelemetry(plotData as TelemetryData);
plotTelemetry(plotData as Telemetry);
}
};
@ -85,7 +87,7 @@
const burstIcon = L.icon({ iconUrl: "pop-marker.png", iconSize: [16, 16], iconAnchor: [8, 8] });
const telemetryIcon = L.icon({ iconUrl: "marker-sm-red.png", iconSize: [10, 10], iconAnchor: [5, 5] });
const plotPrediction = (prediction: PredictionData) => {
const plotPrediction = (prediction: Prediction) => {
const { launch, landing, burst, flight_path, flight_time } = prediction;
const range = distHaversine(launch.latlng, landing.latlng, 1);
@ -102,7 +104,7 @@
map?.fitBounds(L.latLngBounds(flight_path));
};
const plotTelemetry = (telemetry: TelemetryData) => {
const plotTelemetry = (telemetry: Telemetry) => {
L.marker(telemetry.launch.latlng, { title: `Launch`, icon: launchIcon }).addTo(plotLayerGroup);
telemetry.datapoints.forEach((point) => {