Erstellen Sie eine interaktive SVG-Nachthimmelkarte, die sichtbare Sternbilder basierend auf Datum, Uhrzeit und Standort anzeigt. Funktionen umfassen automatische Erkennung oder manuelle Eingabe von Koordinaten, Sternbildnamen, Sternpositionen und Horizontlinie.
Die Konstellationsbetrachter-App ist ein leistungsstarkes Werkzeug fĂŒr Astronomie-Enthusiasten und Sternengucker. Sie ermöglicht es den Nutzern, den Nachthimmel zu visualisieren und sichtbare Konstellationen basierend auf ihrem Standort, Datum und Uhrzeit zu identifizieren. Diese interaktive Anwendung bietet eine einfache SVG-Nachtkartenansicht, die die Namen der Konstellationen, grundlegende Sternpositionen und eine Horizontlinie anzeigt, alles in einer einseitigen BenutzeroberflĂ€che.
Die App verwendet eine Kombination aus himmlischen Koordinaten und Zeitberechnungen, um zu bestimmen, welche Konstellationen am Nachthimmel sichtbar sind:
Rektaszension (RA) und Deklination (Dec): Dies sind die himmlischen Entsprechungen von LÀngengrad und Breitengrad. RA wird in Stunden (0 bis 24) gemessen, und Dec wird in Grad (-90° bis +90°) gemessen.
Lokale siderische Zeit (LST): Diese wird unter Verwendung des LĂ€ngengrads des Beobachters sowie des aktuellen Datums und der aktuellen Uhrzeit berechnet. LST bestimmt, welcher Teil der himmlischen SphĂ€re derzeit ĂŒber dem Beobachter steht.
Stundenwinkel (HA): Dies ist der Winkelabstand zwischen dem Meridian und einem himmlischen Objekt, berechnet als:
Höhe (Alt) und Azimut (Az): Diese werden mit den folgenden Formeln berechnet:
Dabei ist Lat die Breite des Beobachters.
Die App fĂŒhrt die folgenden Schritte aus, um sichtbare Konstellationen zu bestimmen und die Himmelskarte zu rendern:
Die Konstellationsbetrachter-App hat verschiedene Anwendungen:
WĂ€hrend unsere Konstellationsbetrachter-App eine einfache und zugĂ€ngliche Möglichkeit bietet, den Nachthimmel zu betrachten, gibt es auch andere verfĂŒgbare Werkzeuge:
Die Geschichte der Konstellationskartierung und Sternenkarten reicht Tausende von Jahren zurĂŒck:
Die App verwendet eine vereinfachte Konstellationsdatenbank, die in einer TypeScript-Datei gespeichert ist:
1export interface Star {
2 ra: number; // Rektaszension in Stunden
3 dec: number; // Deklination in Grad
4 magnitude: number; // Helligkeit des Sterns
5}
6
7export interface Constellation {
8 name: string;
9 stars: Star[];
10}
11
12export const constellations: Constellation[] = [
13 {
14 name: "Ursa Major",
15 stars: [
16 { ra: 11.062, dec: 61.751, magnitude: 1.79 },
17 { ra: 10.229, dec: 60.718, magnitude: 2.37 },
18 // ... weitere Sterne
19 ]
20 },
21 // ... weitere Konstellationen
22];
23Diese Datenstruktur ermöglicht eine effiziente Suche und Darstellung von Konstellationen.
Die App verwendet D3.js, um die SVG-Nachtkartenansicht zu erstellen. Hier ist ein vereinfachtes Beispiel des Rendering-Prozesses:
1import * as d3 from 'd3';
2
3function renderSkyMap(visibleConstellations, width, height) {
4 const svg = d3.create("svg")
5 .attr("width", width)
6 .attr("height", height)
7 .attr("viewBox", [0, 0, width, height]);
8
9 // Hintergrund des Himmels zeichnen
10 svg.append("circle")
11 .attr("cx", width / 2)
12 .attr("cy", height / 2)
13 .attr("r", Math.min(width, height) / 2)
14 .attr("fill", "navy");
15
16 // Sterne und Konstellationen zeichnen
17 visibleConstellations.forEach(constellation => {
18 const lineGenerator = d3.line()
19 .x(d => projectStar(d).x)
20 .y(d => projectStar(d).y);
21
22 svg.append("path")
23 .attr("d", lineGenerator(constellation.stars))
24 .attr("stroke", "white")
25 .attr("fill", "none");
26
27 constellation.stars.forEach(star => {
28 const { x, y } = projectStar(star);
29 svg.append("circle")
30 .attr("cx", x)
31 .attr("cy", y)
32 .attr("r", 5 - star.magnitude)
33 .attr("fill", "white");
34 });
35
36 // Konstellationsnamen hinzufĂŒgen
37 const firstStar = projectStar(constellation.stars[0]);
38 svg.append("text")
39 .attr("x", firstStar.x)
40 .attr("y", firstStar.y - 10)
41 .text(constellation.name)
42 .attr("fill", "white")
43 .attr("font-size", "12px");
44 });
45
46 // Horizontlinie zeichnen
47 svg.append("line")
48 .attr("x1", 0)
49 .attr("y1", height / 2)
50 .attr("x2", width)
51 .attr("y2", height / 2)
52 .attr("stroke", "green")
53 .attr("stroke-width", 2);
54
55 return svg.node();
56}
57
58function projectStar(star) {
59 // RA und Dec in x, y-Koordinaten umwandeln
60 // Dies ist eine vereinfachte Projektion und sollte durch eine ordnungsgemĂ€Ăe himmlische Projektion ersetzt werden
61 const x = (star.ra / 24) * width;
62 const y = ((90 - star.dec) / 180) * height;
63 return { x, y };
64}
65Die App behandelt verschiedene Zeitzonen und Standorte, indem sie:
WĂ€hrend die App Lichtverschmutzung nicht direkt berĂŒcksichtigt, sollten die Nutzer sich bewusst sein, dass:
Die Horizontlinie wird basierend auf dem Standort des Beobachters berechnet:
Die App berĂŒcksichtigt saisonale Variationen bei sichtbaren Konstellationen, indem sie:
Entdecken Sie weitere Tools, die fĂŒr Ihren Workflow nĂŒtzlich sein könnten