Generer et interaktivt SVG natt-himmelkart som viser synlige konstellasjoner basert på dato, tid og sted. Funksjoner for automatisk oppdagelse eller manuell koordinat-inndata, konstellasjonsnavn, stjernes posisjoner og horisontlinje.
Konstellasjonsvisningsappen er et kraftig verktøy for astronomientusiaster og stjernekikkere. Den lar brukerne visualisere nattehimmelen og identifisere synlige konstellasjoner basert på deres plassering, dato og tid. Denne interaktive applikasjonen gir et enkelt SVG-nattkart, som viser konstellasjonsnavn, grunnleggende stjerneposisjoner og en horisontlinje, alt innen et enkelt sidegrensesnitt.
Appen bruker en kombinasjon av himmelske koordinater og tidsberegninger for å bestemme hvilke konstellasjoner som er synlige på nattehimmelen:
Rette ascensjon (RA) og deklinasjon (Dec): Disse er de himmelske ekvivalentene til lengde- og breddegrader, henholdsvis. RA måles i timer (0 til 24), og Dec måles i grader (-90° til +90°).
Lokal siderisk tid (LST): Dette beregnes ved hjelp av observatørens lengdegrad og gjeldende dato og tid. LST bestemmer hvilken del av den himmelske sfæren som for øyeblikket er over hodet.
Timevinkel (HA): Dette er den vinkelrette avstanden mellom meridianen og et himmellegeme, beregnet som:
Høyde (Alt) og azimuth (Az): Disse beregnes ved hjelp av følgende formler:
Hvor Lat er observatørens breddegrad.
Appen utfører følgende trinn for å bestemme synlige konstellasjoner og gjengi himmelkartet:
Konstellasjonsvisningsappen har ulike anvendelser:
Mens vår konstellasjonsvisningsapp gir en enkel og tilgjengelig måte å se nattehimmelen på, finnes det andre verktøy tilgjengelig:
Historien om konstellasjonskartlegging og stjernekart går tilbake tusenvis av år:
Appen bruker en forenklet konstellasjonsdatabase lagret i en TypeScript-fil:
1export interface Star {
2 ra: number; // Rette ascensjon i timer
3 dec: number; // Deklinasjon i grader
4 magnitude: number; // Stjernelys
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 // ... flere stjerner
19 ]
20 },
21 // ... flere konstellasjoner
22];
23
Denne datastrukturen gjør det mulig med effektiv oppslag og gjengivelse av konstellasjoner.
Appen bruker D3.js for å lage SVG-nattkartet. Her er et forenklet eksempel på gjengivelsesprosessen:
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 // Tegn himmelbakgrunn
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 // Tegn stjerner og konstellasjoner
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 // Legg til konstellasjonsnavn
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 // Tegn horisontlinje
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 // Konverter RA og Dec til x, y-koordinater
60 // Dette er en forenklet projeksjon og bør erstattes med en ordentlig himmelsk projeksjon
61 const x = (star.ra / 24) * width;
62 const y = ((90 - star.dec) / 180) * height;
63 return { x, y };
64}
65
Appen håndterer forskjellige tidssoner og plasseringer ved å:
Selv om appen ikke direkte tar hensyn til lysforurensning, bør brukerne være klar over at:
Horisontlinjen beregnes basert på observatørens plassering:
Appen tar hensyn til sesongvariasjoner i synlige konstellasjoner ved å:
Oppdag flere verktøy som kan være nyttige for arbeidsflyten din