perspectiveはおしゃれだけど、ズレて見えるんです
『四次元年表』という、年表と地図のハイブリッドをつくっている。
前回は「ナニもない」宇宙空間をflutter_echartsの3D Scatterで表現したのだけれど、
今回は、地球上の話なので、地図や地球儀と組み合わせたい。
まずxy平面に世界地図を書く
EChartsはもともとjsのライブラリなので、jsonのデータが読める。
当然、geo-jsonも読めるのだが、これがFlutterではサポートされていないらしい。
（イヤ、私が下手だというだけの話かもしれないが）
じゃあ、geo-jsonとjsonは何が違うか。
ということで、geo-jsonから、polygon系のデータをそぎ落として、
海岸線を点描する経緯度データだけを残す、という暴挙に出た。
車輪の再発明どころではない、せっかくのタイヤを外して、ガラガラ走る感じである。
でもうれしいことに、これで世界地図が描けるんだな。
よぶんな情報がなくてすっきりしているから、むしろ私はこのほうがいい。
読み込むデータは、経緯度と「時」
ということで、xy平面には経緯度のデータ、そしてz軸は時間軸になる。
ところがここで問題が。
xy平面を真上から見下ろしたとき、データがなんだかズレるのだ。
なんでだ！
よく見ると、z軸が斜めに表示されている。
近くは大きく、遠くは小さく、なんと遠近法を採用しているらしい。
本来データ分析の可視化に使うべき3DScatterで、
こんな錯視を誘発するような表現法がdefaultなのはまずくないか、
とか思いながら、修正。
projection: 'orthographic'
grid3D: {
viewControl: {
alpha: 40,
beta: -60,
projection: 'orthographic' <=ここ
}
},
これで、真上から見たとき、どの時代のデータも、地図上に正しくプロットされる。
意味がわからない？
これが正しく表示されている状態。
defaultのこちらだと、例えばオーストラリアのシドニーにあるはずの表示が
ニュージーランドより東にズレて見える。
原因は斜めに表示されてるz軸。
次回は地球儀に表示する記事を書きます。
四次元年表 in Cosmos
四次元年表
三次元・四次元表示 四次元年表の使い方
四次元年表for Mobile
Discussion