地図上にテキストを書き込む方法~OpenLayersで図形を描画する②

JavaScript

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

これでOpenLayersがお絵かきアプリに早変わりします。

今回はさらに深堀りしていきます。
OpenLayersの描画機能では以下のことができます。

今回は「テキストを書き込む」についてお伝えいたします。

実際にやってみた

まずは結果から、触ってみてください↓↓↓

ソースコードは以下になります。

矩形描画

「□」ボタン押下で矩形描画モードになります。
1回目のクリックで基準頂点の座標を指定し、2回目のクリックで対角線の頂点の座標を指定します。

テキスト描画

「T」ボタンを押下するとテキスト描画モードになります。
描画方法は矩形描画モードと同様ですが、描画後に地図上にポップアップが表示され、テキストが入力できるようになってます。

解説

前回の記事からボタンを2つ追加しました。

  • 「T」ボタン
  • 「□」ボタン

「□」ボタン押下することで、矩形描画モードになります。2回のクリックで頂点と対頂点を指定することで長方形を描画します。

矩形と言っても、実体は前回の記事でお伝えした「多角形」です。344行目でgeometryFunctionにcreateBoxを指定することにより矩形描画モードに移行することができます。

Windows標準の「ペイント」で範囲選択する操作に似ています。

「T」ボタン押下で、今回のテーマである「テキストを書き込む」を実現することができます。

「T」ボタン押下時のdraw処理は矩形描画とおなじですが、テキスト書き込みモードの場合、矩形描画直後にポップアップを表示して、テキスト入力ができるようになっています。

381〜408行目でOpenLayersのOverlay機能とBootstrapのpopover機能を組み合わせて、地図を覆うようにポップアップを表示しています。

ポップアップ内にはhtmlを直接記入することで、表示内容を自由に制御することができます(392行目)。

今回はテキストエリアとOKボタン、キャンセルボタンを用意し、OKボタン押下時に入力された内容を、テキストオブジェクト(featureといいます)のtext属性に付与しています。

46〜68行目の処理で、featureに設定されたtext属性の内容を地図上に表示するためのスタイル設定を行なっております。

ここでは細かな設定は行なっておりませんが、フォント、フォントサイズ、文字色など、テキスト表示に必要な設定はこちらで行うことができます。

まとめ

今回はOpenLayersの矩形描画とポップアップ表示機能を用いて、テキスト書き込みを実現しました。

自分のウェブサイト上の地図に、オリジナルの文字を書き込むことができれば、地図上にメモを書き残すことができますね。

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

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

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

    コメント

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