図形を移動させる方法~OpenLayersで図形を描画する⑦

JavaScript

前回の記事でOpenLayersで描画した図形を選択することについてお伝えしました。

しかし、選択ができるようになっただけでは、機能が増えた感じはないと思います。
移動ができることによって、「誤った場所に描画してしまった図形を置き直す」という新たな付加価値が出ます。

今回は図形移動機能についてお伝えします。
※固定画像の移動については別途対応が必要なため、別の記事にてお伝えします。

動作確認

まずは、完成形を触ってみてください。

描画した図形を選択し、移動できるようになっています。

ソースコード

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

動作方法

描画したマーカーを選択します。

画像には写ってませんが、選択したマーカー上ではマウスポインターが手のひらマークになります。(Chrome)

その状態で、ドラッグアンドドロップ操作を行うと図形を移動させることができます。

Excelなどで、図形を移動させる手順と全く同じです。

解説

今回追加したコードは644行目と、667~670行目の合計5行です。

変数定義

644行目でtranslate変数をグローバルで宣言しています。

グローバルで宣言しているのはaddとremoveをしやすくするためです。

Translateの初期化

667行目でtranslateを初期化しています。

今回は初期化の際に「features」属性の指定を行いました。
この属性にselectedFeaturesを指定することで、選択された図形のみが移動できるようになります。

初期化したtranslateは 670行目でaddInteractionすることで、地図上で使用可能になります。

まとめ

今回はOpenLayersで描画した図形を移動させる方法についてお伝えしました。

移動が可能になったことで、描画後に位置調整が可能になりました。

また、今回は固定画像の移動についてはお伝えすることができませんでした。
次回の記事でお伝えさせていただきます。

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

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

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

    コメント

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