図形を削除する方法~OpenLayersで図形を描画する⑬

今までの記事で、図形を描画する方法についてお伝えしてきました。

今回は誤って描画してしまった図形を削除する方法をお伝えします。

動作確認

まずは結果をご覧ください。実際に触れます ↓ ↓ ↓ ↓ ↓

マーカー削除

まずマーカーを描画します。

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

「消」ボタンを押下することで、マーカーを削除できます。

複数同時削除

選択モード時に、Ctrlキーを押しながら地図上でドラッグすることで、範囲選択を行うことができます。

「消」ボタンを押下することで、複数のマーカーを同時に削除することができます。

マーカー以外の図形を削除

マーカー以外の図形についても同様にやってみます。
まず、図形を描画します。

選択します。

「消」ボタンを押下することで、削除できます。

ソースコード

解説

今回は617~659行目を追加しました。
削除ボタンの追加と、ボタンが押下された場合の処理です。

646~655行目の記述が、ボタンが押下された場合の処理です。

以下の処理で、現在されている図形を取得します。

以下の処理で、対象の図形を削除します。

ただし、画像オブジェクトの場合、裏側で表示しているレイヤーについても削除する必要があるため、
649~651行目の処理を行っています。

まとめ

今回は図形削除の方法についてお伝えしました。

図形の描画、変形、移動に加え、削除が可能になりました。

OpenLayersはお絵描きソフトではないのですが、このように図形の出し入れが可能です。
ただ地図を表示するだけでなく、任意の地点を自由に強調表示することができます。

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

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

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

    コメント

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