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: Calculando el Tiempo Relativo para Popups y Simbología

DennisJarrard

<\/HEAD>

Introducción<\/H3>Los campos de Fecha\/Hora añaden una dimensión completamente nueva al análisis y visualización de datos espaciales. Especifican un punto exacto en el tiempo, similar a cómo las coordenadas especifican un punto exacto en el espacio. Al trabajar con datos espaciales, generar contenido relativo es algo que hacemos naturalmente todo el tiempo. Por ejemplo, podríamos calcular un área (como un buffer) que está anclada en un punto de entrada. O podríamos medir una distancia desde un punto hasta otro objeto. Los resultados de esos análisis son relativos, es decir, son representaciones relativas basadas en un punto de partida exacto. Por sí mismas, las coordenadas exactas podrían no significar mucho, pero podemos derivar algo de significado y valor a partir de ellas.<\/P><\/P>El tiempo funciona de la misma manera. Cuando hablas de tu fiesta de cumpleaños, podrías decir mi fiesta de cumpleaños el 15 de febrero^{th<\/SUP> de 2020, 6:00 PM<\/EM>3pero es mE1s fE1cil para la persona con la que hablas entender si simplemente dices mi fiesta de cumpleaños anoche<\/EM>. O cuando tu amigo te pregunta 1CuE1ndo estarE1n listos las hamburguesas?, podrEDas decir 26 de febrero^{th<\/SUP>, 5:30 PM<\/EM>, cuando en aproximadamente 30 minutos<\/EM> serEDa mucho mE1s efectivo para transmitir tu mensaje. Estas expresiones son relativas a un punto preciso en el tiempo: ahora mismo. En ArcGIS, las fechas y horas se especifican con precisiF3n, pero puedes incorporar representaciones relativas de esas fechas y horas en tus mapas para hacerlos mE1s fE1ciles de entender. En esta publicaciF3n, vamos a ver cF3mo manipular sEDmbolos y ventanas emergentes para reflejar el tiempo relativo.<\/P><\/P>Incorporando Tiempo Relativo en la SimbologEDa<\/H3>Al ver una transmisión en vivo, podríamos querer simbolizar los datos de tal manera que, a medida que los eventos envejecen, se vuelvan cada vez menos significativos visualmente hasta desaparecer por completo. Por ejemplo, mira el mapa a continuaciF3n. Trajimos los MODIS Hotspots del Living Atlas, aplicamos un filtro para mostrar solo las últimas 24 horas y luego usamos Arcade para categorizar cada hotspot en una categoría de "recencia". A medida que estos hotspots envejecen, disminuirán y finalmente desaparecerán de la vista.<\/P><\/P><\/A><\/P><\/P>
Con Arcade, tienes la flexibilidad para trabajar con tus campos de fecha de muchas maneras, personalizar umbrales e incluso calcular tus propias fechas nuevas derivadas. Sigue leyendo para aprender cF3mo construir este mapa exacto para ti y comenzar.<\/P>
<\/P>
Primero, configuremos el mapa. Abre un nuevo webmapa, haz clic en Agregar >> Explorar capas del Living Atlas >> y busca "MODIS". El primer resultado debería ser una capa de entidades "Satellite (MODIS) Thermal Hotspots and Fire Activity" por Esri. Adelante, agrega esa capa a tu mapa. En el panel Contenido, haz clic en el botón filtro para la capa MODIS y establece un filtro para "Fecha de adquisición en los últimos 1 día(s)". Aplica filtro. Esto filtrará los hotspots para que estén dentro de las últimas 24 horas. Ahora haz clic en Mapa base en la parte superior y selecciona el mapa base Dark Gray Canvas. Ahora es momento de usar Arcade para construir nuestra propia simbologEDa relativa al tiempo para los hotspots.<\/P>
<\/P>
Para la capa MODIS, haz clic en el botón Cambiar estilo. Expande "Elegir un atributo para mostrar", desplázate hasta el final de la lista de campos y haz clic en "Nueva expresión". Esto abrirá el generador de expresiones Arcade. Pega el siguiente código en el cuerpo de la expresión.<\/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>)<\/SPAN>{<\/SPAN>
return<\/SPAN> "2"<\/SPAN>
}<\/SPAN>
else<\/SPAN> if<\/SPAN> (<\/Span>value ><\//span> 8<\//span> &&<\//span> value <=<\//span> 12<\//span>)<\//span>{<\//span>
return<\//span> \"3\"<\//span>
}<\//span>
else<\//span> if<\//span> (<\//span>value ><\//span> 12<\//span> &&<\//span> value <=<\//span> 16<\//span>)<\//span>{
<panclass=keywordtokenreturn</pan><spanclass=stringtoken2</pan>
<spanclass=punctuationtoken}
<spanclass=keywordtokenelse</pan><spanclass=keywordtokenif</pan><spanclass=punctuationtoken(value <spanclass=operatortoken></pan>16 <spanclass=operatortoken>&&/pan>value <spanclass=operatortoken><=/pan>20)</punctuationtoken>
/keywordtoken return "/5"
}
else {
return "6"
}
}

