D3.js رسم GeoJSON بشكل غير صحيح: مشكلة الترتيب المتعرج

عند محاولة تصور المناطق الروسية باستخدام بيانات GeoJSON، واجه المبرمجون مشكلة حيث يقوم D3.js برسم مستطيل أسود واحد بدلاً من الخطوط العريضة للخريطة المطلوبة. ينشأ هذا التناقض من مشكلة تتعلق بالترتيب المتعرج للإحداثيات في ملف GeoJSON.

فهم الترتيب المتعرج

يمكن ترتيب إحداثيات GeoJSON إما بترتيب اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة ، يمثل الجزء الداخلي أو الخارجي من الشكل. تتجاهل معظم الأدوات وأدوات التحقق من الصحة هذا الترتيب، لكن D3.js يستخدم الرياضيات الإهليلجية، التي تتطلب لفًا صحيحًا لتجنب إنشاء مضلعات مقلوبة تغطي الكرة الأرضية بأكملها.

تحديد المشكلة

عند فحص مسارات SVG، يتبين أن بعض المسارات مرسومة بدقة والبعض الآخر يغطي الكوكب بأكمله باستثناء المساحة المقصودة. وذلك لأن البيانات تحتوي على مزيج من اللفات في اتجاه عقارب الساعة وعكس اتجاه عقارب الساعة، مما دفع D3.js إلى التعامل مع المضلع المقلوب باعتباره كل شيء على الكوكب ليس المنطقة المستهدفة.

حل المشكلة

لحل هذه المشكلة، يجب إعادة ترتيب الإحداثيات. الحل المناسب هو استخدام مكتبة turf.js:

var fixed = features.map(function(feature) {
    return turf.rewind(feature,{reverse:true});
});

يؤدي هذا إلى إرجاع كل مضلع ليتبع ترتيب اللف الصحيح، كما هو محدد بواسطة مواصفات GeoJSON. ومع ذلك، يستخدم D3.js ترتيب اللف المعاكس، لذلك يتم ضبط المعلمة العكسية على القيمة true.

ضبط عرض الخريطة

بعد تثبيت ترتيب اللف، يتم إجراء المزيد من التعديلات يمكن إجراؤها لتحسين مظهر الخريطة. من خلال إضافة طريقة fitSize إلى العرض، يمكن تغيير حجم الخريطة وترجمتها للحصول على عرض أكثر ملاءمة.