Genereer een interactieve SVG nachtlucht kaart die zichtbare sterrenbeelden toont op basis van datum, tijd en locatie. Kenmerken zijn automatische detectie of handmatige coördinateninvoer, sterrenbeeldnamen, sterposities en horizonlijn.
De Constellatie Viewer App is een krachtig hulpmiddel voor sterrenkundeliefhebbers en sterrenkijkers. Het stelt gebruikers in staat om de nachtelijke hemel te visualiseren en zichtbare constellaties te identificeren op basis van hun locatie, datum en tijd. Deze interactieve applicatie biedt een eenvoudige SVG-nachtkaart, die de namen van constellaties, basissterposities en een horizonlijn weergeeft, allemaal binnen een enkele pagina-interface.
De app gebruikt een combinatie van hemelcoördinaten en tijdsberekeningen om te bepalen welke constellaties zichtbaar zijn aan de nachtelijke hemel:
Rechtse Ascensie (RA) en Declinatie (Dec): Dit zijn de hemelse equivalenten van lengte- en breedtegraad, respectievelijk. RA wordt gemeten in uren (0 tot 24), en Dec wordt gemeten in graden (-90° tot +90°).
Lokale Sidereale Tijd (LST): Dit wordt berekend met behulp van de lengtegraad van de waarnemer en de huidige datum en tijd. LST bepaalt welk deel van de hemelbol momenteel boven je hoofd is.
Uurhoek (HA): Dit is de hoeksafstand tussen de meridiaan en een hemels object, berekend als:
Hoogte (Alt) en Azimut (Az): Deze worden berekend met de volgende formules:
Waar Lat de breedtegraad van de waarnemer is.
De app voert de volgende stappen uit om zichtbare constellaties te bepalen en de hemelkaart weer te geven:
De Constellatie Viewer App heeft verschillende toepassingen:
Hoewel onze Constellatie Viewer App een eenvoudige en toegankelijke manier biedt om de nachtelijke hemel te bekijken, zijn er andere beschikbare hulpmiddelen:
De geschiedenis van constellatie mapping en sterrenkaarten gaat duizenden jaren terug:
De app gebruikt een vereenvoudigde constellatie-database opgeslagen in een TypeScript-bestand:
1export interface Star {
2 ra: number; // Rechtse Ascensie in uren
3 dec: number; // Declinatie in graden
4 magnitude: number; // Sterhelderheid
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 // ... meer sterren
19 ]
20 },
21 // ... meer constellaties
22];
23Deze datastructuur maakt efficiënte opzoeking en weergave van constellaties mogelijk.
De app gebruikt D3.js om de SVG-nachtkaart te maken. Hier is een vereenvoudigd voorbeeld van het weergaveproces:
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 // Teken de hemelachtergrond
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 // Teken sterren en constellaties
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 // Voeg de naam van de constellatie toe
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 // Teken horizonlijn
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 // Zet RA en Dec om naar x, y-coördinaten
60 // Dit is een vereenvoudigde projectie en moet worden vervangen door een correcte hemelse projectie
61 const x = (star.ra / 24) * width;
62 const y = ((90 - star.dec) / 180) * height;
63 return { x, y };
64}
65De app behandelt verschillende tijdzones en locaties door:
Hoewel de app lichtvervuiling niet direct in aanmerking neemt, moeten gebruikers zich ervan bewust zijn dat:
De horizonlijn wordt berekend op basis van de locatie van de waarnemer:
De app houdt rekening met seizoensvariaties in zichtbare constellaties door:
Ontdek meer tools die handig kunnen zijn voor uw workflow