<\/HEAD>
<\/P>
最近、ArcGIS API for JavaScriptのいくつかのビジュアライゼーションツールについて少し話しました。最近のリリースでは、データに基づいてレンダラーを生成する際の推測を減らすSmart Mapping<\/A>が導入されました。また、マップ内のデータに基づく色のブレンドに関する非常にクールな機能も導入されています。開発者が醜いマップの言い訳をほとんど持てなくなる段階に近づいています<\/EM>。<\/P><\/P>先週のEsriUCで見かけたことの一つは、Smart Mappingを使ってレンダラーを生成し、それを少し試してから、そのレンダラーのJSONを生成して後でSmart Mappingツールを呼び出さずに使うというアイデアでした。これは完全に可能ですが、どのように行うかは少し不明瞭です。そこで、使いたいかもしれないいくつかのテクニックを見てみましょう。<\/P><\/P>ローカルに保存する<\/H2>例えば、あなたのアプリがユーザーにデータ上でクエリを実行させ、そのクエリに基づいてレンダラーを更新することを許可するとします。そのドキュメントからのサンプルはこちらです。このサンプルにいくつかの関数を追加してレンダラーをlocalStorageに保存することができます。Featuresでできる方法と似ています。そのヘルパー関数は次のようになるでしょう。<\/P><\/P>function saveLocal(data, field) {
var key = location.pathname + '-' + field;
localStorage.setItem(key, JSON.stringify(data));
}
function getLocal(field) {
var key = location.pathname + '-' + field;
var data = localStorage.getItem(key);
if (data) {
return JSON.parse(data);
} else {
return null;
}
}<\/PRE><\/P>それからSmart Mappingを設定するときに、localStorageに既存のレンダラーがあるかどうか確認し、その保存されたレンダラーを使ってSmart Mapping自体をバイパスすることができます。<\/P><\/P>function createRenderer(field) {
\/\/_smart mapping機能開始
var data = getLocal(field);
if (data) {
console.log('localStorageからレンダラーを読み込み');
layer.setRenderer(jsonUtils.fromJson(data));
layer.redraw();
createLegend(map, layer, field);
} else {
smartMapping.createClassedColorRenderer({
layer: layer,
field: field,
basemap: map.getBasemap(),
classificationMethod: "quantile"
}).then(function (response) {
console.log('localStorageにレンダラーを保存');
saveLocal(response.renderer.toJson(), field);
layer.setRenderer(response.renderer);
layer.redraw();
createLegend(map, layer, field);
});
}
}<\/PRE><\/P>これはかなりクールです。<\/EM>このサンプルのデータはそれほど複雑ではありませんが、大きなデータセットがあった場合、Smart Mappingがレンダラーを生成するのに1秒ほどかかることもあり、この方法はアプリの最適化に役立つでしょう。こちらはこのアプリケーションのフルデモです。<\/P><\/P>テストアプリを作る<\/H2>もう一つクールなことは、このサンプルに似たテストアプリを作成することです。そしてページに<pre><\/SPAN>タグを追加し、レンダラーのJSONが更新されるたびにそれを書き換えます。コードは次のようになるでしょう。<\/P><\/P>var data = colorRenderer.renderer.toJson();
var js = JSON.stringify(data, null, 2);
document.getElementById('results').innerHTML = js;<\/PRE><\/P>これでウェブページから直接このJSONをコピー＆ペーストでき、それをwebmap仕様などで使うローカル設定で利用できます。これで、本番環境アプリでSmart Mappingを使う必要がない場合でも、生成できるクールな見た目のレンダラーだけが必要な場合には心配無用です。こちらはその方法を示すデモアプリです。<\/P><\/P>帰宅しましょう<\/H2>というわけで、レンダラーを生成し、それらを保存して必要なときにアプリで使ってパフォーマンス最適化するためのいくつかの方法をご紹介しました。ArcGIS API for JavaScriptのビジュアライゼーションツールは年々大きく進歩しており、開発者がアプリ用にクールな見た目のマップを作成するためのかなり良いリソースになっていると思います。
これで終わりです、お疲れ様でした。もう帰っていいですよ。
もっとジオ開発者向けヒントやコツが知りたい方は、私のブログをご覧ください。