var hours = DateDiff(now(),$feature["ACQ_DATE"] , "hours")
determineCategory(hours)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
<‍
Puedes modificar los umbrales para cada categoría aquí si lo deseas. Solo ten en cuenta que el filtro que aplicamos a la capa solo muestra aquellos hotspots que se registraron en las últimas 24 horas. Si trabajas con una capa diferente, deberás reemplazar el campo $feature["ACQ_DATE"] para que apunte a un campo de fecha en tu capa. Haz clic en "Probar" para asegurarte de que funciona. Si tiene éxito, deberías ver un valor Resultado entre 1-6 (siendo 1 el más reciente y 6 el más antiguo). Haz clic en OK para aplicar el script.<\/P>
<\\/P>
Los tipos "Simbología única" se seleccionarán automáticamente. Haz clic en Opciones para modificar cómo se muestran estos símbolos. Modifica el orden del símbolo a 1-6 arrastrando las entradas a la posición adecuada. Ahora que todo está en el orden correcto, adelante y cambia las Etiquetas para cada categoría para que reflejen el rango temporal.. Usé "En las últimas 4 horas" para la primera y un esquema de "Hace X a Y horas" para las cinco últimas. Muy bien, ahora estamos listos para crear los símbolos. Haz clic en el primer símbolo para abrir el Cambiador de Símbolos. Haz clic en Forma, abre el desplegable y selecciona "Firefly". La rampa que usé fue la rampa verde claro a rojo.
<\/P>
Seleccione el más intenso en la rampa (el más a la derecha), y establezca el tamaño en 36. Repita este proceso para las otras categorías, avanzando hacia la izquierda en la rampa, y disminuyendo el tamaño cada vez en 6 (por ejemplo, 36, 30, 24, 18, 12 y 6). Una vez que todos sus símbolos estén configurados como desee, adelante y juegue con el control deslizante de Transparencia en el panel Estilo para ajustar la apariencia que busca. Cuando todo esté dicho y hecho, su panel Estilo debería verse algo así:<\/P>
<\/P>
<\/P>
Haga clic en OK para confirmar todo. Y, ¡voila!<\/EM> Ahora debería tener un mapa de hotspots MODIS que envejecen con el tiempo basado en la hora actual. ¡Gran trabajo! Además, no olvide guardar su mapa!<\/P><\/P>}}

Incorporando Tiempo Relativo en Popups<\/H3>También puede configurar expresiones de tiempo relativo en sus popups y transformar una fecha y hora precisa en algo un poco más amigable para humanos. Por ejemplo, regrese al mapa de ejemplo proporcionado hacia la parte superior de esta publicación. Si hace clic en un hotspot, en el popup verá la fecha y hora exactas así como una expresión relativa como "hace 2 horas y 5 minutos". Esa segunda parte también está siendo calculada por Arcade sobre la marcha. <\/P><\/P>Para configurar esto en su propio mapa, abra el panel "Configurar Popup" para la capa Hotspot MODIS. Haga clic en "AGREGAR" bajo la sección Expresiones de Atributo. Esto lanzará otro constructor de Expresiones Arcade. Pegue el siguiente código en el bloque de Expresión:<\/P><\/P>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>(<\/now<\/(<\/)<\/,<\/alertDate<\/,<\/\"hours\"<\/)<\/\n var<\/=<\/DateDiff<\/(<\/now<\/(<\/)<\/,<\/alertDate<\/,<\/\\u0022days\\u0022 if (minutes <= 120) { return round(minutes) + " minutos atrás" } if (minutes > 120) { if (hours <= 48) { var tFloor = floor(hours) var deltaMin = datediff(now(), dateadd(alertDate, tFloor, 'hours'), 'minutes') return round(tFloor) + " horas y " + round(deltaMin) + " minutos atrás" } if (hours > 48) { var dFloor = floor(days) var deltaHour = datediff(now(), dateadd(alertDate, dFloor, 'days'), 'hours') return round(dFloor) + " días y " + round(deltaHour) + " horas atrás" } } } return getTimeDelta(myDateField)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<span‍>Esta expresión observará la diferencia de tiempo entre la hora actual y la fecha en el campo y usará lógica condicional para construir una expresión amigable para humanos de esa diferencia. Esta expresión también está diseñada para funcionar con Días, pero dado que hemos configurado nuestros hotspots para ver solo las últimas 24 horas, no veremos eso. Pero puede usar esta expresión como plantilla para otras capas con las que quiera trabajar. En ese caso, lo único que tendrá que hacer es cambiar el $feature["ACQ_DATE"] parte para apuntar a un campo de fecha en su capa. Haga clic en Probar para verificar que funcione, seguido de un clic exuberante en el botón "OK". Desde aquí, configure los popups como desee, asegurándose de que la expresión que creó sea visible. La expresión actúa como un campo, por lo que puede verla como parte de un estilo popup predeterminado o configurarla como parte de un visualización de atributos personalizados.<\/P><\/P><\/P><\/P>Arcade te brinda la flexibilidad para personalizar cómo se transmiten las cosas a tu audiencia sin requerir que modifiques el esquema de tus datos o ejecutes cálculos constantes de campos. Las representaciones temporales son solo un caso de uso de eso. Esperamos que esto te sirva como punto de partida para explorar lo que es posible. ¡Gracias por leer!<\/P><\/BODY><\/HTML>

Encuentra más publicaciones etiquetadas con

Financial Services

Manufacturing

Real Estate

Retail

Trucking & Logistics

Insurance

Comentarios

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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