OpenLayersで図形を描画する①~基本

JavaScript

OpenLayersでは地図内にお絵かきができます。
以下のようなお絵かきが可能です。

  • マーカーの配置
  • 線を引く
  • 円で囲む
  • 三角形や四角形などの「多角形」で囲む
  • テキストを書き込む
  • 矢印で強調する
  • 固定画像の配置
  • フリーハンドで線を書き込む

今回は「マーカーの配置」、「線を引く」、「円で囲む」、「多角形で囲む」をやってみます。

実際にやってみた

触れます↓↓↓↓

地図左側に配置した各ボタンを押下すると描画モードになります。

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

以下のように図形を描画することができます。

  • 「※」ボタン……マーカー配置モードに
    地図上をクリックすることでマーカーを配置できます。
  • 「<」ボタン……線描画モード
    地図上で線を引きたい2点をクリックすることで描画できます。
    ダブルクリックで描画を終了します。
  • 「○」ボタン……円描画モード
    中心点をクリックで指定し、その後円の大きさを指定します。
  • 「△」ボタン……多角形描画モード
    地図上に頂点となる座標をクリックで指定することで、多角形を描画できます。

解説

14~48行目で図形に適用するスタイルを定義しています。OpenLayersで描画する図形には以下のようなスタイルを適用することができます。

  • 線の幅(stroke width)
  • 線の色(stroke color)
  • (円、多角形の)塗りつぶしの色(fill color)
  • マーカー画像の配置もスタイルの一種

51~55行目では図形を描画するためのレイヤーを定義しています。図形を描画するためには、地図が表示されている画像レイヤーとは別のレイヤー(Vector Layer)を用意する必要があります。

59~196行目では地図左側のボタンを定義しています。詳細は前回の記事を参考にしてください。87、122、157、192行目で押下時の処理を記載しています。

199~222行目では地図の初期化を行っています。上の処理で定義したボタンの定義やVector Layerの定義はここで使用します。

225~247行目が今回の本題である描画処理です。ol.interaction.Drawという機能を使用します。
※interactionとは地図上で行う直感的な操作のことです。標準定義されているものに以下のようなものがあります。

  • 地図上でドラッグすることで移動する
  • 地図上をダブルクリックすることでズームインする
  • Shiftを押下しながらドラッグ&ドロップ操作で範囲拡大
  • Shift + Alt + マウスドラッグで地図を回転する

mapオブジェクトに対してDrawをaddInteractionすることで、地図を「描画モード」にすることができます。

描画モードを定義する際、「どのような図形を描画するか」という指定が必要です。以下の種類の描画モードを指定することができます。

  • 点(Point)
  • 線(LineString)
  • 円(Circle)
  • 多角形(Polygon)

また今回は、どの描画モードか明示的にするために、現在の描画モードのボタンの文字を赤色で表示するようにしています。(245~246行目)

まとめ

今回はボリューミーな内容になりました。

しかし、これはOpenLayersが高機能たる所以です。
本来、このような描画処理を実現するためには、自作でゴリゴリJavaScriptを記述する必要があります。
OpenLayersでは図形を描画する機能が標準で備わっていますので、比較的簡単なソースで「おえかき」が可能になっています。

Drawにはまだまだ面白い機能が備わっているので次回以降お伝えしてまいります。

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

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

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

コメント

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