svg - 球体マップ変換

Question

Raphael JS を使用して、スクロール可能でズーム可能な世界地図を表示していますが、これは正常に機能しています。しかし、地球の 2D 表現は歪んでしまいます。可能であれば、マップを変形して、上と下が挟まれるようにして、マップを地球をもう少し代表するものにしたいと考えています。Raphael のマトリックスを使用してそのような効果を達成することは可能ですか、またはそれをより深くハッキングして手動変換を挿入することは可能ですか?

Answer 1

Raphael の変換 (または SVG のネイティブ マトリックス変換) では、この効果を実現できません。Raphael は優れたベクター描画ライブラリですが、その上でマップを使用しようとすることは、GIS を使用する必要があるときに Illustrator を使用することにいくらか似ています。可能ですが理想的ではありません。

IE 8 =< サポートを失う余裕がある場合、d3.jsは地理的投影をサポートする SVG 視覚化ライブラリです。このデモを見てみましょうhttp://mbostock.github.com/d3/talk/20111018/azimuthal.html

それ以外の場合は、このhttp://en.wikipedia.org/wiki/File:BlankMap-World6.svgなど、ニーズにより適した投影法を使用したマップのソースを入手することをお勧めします。しかし、その場合、緯度経度をピクセルに変換するのはより困難になります。