Community

ArcGIS API for JavaScript によるデータのアニメーション化

1968
0
05-24-2022 06:48 PM
Labels (1)
Labels:

ArcGIS API for JavaScript によるデータのアニメーション化

はじめに

※本記事は、米国Esri 社のブログ記事「Animating your data with the ArcGIS API for JavaScript」を翻訳したものに、一部加筆したものです。

 

アニメーションは、ジオメトリや属性の変化に伴うデータのパターンを見つけたり、可視化するのに便利です。アプリケーションにアニメーションを追加すると、データに命を吹き込むことができ、一見しただけではわからない空間的なパターンを知ることができます。

hurricanes.gif

live sample - Animating hurricanes as they move over time.

この記事では、ArcGIS API for JavaScript を使用して、さまざまな種類のアニメーションを作成する方法を説明します。アニメーションは楽しいものであり、物事が起こっている感覚を作り出すのに役立ちますが、自分自身に問いかけることを忘れないようにすることが重要です。

  • 今、何を見たのか？
  • アニメーションによって、データはどのように変化したのか？

データのアニメーションには、”位置（移動するフィーチャ）のアニメーション”、”属性（静止しているフィーチャ）のアニメーション”、の２つのカテゴリーがあります。

“位置のアニメーション” を行う場合はレンダラーを固定し、データにフィルターを適用することをお勧めします。

“静止しているフィーチャの属性のアニメーション” を行う場合は、視覚的変数やデータ変数のアニメーションを使用することをお勧めします。

1. 位置のアニメーション (Animating locations)

    1-a) データ フィルター アニメーション (Data filter animation)

2. 属性のアニメーション (Animating attributes)

    2-a) 視覚的変数 アニメーション (Visual variable animation)

    2-b) データ変数 アニメーション (Data variable animation)

 

1. 位置のアニメーション (Animating locations)

位置をアニメーション化することで、データのパターンや変化を見つけるのに役立ちます。例えば、位置やジオメトリが時間とともに変化する場合、アニメーションを追加することによって、いつ、どのようにデータが移動したか、または変化したのかを理解するのに役立ちます。

1-a) データ フィルター アニメーション (Data filter animation)

データ フィルター アニメーションは、データをアニメーション化するために、レイヤーのフィルターを更新します。レンダラーを固定したまま、属性、ジオメトリ、時間範囲にフィルターを適用することが可能です。

フィーチャの属性、ジオメトリをもとにしたデータ フィルター アニメーションを実行するには、layerView.filter を使用します。

これには、アニメーションを行いたいすべてのデータを MapView 内で利用できるようにしておく必要があります。与えられたフィルターに該当するフィーチャのみが表示されます。

 

TimeSlider ウィジェット – 時系列データのフィルタリング

時系列データのアニメーション化は、時間の経過に伴う変化やパターンを見つけるのに役立ちます。例えば、フィーチャの位置やジオメトリが時間とともにどのように変化するか、静止しているオブジェクトの場合は、その属性が時間とともにどのように変化するかを確認することができます。

時間データに基づいたアニメーションを行うには、TimeSlider ウィジェットを使用します。これには、レイヤー もしくは サービスに日付フィールド が存在するか、timeInfo が定義されている必要があります。

smoke-forecast.gif

live sample - Smoke movement animated over the past two days.

 

TimeSlider ウィジェット は、開発者のために時間データのアニメーション化をよりシンプルなものにします。もしサービスやレイヤーで時間が有効化されている (timeInfo が定義されている)場合、以下のコードのようにTimeSlider の view プロパティを設定するだけでよく、TimeSlider はレイヤーのtimeInfo に設定されます。

TimeSlider ウィジェット の“再生” を押すと、TimeSlider のtime extent の範囲内にあるフィーチャだけが表示されます。

timeslider-view.png

timeInfo がサービスやレイヤーに設定されていない場合、サービス内の任意の日付フィールドを使用してデータをアニメーション化することが可能です。

2019年のKincade Fire (翻訳者注釈；Kincade Fire は2019年10月に米国カリフォルニア州で発生した山火事名です) の延焼を示す例で、その方法を見てみましょう。

kincade.gif

live sample - Animating the Kincade Fire to show how it spread over time.

 

このアプリのレイヤーでは、サービスに timeInfo が定義されていなかったので、代わりにサービスのperimeterdatetime フィールドを使用して、TimeSlider の stops と fullTimeExtentを手動で設定しています。

そして、timeSlider.timeExtent プロパティを監視し、layerView.filterを使ってレイヤー内のデータをその日付でフィルタリングしています。

timeslider-manual.png

 

属性によるデータのフィルタリング

データ フィルター アニメーションは、必ずしも時間によって行われる必要はありません。レイヤーの属性をフィルタリングすることによっても、アニメーションを作成することが出来ます。この種のアニメーションは、選挙結果, 人口統計, 所得などを見るときに便利です。

次の例では、ロサンゼルスの所得の中央値を layerView.effectを使ってアニメーション表示しています。Effect は与えられたフィルターを満たすフィーチャを強調したり、強調を抑えたりします。layerView.filterと異なり、 effect では全ての利用可能なフィーチャがマップに表示されますが、フィルターを満たすフィーチャに効果（effect ）が適用されます。

median-income.gif

live sample - Los Angeles block groups animated by median income.

 

このサンプルでは、アニメーション スライダーを変更したとき、スライダーの最小値と最大値に基づいて、effect のフィルターを更新しています。

このフィルターに該当するフィーチャを強調したいので、 includedEffect に bloom と saturateを設定しています。また、フィルターを満たさないフィーチャを目立たなくするために、少し blur の設定と、brightnessを下げる設定をしています。

