図形を選択する方法~OpenLayersで図形を描画する⑥

JavaScript

前回までの記事でOpenLayersにおける図形の描画についてお伝えしました。

今回から描画した図形を選択・移動・変形させる方法についてお伝えします。
マーカーの置き直しや、多角形の角を増やしたりすることができます。

これらを実現することができれば、OpenLayersをお絵描きアプリのように使用することができます。

今回は「選択」についてお伝えします。

動作確認

触れます ↓ ↓ ↓ ↓ ↓

(マーカー画像の初回読込に数秒かかるかも)

ソースコード

ソースコードはこちらになります。

動作方法

マーカーの選択

マーカーを2つ配置します。

「選」ボタンを押下し、選択モードに移行し、マーカーをクリックします。

青いマーカーが赤いマーカー画像に切り替わりました。
これがマーカーの選択です。

マーカー以外の選択

多角形を2つ描画します。

「選」ボタンを押下し、選択モードに移行し、片方の図形をクリックします。

選択時のスタイルが適用されました。
こちらがマーカー以外の選択状態になります。

解説

選択モードのスタイルを設定する

125~173行目の処理で図形が選択された際のスタイルを設定しています。

線は水色、塗りつぶしは薄い白色、マーカー画像は赤色の別画像を使用するように指定しています。

選択ボタンの追加

464~502行目でボタンの定義を行っております。

495行目からの処理で、ボタンが押下された際に選択モードに移行する、changeMode()をコールしております。

523行目の処理でボタンを地図上に追加しております。

選択モードへ移行

647~667行目で選択モードと描画モードの切り替えを行っております。

前回までの記事でお伝えした「図形描画モード」と今回の「選択モード」の切り替えです。

選択モードの移行に必要な処理は以下になります。

  • DrawInteractionの除去
  • SelectInteractionの追加

これらの処理を行うことにより、図形描画モードから選択モードに移行しております。

まとめ

今回はOpenLayersにおいて、図形を選択する動作についてお伝えいたしました。

選択というと、Excelを使用している方からすれば「できて当然」の動作です。

しかし、OpenLayersにおいては上記でお伝えしたように、1つ1つソースコードで指定しない限り実現できません。
OpenLayersプログラミングの難しさを象徴しているとも言えます。

今回お伝えした「図形を選択する」という動作は、図形の移動や変形につながる重要なステップですので、マスターしておきましょう!

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

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

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

    コメント

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