XYZタイルを表示したい
yossy4411地震アプリEarthQuakeの開発ログ#2です。
#1はこちら↓
地震のアプリを作る | おかゆグループ
きっかけ能登半島地震に被災したことから、災害対策アプリを作りたいと思いました。https://blog.okayugroup.com/2024/06/06/%e8%83%bd%e7%99%bb%e5%8d%8a%e5%b3%b6%e5%9c…
おかゆグループ はじめに
突然ですが、アプリに地図タイル（ラスタ地図）を表示したいと思ったことはありませんか？
一般的に使用されるラスタ地図で代表的なものがXYZタイルと呼ばれるものです。
XYZタイルとは一枚の大きな地図を何百等分にもして画像として提供しているものです。
これらの画像は定められた計算式に倍率、緯度、経度を通すことで取得が可能です。
HTMLではLeafletなどで簡単に表示することが出来ますが、C#で表示する方法はあまりないのです。
あったとしてもWPFやWinForms専用で、SkiaSharpに表示できるようなものはあまりありません。
作ってみよう
ないなら作るしかないですよね...w
以下のようにタイルデータを処理しています。
- メモリ消費
LRU(Least recently used)を使用して効率的に処理 - 画像ソース
OpenStreetMapは画像取得がうまく出来なかったため、地理院タイルを使用 - 投影法
広く使われている、メルカトル図法を使用
ソースコード (MapTilesController.cs)
表示してみよう
新たにXYZタイルを表示するためのレイヤーを追加しました。
以下のように表示処理を作っています。
- 先程のMapTilesControllerに取得を要求する
- データがない場合→MapTilesControllerがHTTPを通してタイルサーバーにリクエストを送信し、画像をキャッシュに保存する
データがある場合→取得済みの画像を返す - 返ってきた画像を
canvas.DrawBitmapで描画する
結果
しっかりと実行できているようですね！
拡大・移動時の読み込みもスムーズに行われています。
次回：軽量化！！
Follow me!
