日付、時間、場所に基づいて見える星座を示すインタラクティブなSVG夜空マップを生成します。自動検出または手動座標入力、星座名、星の位置、地平線を表示する機能があります。
星座ビューワーアプリは、天文学愛好家や星空観察者のための強力なツールです。このアプリを使用すると、ユーザーは自分の位置、日付、時間に基づいて夜空を視覚化し、見える星座を特定することができます。このインタラクティブなアプリケーションは、星座名、基本的な星の位置、地平線を表示するシンプルなSVG夜空マップを提供し、シングルページインターフェース内ですべてを表示します。
アプリは、天体座標と時間計算の組み合わせを使用して、夜空に見える星座を特定します：
右昇（RA）と赤緯（Dec）：これらはそれぞれ経度と緯度の天体の同等物です。RAは時間（0から24時間）で測定され、Decは度（-90°から+90°）で測定されます。
現地恒星時（LST）：これは、観測者の経度と現在の日付と時間を使用して計算されます。LSTは、現在の天球のどの部分が真上にあるかを決定します。
時間角（HA）：これは、子午線と天体の間の角度の距離で、次のように計算されます：
高度（Alt）と方位（Az）：これらは次の式を使用して計算されます：
ここで、Latは観測者の緯度です。
アプリは、見える星座を特定し、空のマップを描画するために次の手順を実行します：
星座ビューワーアプリにはさまざまな用途があります：
私たちの星座ビューワーアプリは、夜空を表示するシンプルでアクセスしやすい方法を提供しますが、他にも利用可能なツールがあります：
星座のマッピングと星図の歴史は数千年にわたります：
アプリは、TypeScriptファイルに保存された簡略化された星座データベースを使用します：
1export interface Star {
2 ra: number; // 右昇（時間）
3 dec: number; // 赤緯（度）
4 magnitude: number; // 星の明るさ
5}
6
7export interface Constellation {
8 name: string;
9 stars: Star[];
10}
11
12export const constellations: Constellation[] = [
13 {
14 name: "大熊座",
15 stars: [
16 { ra: 11.062, dec: 61.751, magnitude: 1.79 },
17 { ra: 10.229, dec: 60.718, magnitude: 2.37 },
18 // ... さらに多くの星
19 ]
20 },
21 // ... さらに多くの星座
22];
23このデータ構造は、星座の効率的な検索と描画を可能にします。
アプリはD3.jsを使用してSVG夜空マップを作成します。以下は、レンダリングプロセスの簡略化された例です：
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 // 空の背景を描画
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 // 星と星座を描画
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 // 星座名を追加
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 // 地平線を描画
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とDecをx, y座標に変換
60 // これは簡略化された投影であり、適切な天体投影に置き換える必要があります
61 const x = (star.ra / 24) * width;
62 const y = ((90 - star.dec) / 180) * height;
63 return { x, y };
64}
65アプリは異なるタイムゾーンと位置を次のように処理します：
アプリは光害を直接考慮していませんが、ユーザーは次のことに注意する必要があります：
地平線は観測者の位置に基づいて計算されます：
アプリは、見える星座の季節的変動を次のように考慮します：