function createEffect(min, max) {
    featureLayerView.effect = {
        filter: {
            where: "MEDHINC_CY > " + min + " AND MEDHINC_CY < " + max
        },
        includedEffect: "bloom(150%, 1px, 0.2) saturate(200%)",
        excludedEffect: "blur(1px) brightness(65%)"
    }
}

 

 

2. 属性のアニメーション (Animating attributes)

属性のアニメーションは、行政界（国、州、郡）を示す地図など、ジオメトリや位置が固定されているレイヤーに、アニメーションを追加するのに便利な方法です。レイヤーの属性をアニメーション化するには、アニメーション フレームまたはスライダーの変更のたびに、レンダラーを更新します。

 

2-a) 視覚的変数 アニメーション(Visual variable animation)

このタイプのアニメーションでは、データ変数を固定したまま、アニメーション フレーム又はスライダーの変更のたびに、レンダラーの視覚的変数の閾値（stop ）を更新します。このタイプの可視化では、テーブル内の単一フィールドまたは単一列のみを見ます。

ny-buildings.gif

live sample - Building footprints in New York City animated by the year they were built.

 

この例では、ニューヨークの建物フットプリントを建築年ごとに可視化し、建物がいつ建設されたかを示すアニメーションを追加しています。

スライダーで各年を移動できるように設定されています。建物が建てられた年に、そのフットプリントが明るい青色で光り、年を追うごとに徐々に紫色に変わっていくので、これらの既存の建物フットプリントが、より最近の年はどこにあるのかを見ることができるのです。

どのように行われているのか、コードを見てみましょう。

animate 関数 (下図) はスライダーが更新されるたびに呼び出され、年の値を更新して、その値を setYear 関数に渡します。setYear はいくつかの UI 要素を更新しますが、より重要なのは年の値をもとに、レンダラーを更新することです。

visual-variable-animation-code.png

createRenderer 関数は、視覚的変数の閾値（stop ）の値を更新するので、スライダー上の現在の年に建てられた建物は常に明るい青色で表示され、10年前に建てられた建物はマゼンタ色で、50年前は暗い紫色で表示されます。ここで重要なのは、変化しているのは閾値（stop ）の値だけで、それぞれの閾値（stop ）の色はデータ フィールドと同じように一定であることです。

 

 

2-b) データ変数 アニメーション (Data variable animation)

なぜ、最初にすべてのデータをロードし、フィルターを使ってアニメーション化することをしないのでしょうか？ 

私たちはこれを試しましたが、結果的にアプリのパフォーマンスに大きな影響を与えました。 
このレイヤーは、2,500 以上のフィーチャと、約140のフィールドが含まれています。 
各データ値に対して１つのポイントが存在する場合、350,000ポイントになります😳。 
データ変数を更新することで、一度に読み込まれるフィーチャは350,000 でなく2,500 のみとなり、
そのため、パフォーマンスが向上しています。

視覚的変数 アニメーションと同様に、データ変数 アニメーションも固定されたジオメトリや位置を使用しますが、視覚的変数の閾値（stop ）を更新する代わりに、レイヤーをレンダリングするために使用するデータ変数を更新します。

このため、時間間隔ごとに各属性のフィールドを用意する必要があります。データ量によっては、非常に幅の広いテーブルになってしまうかもしれません。これは必ずしも時間によるアニメーションの必要はなく、別の次元（深度など）でもかまいません。

 

時間によるデータ変数 アニメーション (Data variable animation by time)

次の例では、過去100年以上にわたる世界の気温異常を示しています。このレイヤーには、1880年から2018年までの各年について1つのフィールドが含まれており、スライダーが更新されると、スライダーに一致するフィールドを指し示すようにし、レンダラーを更新しています。

data-variable-animation-by- time-code.png

 

その結果、以下のようなアニメーションが得られました。青色が平年より気温が低い地域を、赤色が平年より気温が高い地域を表しています。このデータをアニメーションにすると、かつて涼しかった世界が、どんどん暖かくなっていることがわかります。

下のGIFをクリックしてアプリを開き、スライダーを更新するときのパフォーマンスに注目してくださいーレンダラの更新がとても速いです！

update-renderer.gif

live sample - Visualizing temperature anomalies over time.

 

より高度なアニメーションをお探しの方は?

JSAPI は、既存のレイヤーの種類を拡張できるカスタム WebGL レイヤーを通じて、より高度なアニメーションをサポートすることも可能です。カスタム WebGL レイヤービューを使用したアニメーションの詳細については、 このサンプルを参照してください。

カスタム レイヤー ビューによるデータのアニメーションについて、より深く掘り下げるために、Dario D’Amico が「 visualizing and animating flow with a custom WebGL layer」 で詳細なブログを投稿しています。その結果はとても素晴らしいものですので、ご覧ください。

animate-flow.gif

 

本記事の翻訳前のブログ記事「Animating your data with the ArcGIS API for JavaScript」）は、2021 Esri Developer Summit の ArcGIS API for Javascript&colon; Data-Driven Animations のプレゼンテーション（ Kristian Ekenes と Undral Batsukh が発表）をもとに作成されたものです。

 

終わりに

本記事だけですべてを理解するのは難しいかもしれませんので、紹介している6つの例のLive サンプルアプリケーションと、ソースコードをリンクとしてまとめておきます。ご自身のアプリケーションにアニメーションを追加する際には、本記事と一緒に参考にしていただければと思います。

 

Labels (1)
Labels:
Tags (1)
0 Kudos
Version history
Last update:
‎05-24-2022 06:48 PM
Updated by:
Esri Contributor