قم بإنشاء خريطة سماء ليلية تفاعلية بتنسيق 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يتعامل التطبيق مع المناطق الزمنية والمواقع المختلفة عن طريق:
بينما لا يأخذ التطبيق تلوث الضوء في الاعتبار بشكل مباشر، يجب أن يكون المستخدمون على علم بأن:
يتم حساب خط الأفق بناءً على موقع المراقب:
يأخذ التطبيق في الاعتبار التغيرات الموسمية في الكوكبات المرئية عن طريق:
اكتشف المزيد من الأدوات التي قد تكون مفيدة لسير عملك