リーフレットのThree.jsレイヤー

Question

現在、リーフレット用のオーバーレイレイヤーを構築しようとしています。オーバーレイは3Dコンテンツ（建物など）を表示することになっています。しかし、私は、オーバーレイ内のシーン内のものと同期して、リーフレット・マップ上の動きを維持することに問題がある。

これまでのキャンバスは地図コンテナと同じ大きさで、常に地図上にオーバーレイされます（位置は固定されています）。ユーザーが地図上でパンニングしているときに移動するには、（すべてのジオメトリを移動する代わりに）シーン内でカメラを移動したいと思います。位置Iでは、フラクタル位置（たとえば10進のgps座標を使用している場合）と闘うように見えるので、lat:0, lng:0からの距離を使用します。残念ながら、私はカメラの正しい位置（x、y、z）を得るための正しい数式を見つけるのに苦労しています。これまで

私の試み： https://jsfiddle.net/hg474d6r/7/（_handleMove関数は、関連するもの）

黒のドットが中心であり、あなたの参考のため。赤い点は静的なままにしておく必要があります。

私の公式/「計算」にはちょっとした問題がありますか、あるいはこのアプローチはまったく機能しませんか？

更新：更新進展とフィドルなど

Answer 1

それはカメラが固定ポイントを指しますことのように見えます。 カメラを動かすと、カメラベクトルの方向が変更されます。 だからあなたはこのParallaxe Effektを見るでしょう。