基となるPOIデータの取得方法

ARchitect WorldでPOIデータを取得および操作する方法は数通りあります。どの方法が適しているかはアプリケーションの使用事例によって異なります。

ネイティブコードから

対応するサンプルタイトル名「From Application Model」

データはアセットからロードするだけでなく、データベースからロードすることも、ネイティブコードで作成することもできます。プラットフォームに共通の方法を使用してデータからJSONオブジェクトを作成し、architectView.callJavaScript()を使用してそれらのオブジェクトをARchitect WorldのJavaScriptに渡します。

ローカルリソースから

対応するサンプルタイトル名「From Local Resource」

ARchitect Worldで使用するPOIデータが静的な場合は、データをアプリケーション内に保持します。JavaScriptファイル（例: myjsondata.js）を作成し、そこでグローバルにアクセス可能な変数を定義します。

var myJsonData = …[YOUR-JSON-DATA]

<script src="js/myjsondata.js"/>を追加してARchitect WorldのHTMLにJavaScriptを組み込むことにより、JavaScriptのどこからでもPOIデータを使用できるようにします。

// request POI data
requestDataFromLocal: function requestDataFromLocalFn(lat, lon) {
    World.loadPoisFromJsonData(myJsonData);
}

メモ: このサンプルでは、静的なPOIデータを使用し、Helper.bringPlacesToUserを使用して緯度と経度の値を上書きしています。これを避けるには、この行を削除する必要があります。

Webサービスから

対応するサンプルタイトル名「From Webservice」

JQueryには、リモートソースからデータをロードするためにさまざまなツールが用意されています。POIデータにはJSON形式を使用することを強く推奨します。要求と解析を実行するコードはほんの数行です。

たとえば、AR.context.onLocationChanged = World.locationChanged;を使用して、ロケーションの更新時に呼び出されるメソッドを定義します。このサンプルでは、初回のロケーション更新の後にPOIデータが要求されます。メモ: その後でAR.context.onLocationChanged = nullを設定して、初回以降、World.locationChangedでロケーション更新を受け取らないようにすることもできます。

サーバー情報は切り離して保存することを推奨します。

// holds server information
var ServerInformation = {
    // sample service returning dummy POIs
    POIDATA_SERVER: "http://example.wikitude.com/GetSamplePois/",
    POIDATA_SERVER_ARG_LAT: "lat",
    POIDATA_SERVER_ARG_LON: "lon",
    POIDATA_SERVER_ARG_NR_POIS: "nrPois"
};

サーバーから返されたJSONデータが有効であること、および適切にエスケープされていることを確認します（たとえば、POIデータに含まれる特殊文字など）。

JSONデータをWorld.loadPoisFromJsonData(poiData)に渡して、そこでマーカーの作成を定義します。

// location updates
locationChanged: function locationChangedFn(lat, lon, alt, acc) {
    /* Request data from server only once*/
    if (!World.alreadyRequestedData) {
        World.requestDataFromServer(lat, lon);
        World.alreadyRequestedData = true;
    }
},

// request POI data
requestDataFromServer: function requestDataFromServerFn(lat, lon) {
    // set helper var to avoid requesting places while loading
    World.isRequestingData = true;
    World.updateStatusMessage('Requesting places from web-service');
    // server-url to JSON content provider
    var serverUrl = ServerInformation.POIDATA_SERVER + "?" + ServerInformation.POIDATA_SERVER_ARG_LAT + "=" + lat + "&" + ServerInformation.POIDATA_SERVER_ARG_LON + "=" + lon + "&" + ServerInformation.POIDATA_SERVER_ARG_NR_POIS + "=20";
    var jqxhr = $.getJSON(serverUrl, function(data) {
        World.loadPoisFromJsonData(data);
    })
        .error(function(err) {
            World.updateStatusMessage("Invalid web-service response.", true);
            World.isRequestingData = false;
        })
        .complete(function() {
            World.isRequestingData = false;
        });
}