nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Arcade: ポップアップとシンボルの相対時間を計算する

DennisJarrard

<\/HEAD>

はじめに<\/H3>日付／時刻フィールドは、空間データの分析と可視化にまったく新しい次元を加えます。これらは座標が空間内の正確な点を指定するのと同様に、時間内の正確なポイントを指定します。空間データを扱う際、相対的なコンテンツを生成することは私たちが自然に常に行っていることです。例えば、入力ポイントに基づいたバッファなどのエリアを計算したり、あるポイントから別のオブジェクトまでの距離を測定したりします。これらの分析結果は相対的であり、つまり正確な出発点に基づく相対的な表現です。正確な座標自体はあまり意味を持たないかもしれませんが、そこから意味や価値のあるものを導き出すことができます。<\/P><\/P>時間も同じように機能します。誕生日パーティーについて話すとき、「2020年2月15日午後6時の私の誕生日パーティー」と言うこともできますが、話している相手には「昨夜の私の誕生日パーティー」と言った方が理解しやすいでしょう。また、友達に「ハンバーガーはいつできる？」と聞かれたとき、「2月26日午後5時30分です」と答えるよりも、「約30分後です」と言った方が伝わりやすいでしょう。これらの表現は正確な時間点、つまり今この瞬間に対して相対的です。ArcGISでは日付と時刻は正確に指定されますが、それらの日付と時刻の相対的な表現をマップに取り入れて理解しやすくすることができます。この投稿では、シンボルとポップアップを操作して相対時間を反映させる方法を見ていきます。<\/P><\/P>シンボロジーへの相対時間の組み込み<\/H3>ライブフィードを表示するとき、イベントが経過するにつれて視覚的な重要性が徐々に薄れ、最終的には完全に消えてしまうようにデータをシンボル化したい場合があります。例えば、以下のマップをご覧ください。Living AtlasからMODIS Hotspotsを取り込み、過去24時間のみ表示するフィルターを適用し、その後Arcadeを使って各ホットスポットを「最近度」カテゴリに分類しました。これらのホットスポットは時間が経つにつれて徐々に薄れ、最終的には画面から消えます。<\/P><\/P> MODIS Hotspots の相対時間シンボロジーを示すマップ

<\/A><\/P>

<\/P>

Arcade を使うことで、日付フィールドをさまざまな方法で操作し、閾値をカスタマイズし、新たに派生した日付を計算することも可能です。この正確なマップの作成方法について読み進めてください。<\/P>

<\/P>

まずマップを設定しましょう。新しい webmap を開き、「Add >> Browse Living Atlas Layers >>」をクリックし、「MODIS」を検索します。一番上の結果は Esri による「Satellite (MODIS) Thermal Hotspots and Fire Activity」フィーチャレイヤーであるはずです。そのレイヤーをマップに追加してください。Content ペインで MODIS レイヤーのフィルターボタンをクリックし、「Acquisition Date in the last 1 day(s)」というフィルターを設定します。フィルター適用。この操作でホットスポットが過去24時間以内のものだけに絞られます。次に上部の Basemap をクリックし、Dark Gray Canvas ベースマップを選択します。さて、Arcade を使ってホットスポット用の独自の相対時間シンボロジーを作成する準備が整いました。<\/P>

<\/P>

MODIS レイヤーで「Change Style」ボタンをクリックします。「Choose an attribute to show」を展開し、フィールドリストの一番下までスクロールして「New Expression」をクリックします。これで Arcade Expression ビルダーが起動します。以下のコードを Expression 本文に貼り付けてください。<\/P>

<\/P>

function determineCategory(value){
    if (value <= 4){
        return "1"
    }
    else if (value > 4 && value <= 8){
        return "2"
    }
    else if (value > 8 && value <= 12){
        return "3"
    }
    else if (value > 12 && value <= 16){
        return "4"
    }
    else if (value > 16 && value <= 20){
        return "5"
    }
    else {
        return "6"
    }
}

var hours = DateDiff(now(),$feature["ACQ_DATE"], "hours")
determineCategory(hours)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<\/P>

