Niklasによる賢い地図作成

NiklasKöhn

<\/HEAD>

過去2日間のドイツ全土の大気状況は、近年最強クラスの嵐の一つであるNiklasによって支配されました。そして国全体、特にBahn<\/SPAN><\/A>がまだ片付け作業に追われている間に、これら2日間に実際に何が起こったのかを地図で見てみましょう:<\/P>Deutschen Wetterdienstes<\/SPAN><\/A>のホームページからダウンロードした2つのCSVテーブルの助けを借りて、ArcGIS Online上に素早くWebマップを作成しました。各テーブルはそれぞれの日のレイヤーを形成します。両方のマップレイヤーはその後Hosted Feature Serviceとして公開され、一般に公開されました。
これらのサービスはどこからでも利用可能であり、ArcGIS API for JavaScriptの新機能<\/SPAN><\/A>を利用して、小さなアプリケーション「Sturm Niklas über Deutschland<\/SPAN><\/A>」は観測所で記録された天気の美しいビューを生成します。<\/P><\/P>基本的には新しい「Smart Mapping」モジュール<\/SPAN><\/A>が使われています。つまり「賢い地図作成」です。この魔法の言葉の下では、新規ユーザーも経験豊富なユーザーも、有用で印象的な地図を簡単に作成できます。このモジュールは属性に簡単に適用できる事前設定済みレンダラーを多数用意し、色、大きさ、位置によってフィーチャを分類します。ArcGIS Onlineの3月リリースで初めて導入され、JS APIはバージョン3.13以降でこの新機能をサポートしています。<\/P>さらに、新しい「Search Widget」<\/SPAN><\/A>も組み込まれており、ここではLocator Serviceだけでなく任意のFeature Serviceも検索できます。「Sturm Niklas」アプリケーションの場合は、2つのフィーチャレイヤーのうち1つにある気象観測所名フィールドを単純に検索しています。<\/P><\/P>

そしてアプリケーションはArcGIS Onlineにはできない何をするのか？<\/H3>通常通り、開発者にはGUIよりも進んだ可能性があります。この場合、コード内で事前定義されたSmart-Mappingレンダラーが捕捉され、データに応じて変更されます。これにより、自動クラス区分やカラーレンジなどの既定設定を引き続き利用しつつ、一部のプロパティを調整できます。<\/P>レンダリングはクライアント側で行われるため、大量データの場合はパフォーマンス低下が起こる可能性があります。しかし、このような単純なテーブルと重ね合わせた2つのレイヤーでは表示速度は問題ありません。<\/P><\/P>アプリケーション内レンダリング<\/H3>メニューから異なる気象データへ切り替えられます。この時、レイヤーを単純に表示・非表示するのではなく、両日のレイヤー用レンダラーが再定義されます。メニュー選択は新しい属性フィールドを指定し、多様な条件分岐によってレンダラー設定が決まります。以下はフィールド名（行2-6）やレイヤー名（行15）による区別と、一部の場合にスマートClassBreakRendererシンボルへ異なる色が割り当てられる様子を示す短い抜粋です:<\/P>else if ( <\/SPAN><\/EM>
    field === "RR24" ||<\/SPAN><\/EM>
    field === "FX" ||<\/SPAN><\/EM>
    field === "SSS24" ||<\/SPAN><\/EM>
    field === "SGLB24" ||<\/SPAN><\/EM>
    field === "Höhe") {<\/SPAN><\/EM>
    //ここからSmart Mapping開始<\/SPAN><\/EM>
smartMapping.createClassedSizeRenderer({<\/EM><\/SPAN>
layer: renderLayer,<\/SPAN><\/EM>
       field: field,<\/SPAN><\/EM>
       basemap: map.getBasemap(),<\/SPAN><\/EM>
       classificationMethod: "quantile"<\/SPAN><\/EM>
    }).then(function (response) {<\/SPAN><\/EM>
      //翌日をグレー表示する<\/SPAN><\/EM>
      if (renderLayer.name==="DWD_20150401" || field === "Höhe") {<\/SPAN><\/EM>
       array.forEach(response.renderer.infos, function (f) {<\/SPAN><\/EM>
          f.symbol.color = new Color.fromHex("#CCCCCC");<\/SPAN><\/EM>
       });<\/SPAN><\/EM>
}<\/EM><\/SPAN>
else {<\/EM><\/SPAN>
//3月31日にデータによる区別を行う<\/EM><\/SPAN>
if ( <\/EM>
field === "SSS24" ||