図形の色を設定する方法~OpenLayersで図形を描画する⑮

JavaScript

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

※本投稿では図形の色のことをfillColor、透過性のことをOpacityと表現いたします。

描画前、および描画後にこれらを変更できるように、ソースコードを修正していきます。

動作確認

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

Stroke Color:
Stroke Width:
Fill Color:
Opacity:

描画前に設定する

①多角形描画モードに移行します。

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

③fillColorが赤色、opacityが0.25の多角形が描画されます。

④「Fill Color」を「blue」に、「Opacity」を「1」に設定してもう一つ多角形を描画します。

⑤fillColorが青色、opacityが1(透過性なし)で多角形が描画されます。

描画後に設定する

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

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

⑧fillColorが緑色に変更されました。

⑨続いて、「Opacity」を「0.75」に設定します。

⑩opacityが0.75に設定されました。(緑色が濃くなりました)

複数の図形に同時に設定する

⑪範囲選択(Ctrl + ドラッグ)で2つの多角形を選択します。

⑫2つの多角形が選択された状態で、「Fill Color」を「black」に設定します。

⑬2つの多角形のfillColorが黒色に設定されます。

ソースコード

解説

ドロップダウンリスト

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

drawend

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

styleFunction

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

150~152行目の処理で、プロパティに設定されたfillColorの値を使用します。

ドロップダウンリストから取得した値は「#FF0000」(赤)や「#0000FF」(青)という、
「#」に16進数が6桁続く形式になっています。

この値は2~3桁目が赤の強さ、4~5桁目が緑の強さ、6~7桁目が青の強さを表します。
RGB色空間といい、#000000が黒、#FFFFFFが白を表します。

「rgba(r,g,b,a)」という色の指定法を用いることにより、fillColorに対して透過性(opacity)を設定することができます。

ただしこの指定法を用いる際は、FF→255、F0→240のように、16進数を10進数に変換しなければなりません。

150行目ではparseInt関数を使用して、fillColorの2~3桁目を10進数に変換し、赤の強さを取得しています。

153行目で、RGBの各値とopacityの値を組み合わせ、rgba(r,g,b,a)の文字列を作成します。

図形選択時

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

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

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

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

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

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

まとめ

今回は描画した図形の色を設定する方法についてお伝えいたしました。

せっかく地図上に自由にお絵描きができるのに色が設定できないと、自由度が下がってしまいますよね。

OpenLayersでの図形描画について、私の知識を余すことなく、お伝えいたしました。
皆様のお役に立てれば幸いです。

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

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

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

    コメント

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