必要ならここで各カテゴリの閾値を変更できます。ただし、このレイヤーに適用したフィルターは過去24時間以内に記録されたホットスポットのみ表示することに注意してください。もし別のレイヤーで作業している場合は、日付フィールドとして参照される $feature["ACQ_DATE"] をあなたのレイヤーの日付フィールド名に置き換える必要があります。「Test」をクリックして動作確認してください。成功すると結果値として1〜6（1が最新、6が最古）が表示されるはずです。「OK」をクリックしてスクリプトを適用します。<\/P>

<\/P>

「Unique symbols」タイプが自動的に選択されます。「Options」をクリックして表示方法を変更できます。エントリをドラッグしてシンボル順序を1〜6に変更してください。すべて正しい順序になったら、それぞれのカテゴリラベルも時間範囲が反映されるよう変更しましょう。一番目には「過去4時間以内」、残り5つには「X〜Y時間前」というスキーマを使用しました。それではシンボル作成準備完了です。一番目のシンボルをクリックして Symbol Changer を開きます。「Shape」をクリックしドロップダウンから「Firefly」を選択します。使用したランプはライトグリーンから赤へのランプでした。
Firefly ランプ <\/P>

ランプ上で最も強烈なもの（右端のもの）を選択し、サイズを36に設定します。このプロセスを他のカテゴリでも繰り返し、ランプの左側に向かって進みながら、サイズを6ずつ減らしていきます（例：36、30、24、18、12、6）。すべてのシンボルが希望通りに設定できたら、スタイルペインの透明度スライダーを使って見た目を調整してください。すべて完了すると、スタイルペインは次のような表示になるはずです:<\/P>

Symbol Pane <\/P>

<\/P>

OKをクリックしてすべてを確定します。そして、voila!<\/EM> 現在時刻に基づいて時間経過で変化するMODISホットスポットのマップが完成しました。素晴らしい仕事です！また、マップの保存も忘れないでください！<\/P><\/P>

