図形を複数選択する方法~OpenLayersで図形を描画する⑪

JavaScript

今までは1つの図形を選択して、移動、変形させる方法についてお伝えしましたが、複数の図形を同時に選択することができれば、同時に移動させることが可能です。

動作確認

操作方法

クリック選択

選択モードのときにShiftを押しながら図形を選択すると複数選択することができます。

Shiftを押しながら未選択のマーカーをクリックします。

範囲選択

Ctrlを押しながらドラッグ操作を行うことで範囲選択を行うことができます。

複数選択した図形は同時に移動させることができます。

ソースコード

解説

今回はクリック選択と範囲選択についてお伝えしましたが、クリック選択については特にソースを修正する必要はありません。

範囲選択を行うためにはDragBoxというInteractionを使用します。

681行目でDragBoxの初期化を行っています。
「condition: ol.events.condition.platformModifierKeyOnly」の指定を行うことで、Ctrlキーを押下しながらドラッグ操作を行うことができます。

685~697行目がドラッグ完了時の処理です。
selectedFeaturesにBox内の図形をpushすることで、選択状態にすることができます。

まとめ

今回はDragBoxについて解説しました。

複数選択を行うことができれば、同時に移動させたり、削除したり、色を変更できたりと様々な応用ができます。

OpenLayersで図形を選択・移動・変形する方法シリーズは以上です。

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

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

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

    コメント

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