Tạo bản đồ bầu trời đêm SVG tương tác hiển thị các chòm sao có thể nhìn thấy dựa trên ngày, giờ và vị trí. Tính năng tự động phát hiện hoặc nhập tọa độ thủ công, tên chòm sao, vị trí sao và đường chân trời.
Ứng Dụng Xem Chòm Sao là một công cụ mạnh mẽ dành cho những người yêu thích thiên văn và những người ngắm sao. Nó cho phép người dùng hình dung bầu trời đêm và xác định các chòm sao có thể nhìn thấy dựa trên vị trí, ngày tháng và thời gian của họ. Ứng dụng tương tác này cung cấp một bản đồ bầu trời đêm SVG đơn giản, hiển thị tên chòm sao, vị trí ngôi sao cơ bản và đường chân trời, tất cả trong một giao diện trang đơn.
Ứng dụng sử dụng sự kết hợp giữa tọa độ thiên văn và tính toán thời gian để xác định các chòm sao nào có thể nhìn thấy trên bầu trời đêm:
Độ Phải (RA) và Độ Nghiêng (Dec): Đây là các tương đương thiên văn của kinh độ và vĩ độ, tương ứng. RA được đo bằng giờ (0 đến 24), và Dec được đo bằng độ (-90° đến +90°).
Thời Gian Thiên Địa Địa Phương (LST): Điều này được tính toán dựa trên kinh độ của người quan sát và ngày tháng hiện tại. LST xác định phần nào của bầu trời thiên văn đang ở trên đầu.
Góc Giờ (HA): Đây là khoảng cách góc giữa kinh tuyến và một đối tượng thiên văn, được tính như sau:
Độ Cao (Alt) và Phương Hướng (Az): Những điều này được tính toán bằng các công thức sau:
Trong đó Lat là vĩ độ của người quan sát.
Ứng dụng thực hiện các bước sau để xác định các chòm sao có thể nhìn thấy và vẽ bản đồ bầu trời:
Ứng Dụng Xem Chòm Sao có nhiều ứng dụng khác nhau:
Trong khi Ứng Dụng Xem Chòm Sao của chúng tôi cung cấp một cách đơn giản và dễ tiếp cận để xem bầu trời đêm, còn có các công cụ khác có sẵn:
Lịch sử của việc lập bản đồ chòm sao và các bản đồ sao đã có từ hàng ngàn năm:
Ứng dụng sử dụng một cơ sở dữ liệu chòm sao đơn giản được lưu trữ trong một tệp TypeScript:
1export interface Star {
2 ra: number; // Độ Phải theo giờ
3 dec: number; // Độ Nghiêng theo độ
4 magnitude: number; // Độ sáng của ngôi sao
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 // ... nhiều ngôi sao hơn
19 ]
20 },
21 // ... nhiều chòm sao hơn
22];
23Cấu trúc dữ liệu này cho phép tra cứu và hiển thị các chòm sao một cách hiệu quả.
Ứng dụng sử dụng D3.js để tạo bản đồ bầu trời đêm SVG. Dưới đây là một ví dụ đơn giản về quy trình kết xuất:
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 // Vẽ nền bầu trời
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 // Vẽ các ngôi sao và chòm sao
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 // Thêm tên chòm sao
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 // Vẽ đường chân trời
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 // Chuyển đổi RA và Dec thành tọa độ x, y
60 // Đây là một phép chiếu đơn giản và nên được thay thế bằng một phép chiếu thiên văn phù hợp
61 const x = (star.ra / 24) * width;
62 const y = ((90 - star.dec) / 180) * height;
63 return { x, y };
64}
65Ứng dụng xử lý các múi giờ và vị trí khác nhau bằng cách:
Mặc dù ứng dụng không trực tiếp tính đến ô nhiễm ánh sáng, người dùng nên nhận thức rằng:
Đường chân trời được tính toán dựa trên vị trí của người quan sát:
Ứng dụng tính đến sự biến đổi mùa trong các chòm sao có thể nhìn thấy bằng cách:
Khám phá thêm các công cụ có thể hữu ích cho quy trình làm việc của bạn