ズームとパンが存在し、マーカーはスケーリングされませんが、それぞれの位置に変換される Google マップのようなアプリケーションを作成したいと考えています。
私のプロジェクトでは、Pdf/image/svg ファイルに JSON データ (x、y 座標) をプロットする必要があります。データをズームすると、pdf/image/svg ファイルのみがズームされ、そのデータはそれぞれの位置に変換されますが、スケーリングしないでください。
関連する例は見つかりませんでした。すべての例は、キャンバスまたは svg 要素のプロット データのようなものです..
私のクエリは.... この種のアプリケーションは Canvas + javascript で作成できますか? または、他の言語またはプラグインを使用する必要がありますか?
きっとできます。
キャンバスに json (その時点で geoJson ) をロードするマッピング システムを設計しました。シンボルなど。私は意図的に拡大縮小しませんでした。
事実上、すべての操作はデバイス単位 (ピクセル) と実世界単位 (論理) のいずれかになります。
すべてのデータを論理単位で保存し、描画するときにデバイス単位に変換します。座標系には違いがあるため (画面は左上を 0,0 として使用)、2 つの間のオフセットを計算する必要があります。スケールを追加すると、ズームできます。
初期スケールは、画面の幅 / データの幅です。単一のスケール値を使用し、それによって X と Y をスケールして、ズームしたときに引き伸ばされないようにします。
上、左、スケールを保存したら、次の方法で論理単位をデバイス単位に変換できます。
デバイス ポイント x = (論理ポイント x - 左) * スケール
デバイス ポイント y = (トップ - 論理ポイント y) * スケール // デカルト系補正!
論理ユニットに戻る
論理点 x = (デバイス点 x/スケール) + 左
Logical point y = top - (device point y/scale) // デカルト系補正!
それが役立つことを願っています!