線のスタイルを設定する方法~OpenLayersで図形を描画する⑭

JavaScript

今までの記事においてOpenLayersで図形を描画する方法についてお伝えしました。
しかし、描画された図形の線の色は「赤」、線幅は「2px」で固定されていました。

描画前および描画後に、線のスタイル変更ができるように修正を行ってまいります。

動作確認

こちらは実際に動作します。↓ ↓ ↓ ↓ ↓ ↓ ↓

Stroke Width:
Stroke Color:

線幅

①線描画モードに移行します。

②地図上をクリックすることで、線を描画します。このとき、「Stroke Width」のドロップダウンリストが「2」に設定されています。

③線が幅「2」で描画されます。

④「Stroke Width」を「8」に変更してもう一つ線を描画します。

⑤線幅が「8」で、線が描画されます。
⑥選択モードに移行し、最初に描画した線を選択します。

⑦「Stroke Width」のドロップダウンリストを「1」に設定します。

⑧選択された線の幅が「1」になり、細く表示されています。

⑨範囲選択(Ctrl + ドラッグ)で2つの線を選択します。

⑩2つの線が、選択状態になります。
⑪この状態で、「Stroke Width」を「2」に設定します。

⑫2つの線の幅が、同時に「2」に設定されます。

線の色

線色の設定について、基本的な操作は線幅のときと同じです。

①線描画モードに移行します。

②地図上をクリックすることで、線を描画します。このとき、「Stroke Color」のドロップダウンリストが「red」に設定されています。

③赤色の線が描画されます。

④「Stroke Color」を「blue」に設定して、もう一つ線を描画します。

⑤青色の線が描画されます。

⑥選択モードに移行し、最初に描画した線を選択します。
ちなみに赤色の線を選択した場合、「Stroke Color」のドロップダウンリストが自動的に「red」になるよう、制御を入れています。

⑦「Stroke Color」を「green」に設定します。

⑧選択した線が緑色になります。

⑨範囲選択(Ctrl + ドラッグ)で2つの線を選択します。

⑩2つの線が選択された状態で「Stroke Color」を「black」に設定します。

⑪2つの線の色が黒色に変更されます。

ソースコード

解説

ドロップダウンリスト

線幅と線色を制御できるようにするため、OpenLayersの外にドロップダウンリストを配置しています。
24~45行目に定義しています。

drawend

784~788行目、描画後に発生する「drawend」イベント内で、ドロップダウンリストの値を取得し、図形(feature)のプロパティに設定します。

※「$(“#strokeWidth”).val()」 はjQueryの処理で、idが「 strokeWidth 」のドロップダウンリスト(select要素)の値を取得します。

styleFunction

描画された図形(feature)のスタイルを設定する処理です。

69~70行目で線幅と線色をfeatureの「strokeWidth」「strokeColor」からそれぞれ取得するようにしています。
※本投稿まで、この箇所は「線幅:2、線色:赤」で固定でした。

96~97行目の矢印のスタイル、128~129行目でその他図形のスタイルについても同様の処理を行っております。

図形選択時

862~873行目の処理は、図形が選択された際に発生するイベントです。

ここで選択された図形(feature)のプロパティから、「strokeWidth」「strokeColor」を取得し、各ドロップダウンリストに値を設定しています。

※複数の図形(feature)が選択された場合は、先頭の1つのスタイルが設定されます。

ドロップダウンリストの値が変わったとき

1065~1073行目でドロップダウンリストの値が変わったときの処理を定義しています。

値変更時に、選択モードの場合、選択された図形(feature)をループさせ、ドロップダウンリストの値をプロパティに設定しています。

まとめ

今回は描画した線のスタイルを設定する方法についてお伝えしました。

せっかく 地図上に 自由におえかきができるのに、スタイルが固定されていては自由度が下がりますよね。

今回の修正で、OpenLayersにおける図形描画の自由度が上がったと思います。

次回は、図形の塗りの色と透明度についてお伝えいたします。

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

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

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

    コメント

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