固定画像の移動方法~OpenLayersで図形を描画する⑧

固定画像は、長方形オブジェクトと、画像レイヤーの二重構造になっているため、移動・変形させようとすると少しコツがいります。

描画する図形全てにIDをふり、長方形と画像の二重構造をリンクさせます。

動作確認

まずは結果から ↓ ↓ ↓ ↓

画像を移動させることが確認できます。

操作方法

画像を描画します。

画像を選択し、ドラッグ&ドロップします。
このとき、画像は追従しません。

マウスを離した場所に、画像が移動します。

ソースコード

ソースコードはこちらです。

解説

IDを採番する

画像は長方形オブジェクトと画像レイヤーの二重構造のため、相互に認識するために、図形に対してIDを採番します。

25行目でグローバル変数を宣言しています。
この変数は図形を描画するたびに1ずつ増えていくようにしたいので、描画後もその値を保持する必要があります。

574行目の図形描画後の処理で以下のように記述することで、描画した図形に対してIDを採番できます。

※ちなみに、「++featureId」は数字を1あげて参照するという意味になり、
「featureId++」と記述すると参照してから数字を1あげるという意味になります。

そして、597行目で画像レイヤーの属性に、図形に対して採番したIDと同じ値を設定します。

これにより私のソースコードの世界では、長方形オブジェクトと画像レイヤーがリンクされました。
IDをたどることにより、お互いを認識できる状態です。
一心同体、一蓮托生です。

移動追従

画像の長方形が移動された場合、その座標に画像も移動されなければなりません。

681行目、「translateend」という図形移動が完了した際のイベントを捕捉します。

移動された図形が画像オブジェクトの場合、以下の処理を行います。

  • 元の座標にあった画像レイヤーを削除(691行目)
  • 新しい座標に画像レイヤーを配置する(694~708行目)

この動作により、長方形の移動に追従して画像レイヤーも移動します。
(実際は古い座標の画像を消して、新しい場所に描画し直している)

まとめ

画像移動については二重構造になっているため、移動・変形にはコツが必要でした。

今回新たに「ID」という概念を用いました。

マーカーなど、描画した図形を管理する用途があるのであれば必須の概念になります。

IDを採番すれば、ソースコードのどこからでも対象の図形やレイヤーオブジェクトにアクセスできるようになり、非常に便利です。

IDについては今後も使用して参ります。

OpenLayersについての別記事もぜひご覧ください!

①図形を描画する(マーカー、線、円、多角形)
②テキストを書き込む(矩形)
③フリーハンドで書き込む
④矢印で強調する
⑤固定画像を配置する
⑥図形を選択する
⑦図形を移動させる
⑧固定画像の移動
⑨図形を変形させる
⑩長方形を変形させる
⑪図形を複数選択する
⑫図形をJSON形式で保存&読込
⑬図形を削除する
⑭線のスタイルを設定する
⑮図形の色を設定する

【入門】地図を表示させる方法
ボタンを配置する方法
ミニマップを表示する方法

    コメント

    タイトルとURLをコピーしました