図形を変形する方法~OpenLayersで図形を描画する⑨

一度描画した線や円などの図形を変形させる場合はmodifyを使用します。

modifyを使用すると、形を確定させた後でも図形描画のやりなおしができます。

動作確認

まずは結果をご確認ください。
描画した線や多角形を変形できることを確かめられます。

操作方法

多角形

多角形を描画します。

描画した多角形を選択します。

頂点ではない箇所をドラッグします。

ドラッグを終了すると変形が完了します。

もう一度選択し、頂点を付近にマウスを合わせます。

ドラッグすると、頂点座標の変更ができます。

円を描画します。

選択し、円周の線付近にマウスを合わせます。

ドラッグ操作を行うことで円の半径の修正が行えます。

線を描画します。

選択を行い、頂点でない箇所にマウスを合わせます。

ドラッグ操作を行うことで新たに頂点を増やすことができます。

次に頂点付近にマウスを合わせます。

ドラッグ操作を行うことで、頂点座標の変更することができます。

ソースコード

解説

今回の修正は680~682行目の3行だけです。

Modifyというinteractionを選択モード変更時に追加します。
featuresプロパティにselectedFeaturesを指定することで、選択された図形のみを変形の対象にすることができます。

1点注意点があります。

ModifyとTranslateを同時に使用する場合、Modify→Translateの順番でinteractionを追加してください。

逆の順番で追加するとModifyのinteractionが優先されて使いづらくなります。

まとめ

今回はModifyについてお伝えしました。これにより、一度描画した図形を描き直しすることができるようになりました。

描画した後に、微妙に座標がズレていることに気づいて修正できなければ大変不便ですよね。

しかし今回は課題が見つかりました。

長方形を変形しようとする場合、多角形と同じ修正方法が採用されるため、長方形が崩れてしまいます。
この動作は多くのユーザが困惑すると思いますので、次回の投稿で対策を打ってまいります

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

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

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

    コメント

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