2


1

データストアからデータを非同期にプルし、マップを描画します

Google App Engine上で実行され、データストアに情報を保存するSpring MVC 3アプリ(JSPを使用)があります。 Google Maps API v3を使用して、図形を描画したり、色付けしたりすることにより、地図上のデータの一部を投影しています。 私のデータベースには、何百万ものエントリが強力に保持されます。

データストアからデータをプルし続け、投影するデータベースエントリがなくなるまでマップに投影するのが最善の方法だと思いました。 30秒の制限に達しないように(およびDeadlineExceededExceptionが発生するように)、ユーザーエクスペリエンスを向上させるために、これを行う必要があります。

GWTを使用する価値はありますか?

どんなアドバイスも素晴らしいでしょう。

ありがとうございます。

1 Answer


0


ここで説明するページネーション技術に似たカーソルを使用できます。

マップを含むページが読み込まれたら、空のカーソルパラメーターを使用してAJAXリクエストを作成します。 要求ハンドラは少数のエンティティをフェッチし、それらとカーソルを含む応答を返します(エンティティが残っている場合)。

クライアントjavascriptから、マップにアイテムを表示した後、応答にカーソルがある場合、カーソルを引数として新しいリクエストを開始します。 カーソルが提供されている場合、要求ハンドラーで、クエリを作成するときにカーソルを使用します。

これにより、すべてのアイテムが取得されてマップに表示されるまで、AJAXリクエストの連続ループが設定されます。

更新:

次のようなJSONを返すサービスを作成できます。

{
    items:
    [
        { lat: 1.23, lon: 3.45, abc = 'def' },
        { lat: 2.34, lon: 4.56, abc = 'ghi' }
    ],
    cursor: '1234abcd'
}

そのため、アイテムの配列(lat / lonおよびアイテムごとに必要なその他の情報)とカーソル(最後のエンティティがフェッチされたときにnullになります)が含まれます。

次に、クライアント側で、http://jquery.com/ [jQuery]のhttp://api.jquery.com/jQuery.ajax/[ajax]関数を使用してajax呼び出しを行うことをお勧めします。 :

$(document).ready(function()
{
    // first you may need to initialise the map - then start fetching items
    fetchItems(null);
});

function fetchItems(cursor)
{
    // build the url to request the items - include the cursor as an argument
    // if one is specified
    var url = "/path/getitems";
    if (cursor != null)
        url += "?cursor=" + cursor;

    // start the ajax request
    $.ajax({
        url: url,
        dataType: 'json',
        success: function(response)
        {
            // now handle the response - first loop over the items
            for (i in response.items)
            {
                var item = response.items[i];
                // add something to the map using item.lat, item.lon, etc
            }

            // if there is a cursor in the response then there are more items,
            // so start fetching them
            if (response.cursor != null)
                fetchItems(response.cursor);
        }});
}