ポップアップに相対時間を組み込む<\/H3>ポップアップ内で相対時間表現を設定し、正確な日時をより人間に優しい表現に変換することもできます。例えば、この投稿の上部にある例のマップに戻ってください。ホットスポットをクリックすると、ポップアップには正確な日時と「2時間5分前」のような相対表現が表示されます。この後者の部分もArcadeによってリアルタイムで計算されています。<\/P><\/P>自分のマップでこれを設定するには、MODIS Hotspotレイヤーの「Configure Popup」ペインを開きます。属性式セクションの下にある「ADD」をクリックします。これで別のArcade Expressionビルダーが起動します。以下のコードをExpressionブロックに貼り付けてください:<\/P><\/P>var<\/SPAN> myDateField =<\/SPAN> $feature[<\/SPAN>"ACQ_DATE"<\/SPAN>]<\/SPAN>;<\/SPAN> function<\/SPAN> getTimeDelta<\/SPAN>(<\/SPAN>alertDate)<\/SPAN>{<\/SPAN> var<\/SPAN> minutes =<\/SPAN> DateDiff<\/SPAN>(<\/SPAN>now<\/SPAN>(<\/SPAN>)<\/SPAN>,<\/SPAN>alertDate,<\/SPAN> "minutes"<\/SPAN>)<\/SPAN> var<\/SPAN> hours =<\/SPAN> DateDiff<\/Span>(<\/now<\/(<\/)<\/,<\/alertDate<\/,<\/\"hours\"<\/)<\/ var<\/> days =<\/> DateDiff<\/>(<\/>now<\/>(<\/>)<\/>,<\/>alertDate<\/>,<\/>\"days\"<\/>)< if (minutes <= 120) { return round(minutes) + " 分前" } if (minutes > 120) { if (hours <= 48) { var tFloor = floor(hours) var deltaMin = datediff(now(), dateadd(alertDate, tFloor, 'hours'), 'minutes') return round(tFloor) + " 時間と " + round(deltaMin) + " 分前" } if (hours > 48) { var dFloor = floor(days) var deltaHour = datediff(now(), dateadd(alertDate, dFloor, 'days'), 'hours') return round(dFloor) + " 日と " + round(deltaHour) + " 時間前" } } } return getTimeDelta(myDateField)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<span‍>この式は現在時刻とフィールド内の日付との時間差を見て、その差分を人間にわかりやすい表現に変換するための条件ロジックを使用しています。この式は日単位にも対応していますが、ホットスポットは過去24時間のみ表示するよう設定しているため、その部分は表示されません。しかし、この式は他のレイヤーで使用するテンプレートとして利用可能です。その場合、変更する必要があるのは$feature["ACQ_DATE"] 部分だけで、ご自身のレイヤーの日付フィールドを指すようにしてください。 [テスト]ボタンをクリックして動作確認し、その後「OK」ボタンを勢いよくクリックしてください。ここからは、お好みに合わせてポップアップを設定し、作成した式が表示されるようにしてください。この式はフィールドとして機能するため、デフォルトのポップアップスタイルの一部として表示したり、カスタム属性の表示。<\/P><\/P><\/P><\/P>Arcadeは、データのスキーマを変更したり、常にフィールド計算を実行したりすることなく、情報を伝える方法を柔軟にカスタマイズできるようにします。Temporal representationsはその一例です。これが可能性を探るきっかけになれば幸いです。お読みいただきありがとうございます！<\/P><\/BODY><\/HTML>

タグ付けされた投稿をもっと見る

Financial Services

Manufacturing

Real Estate

Retail

Trucking & Logistics

Insurance

MatthewKing

@DennisJarrard Thanks for posting this. I'm trying this out word for word in order to try/learn for a map that I'm working on. When I paste the code that's in the "Incorporating Relative Time in Symbology" section I'm getting an "Unexpected identifier" error. Would you happen to know why?

DennisJarrard

@MatthewKing I tested and got the same thing. Turns out the way the code block is collapsed in the blog confuses arcade. If I reincorporate the link breaks, it seems to work. Can you try this?

var myDateField = $feature["ACQ_DATE"];

function getTimeDelta(alertDate){
    var minutes = DateDiff(now(),alertDate, "minutes")
    var hours = DateDiff(now(),alertDate, "hours")
    var days = DateDiff(now(),alertDate, "days")
    if (minutes <= 120){
        return round(minutes) + " minutes"
    }
    if (minutes > 120){
        if (hours <= 48){
            var tFloor = floor(hours)
            var deltaMin = datediff(now(),dateadd(alertDate,tFloor,'hours'),'minutes')
            return round(tFloor) + " hours and " + round(deltaMin) +  " minutes"
        }
        if (hours > 48){
            var dFloor = floor(days)
            var deltaHour = datediff(now(),dateadd(alertDate,dFloor,'days'),'hours')
            return round(dFloor) + " days and " + round(deltaHour) + " hours"
        }
    }
}
return getTimeDelta(myDateField)

MatthewKing

@DennisJarrard That works, but I'm thinking that's the code for the popups, not the symbology (which I was questioning)? However, based on your formatting of the popups I was able to reverse-engineer out the code for the symbology (coding, and especially formatting, is not my strong suit)

function determineCategory(value){
    if (value <= 4 ){
        return "1"
    }
else if (value > 4 && value <= 8){
        return "2"
    }
else if (value > 8 && value <= 12){
        return "3"
    } 
else if (value > 12 && value <= 16){
        return "4"
    }
else if (value > 16 && value <= 20){
        return "5"
    }
else {
        return "6"
    }
}
var hours = DateDiff(now(),$feature["last_edited_date"], "hours")
determineCategory(hours)

Thanks!

DennisJarrard

@MatthewKing great work! You're right, I posted the wrong section. Your code sample looks exactly like it should. I tried fixing the code samples in the blog, but the system seems to want to collapse mult-line code into a single line no matter what I do. This comments section will certainly help to guide other readers until I figure out how to fix it. Thanks for reaching out!

Anonymous User

I've used the code above and incorporate my attribute data (DueDate) but when I run the expression I receive an error message saying Unexpected token. What does this mean?

function determineCategory(value){
    if (value <= 0 ){
        return "1"
 }
    else if (value > 0 && value <= 4){
        return "2"
    }
    else if (value > 4 && value <= 7){
        return "2"
    }
    else if (value > 7 && value <= 14){
        return "3"
    }
    else if (value > 14 && value <= 30){
        return "4"
    }
}

var days = DateDiff(now(),$feature["DueDate"], "days")
determineCategory(days)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.