Xamarin.Forms.Mapsで大量のPinを表示する方法

Question

• 前提・環境

Xamarin.Forms.Mapsを使用して地図を表示しています。
その地図にDBから取得したデータ（List<T>）をPinで位置を表示します。
以下は、抜粋かつ簡略化したコードです。

public class MyData
{
    public string Name
    {
        get; set;
    }
    public Position PosData
    {
        get; set;
    }
}

button.Clicked += (sender, e) => 
{
    List<MapData> datas = ≪データ取得≫;
    foreach(data in datas)
    {
        //mapはXamarin.Forms.Maps
        map.Pins.Add(new Pin { Label = data.Name, Position = data.PosData});
    }
};

• 困っていること

今の状態で問題なく表示はできるのですが、データ数が多いとボタンクリック後すべて終わらないと描画がされなく、操作不能状態です。

• やりたいこと

以前iPhoneの何かの地図で、検索したら該当箇所にPinが刺さっていくのを見ました。
pinが刺さる動作は順に刺さっていくイメージで、その間マップの操作は可能でした。
現状Androidであれば、ProgressDialogを表示してごまかしているのですが、できたら上記と同じようなことを実現したいと思っています。
勉強不足のためか、非同期でコントロールにアクセスするのができませんでした。
map.Pins.AddするたびにDoEvents()のような描画通知ができたりするのでしょうか？

Answer 1

大量のPinを Xamarin.Forms.Maps で扱う件

「大量」の定義にもよりますが、Xamarin.Forms．Maps は、沢山の Pin を登録して使うのに向いていません。これは Xamarin.Forms．Maps がラップしている Google Map Android API や Apple Map などにも言えることだと予想します。

画面に可視できる程度の数（〜１００）くらいしか想定されていないと予想します。

ちなみに、拙作の Xamarin.Forms.GoogleMaps も同じくで、大量のPinを登録されることは想定していません。

操作不能状態

1000件程度になってくると表示に時間がかかっているようで、画面上ユーザが固まってるように感じる状態ができてしまいます。

「1000件のデータをループして地図に追加する」という処理を、全てUIスレッドで行うと、その間UIは固まります。

それを回避するには、可能な限り処理をワーカースレッド（非同期）で行う必要がありますが、画面のコントロールへのアクセスはUIスレッドで行うというルールがあるので、「ピンの追加だけはUIスレッドで行う」必要があります。

正しく動くとは思えないですが、概念的には以下のようなコードになると思います。

Task.Run(() => 
{
    // 非同期（ワーカースレッド）
    for (int i = 0; i < data; i++)
    {
        var pin = data[i];
        Device.BeginInvokeOnMainThread(() => 
        {
            // 同期（UIスレッド）
            map.Pins.Add(pin);
        });
    }
});

たぶん、１件ずつ BeginInvokeOnMainThread するのはムダで、 BeginInvokeOnMainThread で数十件まとめて（UIレスポンスが落ちない程度に） Pin.Add するのだと思います（違ってるかも）。

Comments

[randr]

確かに大量に表示すると動きがスムーズではないですね。
非同期で処理して、数を制限することでレスポンスをよくしようと思います。
ありがとうございました。
googlemapsのことで別途質問がありますので、また宜しくお願い致します。

Answer 2

こんにちは。田淵＠エクセルソフトです。

データ取得に時間が掛かるとして、とりあえず動かすだけなら async/await 使って

button.Clicked += async (sender, e) => 
{
    List<MapData> datas = await ≪データ取得≫;
    foreach(data in datas)
    {
        //mapはXamarin.Forms.Maps
        map.Pins.Add(new Pin { Label = data.Name, Position = data.PosData});
    }
};

で良いのではないでしょうか？

私もちゃんと理解出来ていないのですが、async/await については

async/awaitと同時実行制御 | ++C++; // 未確認飛行 C ブログ

をご参照いただくと良いかと思います。

Comments

[randr]

説明が不十分でした。
データ取得処理はHttpClientを使用して非同期で取得しています。
そのため、記載頂いたようなコードとなっております。
取得したデータ（datas）が100件程度であれば、ストレスなく表示されるのですが、
1000件程度になってくると表示に時間がかかっているようで、
画面上ユーザが固まってるように感じる状態ができてしまいます。
1000件も対象があるときは、地図を拡大してもらうよう促せば済むのですが、できたら
pinをAddしているときでもマップが動かる、もしくはpinが一つずつ刺さっていく様子が見えればと考えています。

[ytabuchi]

HttpClientをどこでインスタンス化してどれくらい使いまわすか？メモリが大丈夫か？など考えるところは多いですが、forearch の中で一個ずつ取得して都度Pinを指していけば順々にPinが刺さるように出来ますよね。Button.Click で async してるので。

ただ、そのあたりは Xamarin ではなく、設計の話になるような気がします。例えばボタンクリック時ではなく、それより前にデータを取っておけば待ち時間なく指せるはずですし。

また、Xamarin.Forms.Maps の iOS の Map で Pin を指す動作自体が重いという問題かもしれないですが、その場合は Xamarin.iOS で同じ動作を作って試してみるのが良いですね。

MapKit に拘る必要がなければ、@amay077 さんの Xamarin.Forms.GoogleMaps https://github.com/amay077/Xamarin.Forms.GoogleMaps を試してみるのも良いかもですね。