JavaScript 矢印で強調する方法～OpenLayersで図形を描画する④
地図を表示する際、ある地点を強調したくなるときがあります。 マーカーを使用することで目印とすることができますが、矢印をしようするとさらに強調することができます。 実際にやってみた 実行結果はこんな感じになります。 鳥取砂丘に配置されたマーカ...
JavaScript 
正規表現 正規表現置換の考え方
基本 下記の文字列があります。 あいうえおかきくけこさしすせそたちつてとなにぬねの 上記の文字列を逆順（あいうえお→おえういあ）に並べ替える場合、以下の正規表現を使用します。 置換前： ^(.)(.)(.)(.)(.)$ 置換後： $5$4...
JavaScript Webページ上にに地図を表示する（OpenLayers）【無料】
ブログ内でお店の宣伝をするとき、地図をWebページ上に載せたくなるときがあります。 今回の方法を用いることで、手軽にWebページに地図を表示させることができます。 実際にやってみた 以下のHTMLをWebページに記載するだけです。地図データ...
JavaScript 図形を削除する方法～OpenLayersで図形を描画する⑬
今までの記事で、図形を描画する方法についてお伝えしてきました。 今回は誤って描画してしまった図形を削除する方法をお伝えします。 動作確認 まずは結果をご覧ください。実際に触れます ↓ ↓ ↓ ↓ ↓ // 図形を採番するための変数 var ...
JavaScript 図形を変形する方法～OpenLayersで図形を描画する⑨
一度描画した線や円などの図形を変形させる場合はmodifyを使用します。 modifyを使用すると、形を確定させた後でも図形描画のやりなおしができます。 動作確認 まずは結果をご確認ください。描画した線や多角形を変形できることを確かめられま...
正規表現 正規表現で「～で始まる」を行う方法
エンジニアをやっていると、下記のようなことはございませんか？ 大容量のログファイルから、'2019-08-25'など特定の日付の行のみ取り出したい CSVファイル内で、行の先頭が○○の行のみ取り出したい ソースコード内で、行頭が'//'（コ...
JavaScript 長方形を変形する方法～OpenLayersで図形を描画する⑩
前回の記事で図形の変形についてお伝えしましたが、長方形については描画時とは異なる変形方法になってしまいます。 長方形について、描画時と同じ方法で変形できるようにソースコードを修正していきます。 動作確認 まずは結果をご確認ください。 // ...
正規表現 正規表現でキャメルケースとスネークケースを変換する方法
前回の記事で、アルファベットの大文字と小文字を相互に変換する方法についてお伝えしました。 正規表現でアルファベットの大文字⇔小文字変換を行う方法 今回はこれを応用してキャメルケース⇔スネークケースの変換を行います。 キャメルケース Java...
JavaScript 固定画像の移動方法～OpenLayersで図形を描画する⑧
固定画像は、長方形オブジェクトと、画像レイヤーの二重構造になっているため、移動・変形させようとすると少しコツがいります。 描画する図形全てにIDをふり、長方形と画像の二重構造をリンクさせます。 動作確認 まずは結果から ↓ ↓ ↓ ↓ //...
JavaScript 図形を選択する方法～OpenLayersで図形を描画する⑥
前回までの記事でOpenLayersにおける図形の描画についてお伝えしました。 今回から描画した図形を選択・移動・変形させる方法についてお伝えします。マーカーの置き直しや、多角形の角を増やしたりすることができます。 これらを実現することがで...