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 : Calcul du temps relatif pour les popups et la symbologie

DennisJarrard

<\/HEAD>

Introduction<\/H3>Les champs Date\/Heure ajoutent une toute nouvelle dimension à l'analyse et à la visualisation des données spatiales. Ils spécifient un point exact dans le temps, de la même manière que les coordonnées spécifient un point exact dans l'espace. Lorsqu'on travaille avec des données spatiales, générer du contenu relatif est quelque chose que nous faisons naturellement tout le temps. Par exemple, nous pourrions calculer une zone (comme une zone tampon) qui est ancrée sur un point d'entrée. Ou nous pourrions mesurer une distance d'un point à un autre objet. Les résultats de ces analyses sont relatifs, c'est-à-dire qu'ils sont des représentations relatives basées sur un point de départ exact. En eux-mêmes, les coordonnées exactes peuvent ne pas signifier grand-chose, mais nous pouvons en dériver quelque chose de significatif et de valeur.<\/P><\/P>Le temps fonctionne de la même manière. Lorsque vous parlez de votre fête d'anniversaire, vous pourriez dire \u201cma fête d'anniversaire le 15^{e<\/SUP> février 2020, 18h00\u201d<\/EM>... mais il est plus facile pour la personne à qui vous parlez de comprendre si vous dites simplement \u201cma fête d'anniversaire hier soir\u201d<\/EM>. Ou lorsque votre ami vous demande \u201cQuand les burgers seront-ils prêts ?\u201d, vous pourriez dire \u201cle 26 février, 17h30\u201d<\/EM>, alors que \u201cenviron 30 minutes\u201d<\/EM> sera bien plus efficace pour faire passer votre message. Ces expressions sont relatives à un point précis dans le temps : maintenant. Dans ArcGIS, les dates et heures sont spécifiées précisément, mais vous pouvez incorporer des représentations relatives de ces dates et heures dans vos cartes pour les rendre plus faciles à comprendre. Dans cet article, nous allons examiner comment manipuler les symboles et les popups pour refléter le temps relatif.<\/P><\/P>Incorporation du temps relatif dans la symbologie<\/H3>Lorsque vous regardez un flux en direct, vous pourriez vouloir symboliser les données de telle sorte que, à mesure que les événements vieillissent, ils deviennent de moins en moins visuellement significatifs jusqu'à disparaître complètement. Par exemple, regardez la carte ci-dessous. Nous avons importé les MODIS Hotspots depuis le Living Atlas, appliqué un filtre pour ne montrer que les dernières 24 heures, puis utilisé Arcade pour catégoriser chaque hotspot dans une catégorie de "récence". À mesure que ces hotspots vieillissent, ils diminueront et finiront par disparaître de la vue.<\/P><\/P><\/A><\/P><\/P>
Avec Arcade, vous avez la flexibilité de travailler avec vos champs de date de plusieurs manières, personnaliser les seuils et même calculer vos propres nouvelles dates dérivées. Lisez la suite pour apprendre comment construire cette carte exacte par vous-même pour commencer.<\/P>
<\/P>
Tout d'abord, configurons la carte. Ouvrez une nouvelle webmap, cliquez sur Ajouter >> Parcourir les couches Living Atlas >> et recherchez "MODIS". Le premier résultat devrait être une couche d'entités "Satellite (MODIS) Thermal Hotspots and Fire Activity" par Esri. Allez-y et ajoutez cette couche à votre carte. Dans le volet Contenu, cliquez sur le bouton filtre pour la couche MODIS et définissez un filtre pour "Date d'acquisition dans les derniers 1 jour(s)". Appliquez le filtre. Cela filtrera les hotspots pour qu'ils soient dans les dernières 24 heures. Maintenant cliquez sur Fond de carte en haut, et sélectionnez le fond de carte Dark Gray Canvas. Il est maintenant temps d'utiliser Arcade pour construire notre propre symbologie du temps relatif pour les hotspots.<\/P>
<\/P>
Pour la couche MODIS, cliquez sur le bouton Modifier le style. Développez "Choisir un attribut à afficher", faites défiler jusqu'en bas de la liste des champs et cliquez sur "Nouvelle expression". Cela lancera le générateur d'expression Arcade. Collez le code suivant dans le corps de l'expression.<\/P>
<\/P>
function<\/SPAN> determineCategory<\/SPAN>(<\/SPAN>value)<\/SPAN>{<\/SPAN>
if<\/SPAN> (<\/SPAN>value <=<\/SPAN> 4<\/SPAN> )<\/SPAN>{<\/SPAN>
return<\/SPAN> \"1\"<\/SPAN>
}<\/SPAN>
else<\/SPAN> if<\/SPAN> (<\/SPAN>value ><\/SPAN> 4<\/SPAN> &&<\/SPAN> value <=<\/SPAN> 8<\/Span>){
return \"2\"
}
else if (value > 8 && value <= 12){
return \"3\"
}
else if (value > 12 && value <= 16){
return \"4\"
}
else if (value > 16 && value <= 20)</spa... image-2 j-img-centered j-img-original" src="https:\/\/us.v-cdn.net\/6038851\/uploads\/legacyfs\/online\/483413_firefly.jpg" style="display: block; margin-left: auto; margin-right: auto;" \/><\/P>Sélectionnez le plus intense sur la rampe (le plus à droite), et réglez la taille à 36. Répétez ce processus pour les autres catégories, en allant vers la gauche sur la rampe, et en diminuant la taille de 6 à chaque fois (par exemple 36, 30, 24, 18, 12 et 6). Une fois que tous vos symboles sont configurés comme vous le souhaitez, allez-y et jouez avec le curseur de Transparence dans le volet Style pour affiner l'apparence que vous recherchez. Une fois tout terminé, votre volet Style devrait ressembler à ceci :<\/P><IMG __jive_id="483427" alt="Symbol Pane" class="jive-emoji jive-image image-3 j-img-centered j-img-original" src="https:\/\/us.v-cdn.net\/6038851\/uploads\/legacyfs\/online\/483427_symbolpane.jpg" style="display: block; margin-left: auto; margin-right: auto;" \/><\/P><\/P>Cliquez sur OK pour tout verrouiller. Et, voila!<\/EM> Vous devriez maintenant avoir une carte des points chauds MODIS qui vieillissent dans le temps en fonction de l'heure actuelle. Excellent travail ! N'oubliez pas non plus de sauvegarder votre carte !<\/P><\/P><H3 id="toc-hId-818006326" id="toc-hId-818006326">Incorporation du temps relatif dans les popups<\/H3>Vous pouvez également configurer des expressions de temps relatif dans vos popups et transformer une date et heure précises en quelque chose d'un peu plus convivial. Par exemple, revenez à la carte d'exemple fournie vers le début de ce post. Si vous cliquez sur un point chaud, dans le popup vous verrez la date et l'heure exactes ainsi qu'une expression relative comme "il y a 2 heures et 5 minutes". Cette seconde partie est également calculée à la volée par Arcade. <\/P><\/P>Pour configurer cela dans votre propre carte, ouvrez le volet "Configurer Popup" pour la couche MODIS Hotspot. Cliquez sur "AJOUTER" sous la section Expressions d'attributs. Cela lancera un autre générateur d'expressions Arcade. Collez le code suivant dans le bloc Expression :<\/P><\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>var<\/SPAN> myDateField =<\/SPAN> $feature[<\/SPAN>"ACQ_DATE"<\/SPAN>]<\/SPAN>;<\/SPAN>\n\nfunction<\/SPAN> getTimeDelta<\/SPAN>(<\/SPAN>alertDate)<\/SPAN>{<\/SPAN>\n var<\/SPAN> minutes =<\/SPAN> DateDiff<\/SPAN>(<\/SPAN>now<\/SPAN>(<\/SPAN>)<\/SPAN>,<\/SPAN>alertDate,<\/SPAN> "minutes"<\/SPAN>)<\/SPAN>\n var<\/SPAN> hours =<\/SPAN> DateDiff<\/SPAN>(<\/SPAN>now<\/Span>(),alertDate, "hours")
var days = DateDiff(now(),alertDate, "days")
if (minutes <= 120) {
return round(minutes) + " minutes ago"
}
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 ago"
}
if (hours > 48) {
var dFloor = floor(days)
var deltaHour = datediff(now(),dateadd(alertDate,dFloor,'days'), 'hours')
return round(dFloor) + " days and " + round(deltaHour) + " hours ago"
}
}
}
return </class='function'>getTimeDelta(myDateField)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPan‍<SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍><SPan‍> > > > >
Cette expression examinera le delta temporel entre l'heure actuelle et la date dans le champ et utilisera une logique conditionnelle pour construire une expression conviviale de ce delta. Cette expression est également conçue pour fonctionner avec les jours, mais puisque nous avons configuré nos points chauds pour ne voir que les dernières 24 heures, nous ne verrons pas cela. Mais vous pouvez utiliser cette expression comme modèle pour d'autres couches avec lesquelles vous souhaitez travailler. Dans ce cas, la seule chose que vous devrez faire est de changer la partie $feature["ACQ_DATE"] pour pointer vers un champ de date dans votre couche. Cliquez sur Tester pour vérifier que cela fonctionne, suivi d'un clic enthousiaste sur le bouton "OK". À partir de là, configurez les popups comme vous le souhaitez, en vous assurant que l'expression que vous avez créée est visible. L'expression agit comme un champ, donc vous pouvez la voir comme faisant partie d'un style popup par défaut ou la configurer comme faisant partie d'un affichage d'attribut personnalisé.<\/P><\/P><\/P><\/P>Arcade vous offre la flexibilité de personnaliser la manière dont les informations sont transmises à votre audience sans nécessiter de modifier le schéma de vos données ni d'exécuter des calculs de champ constants. Les représentations temporelles ne sont qu'un cas d'utilisation de cela. Espérons que cela vous donne un point de départ pour explorer ce qui est possible. Merci de votre lecture !<\/P><\/BODY><\/HTML>}

Trouver plus de publications taguées avec

Financial Services

Manufacturing

Real Estate

Retail

Trucking & Logistics

Insurance

Réponses

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)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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