矢印で強調する方法~OpenLayersで図形を描画する④

JavaScript

地図を表示する際、ある地点を強調したくなるときがあります。

マーカーを使用することで目印とすることができますが、矢印をしようするとさらに強調することができます。

実際にやってみた

実行結果はこんな感じになります。

鳥取砂丘に配置されたマーカーを矢印でより強調することができます。

ソースコードはこんな感じです。

実際に動作するものがこちらです。

解説

今回お伝えした矢印は、本シリーズの①でお伝えした「線」の先端に矢印の画像を加えたものです。
そのため、あまり新しい概念は出てきません。

ポイントは73行目~94行目の処理です。
ここで線オブジェクトに対して先端に画像を加える処理を行っております。

81行目~83行目は画像の角度を計算しています。Math.atan2は三角関数の1つです。難しい説明は省略しますが、2地点の座標を与えることで、画像をいくら回転させればよいかを求めることができます。

86行目は線オブジェクトに対して画像を加える処理です。
Styleを設定する際に、geometry属性を指定することで、「組み合わせパーツ」のように2つの図形をセットに扱うことができます。

この仕組みを使えば「二重線」や「吹き出し」など図形を用いたさまざまな表現ができるようになります。

まとめ

今回は「図形を描画する」の応用で、矢印の描画についてお伝えしました。

線オブジェクトと画像オブジェクトを組み合わせることで、表現できる図形の幅が格段に広がります。

単体の図形では表現できないこともこの仕組みを使えば表現できるようになります。

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

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

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

    コメント

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