OpenLayers

今までの記事においてOpenLayersで図形を描画する方法についてお伝えしました。しかし、描画された図形の線の色は「赤」、線幅は「2px」で固定されていました。 描画前および描画後に、線のスタイル変更ができるように修正を行ってまいります。...

前回の記事でWebページ上に地図を表示させる方法をお伝えしました。 今回は表示した地図上にオリジナルのボタンを配置します。 実際にやってみた 前回の記事内のソースコードにボタンについての追記を行いました。 <meta http-equiv=...

今までの記事で、図形を描画する方法についてお伝えしてきました。 地図上に線を引いたり、円を描いたり、マーカーを配置することにより、ある地点を強調することが可能になります。 業務系のアプリケーションにおいて、一度描画した図形はファイルやデータ...

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

地図を表示する際、ある地点を強調したくなるときがあります。 マーカーを使用することで目印とすることができますが、矢印をしようするとさらに強調することができます。 実際にやってみた 実行結果はこんな感じになります。 鳥取砂丘に配置されたマーカ...

ブログ内でお店の宣伝をするとき、地図をWebページ上に載せたくなるときがあります。 今回の方法を用いることで、手軽にWebページに地図を表示させることができます。 実際にやってみた 以下のHTMLをWebページに記載するだけです。地図データ...

今までの記事で、図形を描画する方法についてお伝えしてきました。 今回は誤って描画してしまった図形を削除する方法をお伝えします。 動作確認 まずは結果をご覧ください。実際に触れます ↓ ↓ ↓ ↓ ↓ // 図形を採番するための変数 var ...

一度描画した線や円などの図形を変形させる場合はmodifyを使用します。 modifyを使用すると、形を確定させた後でも図形描画のやりなおしができます。 動作確認 まずは結果をご確認ください。描画した線や多角形を変形できることを確かめられま...

前回の記事で図形の変形についてお伝えしましたが、長方形については描画時とは異なる変形方法になってしまいます。 長方形について、描画時と同じ方法で変形できるようにソースコードを修正していきます。 動作確認 まずは結果をご確認ください。 // ...