私は D3 を使用して、ユーザーが地球儀のようにマウスで「回転」できる正投影の世界地図を作成しています。
Firefox でレンダリングが不安定になる問題が発生したため、R の Douglas-Peuker アルゴリズムの実装を使用してマップ機能を簡素化しました。これを geoJSON にダンプし、次の例のように D3 でレンダリングしました。 net/cmksA/8/ . (以下で説明する問題は単純化されていない機能では発生しないことに注意してください。ただし、単純化しないと Firefox は使用できません。)
Firefox のパフォーマンスは依然として低い (改善されている) が、新しい問題が忍び寄ってきた。インドネシアが地球のほぼ中心になるように地球をパンすると、ポリゴンの 1 つが地球全体をカバーするように変換される。北アメリカと南アメリカが中心の場合、同じ問題が発生します。
パンニングの一環として、次の関数を使用して地球を再投影/再描画します (jsfiddle の 287 行目)。
function panglobe(){
var x=d3.event.dx;
var y=d3.event.dy;
var r = mapProj.rotate();
r[0] = r[0]+lonScale(x)
r[1] = r[1]+latScale(y)
mapProj.rotate(r);
countries.attr("d",function(d){
var dee=mapPath(d)
return dee ? dee : "M0,0";
});
}
ヘルプ/洞察/アドバイスをいただければ幸いです。乾杯