地図上でポイントの緯度経度を補正する(PowerApps ＆ BingMaps)

19967 ワード
bingmaps PowerApps bingmaps テキストリンク

この記事は、先に投稿した「PowerAppsでBingMapsを活用する時のお決まり計算をコンポーネントに」で作ったコンポーネントの活用サンプルです。

まずは出来上がりから

実業務では、外回りで新規活動先を見つけた時に現在位置をベースに登録するのと、登録済みの位置情報が間違っていた時に修正する機能として作っていますが、ここでは現在位置をベースに地図上の＋マークをスライダーで動かして、指定された位置の緯度経度を計算で取得し、新たにその緯度経度を中心とした地図を表示する形にしました。取得した緯度経度が間違っているとズレるので、正しく動いているかどうかわかる、という仕組みです（ちょっと無理があるか）。
長い記述になりましたが、ポイントは地図上ではピクセル数で計算して、距離や度数を出したい時にコンポーネントの出力を掛けて使う、というところです。


なお、このアプリではBingMapsの画像を取得するのにAPIキーが必要になります。お持ちでない方は、以下のページから登録・取得を行っておいてください。
Bing Maps Dev Center(https://www.bingmapsportal.com/)

作ってみよう

コンポーネントの読み込み

コンポーネントを読み込むには、新規アプリを開いた後で「ファイル」-「アプリの設定」-「詳細設定」-「コンポーネント」をオンにする必要があります。
設定したら、「挿入」メニューで「コンポーネント」というタブが現れるので、そこから「コンポーネントのインポート」を選び、前回の記事で保存したコンポーネントを選択します。
コンポーネントが読み込まれたら、「挿入」-「コンポーネント」から読み込んだコンポーネントを選び画面に挿入します。

ここではコンポーネントの名前が「Component1」だったので挿入されたコンポーネントは「Component1_1」になりました。

コントロールと変数

コントロール一覧

番号 コントロール名 種類 用途
0 Component1_1 コンポーネント 画面上表示されていませんが、コンポーネントコントロールです。
1 icoSetLocation アイコン 現在位置を使って表示をリセットします。
2 lblBaseLatitude ラベル 地図中央の緯度が表示されます
3 lblBaseLongitude ラベル 地図中央の経度が表示されます
4 MapSizeX テキスト入力 地図の幅（ピクセル）。あちこちから参照します。
5 MapSizeY テキスト入力 地図の高さ（ピクセル）。あちこちから参照します。
6 drpZoom ドロップダウン 地図のズームレベル。地図表示とコンポーネントに使います。
7 Image1 画像 地図を表示します。
8 SliderX スライダー 地図の座標と連動し、＋マーカーを動かします。
9 SliderY スライダー 地図の座標と連動し、＋マーカーを動かします。
10 icoMarker アイコン 移動先を示します。
11 btnChangeBaseLocation ボタン ＋マーカーの位置を新たな中央座標として表示をリセットします。
12 lblMovedPixelsLat ラベル ＋マーカーが中央から緯度方向に何ピクセル動いたか表示します。
13 lblMovedPixelsLon ラベル ＋マーカーが中央から経度方向に何ピクセル動いたか表示します。
14 lblMovedMeterLat ラベル ＋マーカーが中央から緯度方向に何ｍ動いたか表示します。
15 lblMovedMeterLon ラベル ＋マーカーが中央から経度方向に何ｍ動いたか表示します。
16 lblMovedDegreeLat ラベル ＋マーカーが中央から緯度方向に何度動いたか表示します。
17 lblMovedDegreeLon ラベル ＋マーカーが中央から経度方向に何度動いたか表示します。

変数一覧

変数名 変数の種類 用途
baseLatitude ローカル変数 地図中央の緯度を保持します。
baseLongitude ローカル変数 地図中央の経度を保持します。

コントロールの設定

0. Component1_1

プロパティ名 設定値 コメント
Latitude baseLatitude 変数に設定した緯度を基準にします。
ZoomLevel drpZoom.Selected.Value 変数に設定した緯度を基準にします。
Visible false 計算結果だけを使うので非表示にします。

1. icoSetLocation

icoSetLocation.OnSelect
//現在位置を変数にセット
UpdateContext({baseLatitude: Location.Latitude, baseLongitude: Location.Longitude});
//スライダーーをリセット
Reset(SliderX);Reset(SliderY);
//移動を反映するボタンを選択
Select(btnChangeBaseLocation)

2. lblBaseLatitude - 6. DrpZoom

番号 コントロール名 プロパティ名 設定値 コメント
2 lblBaseLatitude Text baseLatitude 表示のみ
3 lblBaseLongitude Text baseLongitude 表示のみ
4 MapSizeX Default 560 任意。地図表示、マーカー表示で使います。右側にスライダーの幅を残す必要があります。
5 MapSizeY Default 350 任意。地図表示、マーカー表示で使います。
6 DrpZoom Items [15,16,17,18,19] ある程度拡大したズームレベルに限定します。
Default 17 初期値は任意ですが、ここでは17にします。

7. 画像（Image1）

ImagesにBing Mapsの地図画像を取得します。
画像取得で使うURLの作成方法は、以下のページを参照してください。
Key=の後ろの部分には、別途取得したAPIキーを設定してください。
Microsoft Docs: Get a Static Map

Image1.Image
"https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/" & baseLatitude & "," & baseLongitude & "/" & drpZoom.Selected.Value & "?mapSize=" & MapSizeX & "," & MapSizeY & "&Key=YourAPIKey"
プロパティ名 設定値 コメント
ImagePosition Center 画像を拡大縮小しないで表示します。
Height MapSizeY テキスト入力コントロールに設定した値を参照します。
Width MapSizeX

8. SliderX

地図で表示されている位置情報を経度方向に移動するためのスライダーです。地図の中央を０と置きます。

プロパティ名 設定値 コメント
Default 0 現在の経度の位置を０にします。
Max RoundDown(MapSizeX/2,0) 地図の横幅の半分を、プラスの目盛りに振ります。
Min (SliderX.Max+1)-MapSizeX 地図の横幅からプラスの目盛りと０目盛りを除いた分をマイナスに振ります。
Width MapSizeX スライダーの横幅を地図に合わせます。
X Image1.X 地図に合わせます。
Y Image1.Y+Image1.Height 地図の下に合わせます。

＊注意点としては、Image1の位置を変更するときは、Image1のみ動かしてください。スライダーコントロールを動かしてしまうと、せっかく設定したX,Yの数式が無くなってしまいます。

9. SliderY

地図で表示されている位置情報を緯度方向に移動するためのスライダーです。地図の中央を０と置きます。

プロパティ名 設定値 コメント
Layout Vertical スライダーを縦にします。
Default 0 現在の経度の位置を０にします。
Max RoundDown(MapSizeY/2,0) 地図の高さの半分を、プラスの目盛りに振ります。
Min (SliderY.Max+1)-MapSizeY 地図の高さからプラスの目盛りと０目盛りを除いた分をマイナスに振ります。
Height MapSizeY スライダーの縦の長さを地図に合わせます。
Width SliderX.Height スライダーの幅をSliderXの高さに合わせます。
X Image1.X+Image1.Width 地図の右に合わせます。
Y Image1.Y 地図に合わせます。

10. icoMarker

移動先の位置を表示します。

プロパティ名 設定値 コメント
Height 61 上下各30ピクセルの大きさ。
Width 61 左右も各30ピクセルの大きさ。
X Image1.X+(SliderX.Value-SliderX.Min+1)-RoundDown(icoMarker.Width/2,0) スライダーの位置にアイコンの中央を合わせます。
Y Image1.Y+(SliderY.Max-SliderY.Value+1)-RoundDown(icoMarker.Height/2,0) スライダーの位置にアイコンの中央を合わせます。

11. btnChangeBaseLocation

現在の地図中央の位置情報を移動先の位置情報に置き換えます。地図は再描画されます。

btnChangeBaseLocation.OnSelect
//位置情報を保持する変数を移動先にアップデートします。ここではラベルで計算した移動量（度数）を参照して加減しています。
UpdateContext({baseLatitude: baseLatitude+lblMovedDegreeLat, baseLongitude: baseLongitude+lblMovedDegreeLon});
//スライダーをリセットします。
Reset(SliderX);Reset(SliderY)

12. lblMovedPixelsLat - 17. lblMovedDegreeLon

番号 コントロール名 プロパティ名 設定値 コメント
12 lblMovedPixelsLat Text SliderY.Value 表示のみ
13 lblMovedPixelsLon Text SliderX.Value 表示のみ
14 lblMovedMeterLat Text SliderY*Component1_1.MeterPerPixel コンポーネントの出力を使用して、緯度方向の移動距離を表示します。
15 lblMovedMeterLon Text SliderX.Value*Component1_1.MeterPerPixel コンポーネントの出力を使用して、経度方向の移動距離を表示します。
16 lblMovedDegreeLat Text SliderY.Value*Component1_1.LatitudePer1000Pixels/1000 コンポーネントの出力を使用して、緯度の移動分を計算します。1000ピクセルあたりの度数なので、1000で割っています。
17 lblMovedDegreeLon Text SliderX.Value*Component1_1.LongitudePer1000Pixels/1000 コンポーネントの出力を使用して、経度の移動分を計算します。1000ピクセルあたりの度数なので、1000で割っています。

以上でアプリの設定は終わりです。

動かしてみよう

全て設定できたら動かしてみましょう。スライダーの移動に従って、緯度方向か経度方向の変化が、メートルや度数で表されましたでしょうか。
「移動を反映」ボタンを押すと、＋マークで示されていた部分が新たに地図中央になるはずです。

最後に

以上が簡単なコンポーネントの使用例です。
スライダーを２つ動かすのは面倒ですね。
@tomikiya さんの「PowerAppsでドラッグ&ドロップを実装する(https://qiita.com/tomikiya/items/591a7b3d69c70d56c70f)」という素晴らしいアイディアをうまく使いたかったのですが、PCでは問題なかったもののiPhoneでは上手く指を認識させられず、見送りました。

次はコンポーネント使用例の第二弾として、地図に複数ポイントを表示してタッチで選択する方法とコンポーネント化をご紹介したいと思うのですが、今回以上に複雑になるので書き切れるか自信がありません（すでに今回も破綻寸前ですし）。こちらも結局は各ポイントをピクセル位置に置き換えて、そこに透明なコントロールを重ねる、というのが基本コンセプトですので、待ちきれないから自分で作るよ、という方はお試しください。