Membetulkan Isu Lukisan GeoJSON D3.js: Bagaimana untuk Membetulkan Susunan Penggulungan?

D3.js Salah Melukis GeoJSON: Masalah Tertib Penggulungan

Apabila cuba menggambarkan wilayah Rusia menggunakan data geoJSON, pengaturcara menghadapi masalah di mana D3.js melukis satu segi empat tepat hitam dan bukannya garis peta yang dikehendaki. Percanggahan ini timbul daripada isu dengan tertib penggulungan koordinat dalam fail geoJSON.

Memahami Tertib Penggulungan

Koordinat GeoJSON boleh diatur sama ada mengikut arah jam atau lawan jam , mewakili bahagian dalam atau luar sesuatu bentuk. Kebanyakan alatan dan pengesah mengabaikan tertib ini, tetapi D3.js menggunakan matematik ellipsoidal, yang memerlukan penggulungan yang betul untuk mengelakkan daripada mencipta poligon terbalik yang meliputi seluruh dunia.

Mengenal pasti Isu

Setelah memeriksa laluan SVG, ternyata beberapa laluan dilukis dengan tepat manakala yang lain meliputi seluruh planet kecuali ruang yang dimaksudkan. Ini kerana data tersebut mengandungi gabungan kedua-dua belitan mengikut arah jam dan lawan jam, membawa D3.js untuk menganggap poligon terbalik sebagai segala-galanya di planet ini yang bukan kawasan sasaran.

Menyelesaikan Isu

Untuk menyelesaikan masalah ini, koordinat mesti disusun semula. Penyelesaian yang mudah ialah menggunakan perpustakaan turf.js:

<code class="js">var fixed = features.map(function(feature) {
    return turf.rewind(feature,{reverse:true});
});</code>

Ini memundurkan setiap poligon untuk mengikut tertib penggulungan yang betul, seperti yang dinyatakan oleh spesifikasi geoJSON. Walau bagaimanapun, D3.js menggunakan tertib penggulungan yang bertentangan, jadi parameter terbalik ditetapkan kepada benar.

Melaraskan Paparan Peta

Selepas membetulkan tertib penggulungan, pelarasan selanjutnya boleh dibuat untuk meningkatkan penampilan peta. Dengan menambahkan kaedah fitSize pada unjuran, peta boleh diskalakan dan diterjemahkan untuk mencapai paparan yang lebih sesuai.

Atas ialah kandungan terperinci Membetulkan Isu Lukisan GeoJSON D3.js: Bagaimana untuk Membetulkan Susunan Penggulungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!