Familiarizándose con JavaScript API 4.0

Noah Sager

<\/HEAD>Ahora que el ArcGIS API for JavaScript 4.0 ha sido lanzado<\/A><\/STRONG> durante un par de semanas, esta es una excelente oportunidad para recorrer parte de la nueva sintaxis y funcionalidad. Este blog repasará una aplicación 3D de ejemplo enfocándose en el widget Search. Puedes seguir el código de ejemplo desde el repositorio Esri Developer Support en GitHub<\/A><\/STRONG>, y ejecutar el ejemplo alojado aquí: Verlo en Vivo<\/A><\/STRONG>.

En cuanto a funcionalidad, la aplicación muestra un mapa 3D con cuatro widgets: Search, Zoom, Compass y Attribution. Por defecto, la View incluye los tres últimos widgets, como se describe en la documentación<\/A><\/STRONG>. Si no estás familiarizado con los cambios de 4.x, todas las aplicaciones de mapeo contienen un map y una view. El map contiene los datos, y la view contiene la información de visualización para esos datos. En otras palabras, el map es el sujeto, y la view es la cámara; completa con filtros, modos y configuraciones. Todas las apps 2D tendrán MapViews, y las apps 3D tendrán SceneViews (nota: el término ‘scene’ indica tres dimensiones en ArcGIS). Lo mismo aplica para mapas de ArcGIS Online y Portal for ArcGIS: un WebMap es 2D, y un WebScene es 3D.

<\/A>

Mapa 2D + escena 3D<\/P><\/DIV>

Puedes ingresar una ubicación en el widget Search y seleccionar un resultado de las sugerencias desplegables, o presionar Enter en el teclado para ir al primer lugar en la lista. La view hará zoom a esa ubicación y colocará un símbolo marcador de imagen en el mapa. Si abres las Developer Tools en el navegador web, verás algunos mensajes útiles en la consola que indican el progreso del widget Search.

En el código, hay muchos comentarios útiles que describen la funcionalidad, con enlaces a referencias para encontrar más información. Los constructores Map y SceneView podrían ser nuevos, pero son muy sencillos. Lo que quiero destacar aquí son dos cosas: el

SearchViewModel<\/A><\/STRONG> (comenzando en la línea 88), y el view.ui<\/A><\/STRONG> (comenzando en la línea 117).

Una de las características geniales de la versión 4.0 es la separación del estilo y la lógica de negocio. Esto significa que los widgets tienen una view y un ViewModel. La view es el widget mismo y maneja la visualización del widget, mientras que el ViewModel maneja las propiedades y configuraciones. Debo mencionar que no tenemos que usar el ViewModel si no queremos ya que las propiedades del ViewModel también están conectadas a la vista del widget. Esto se hizo por simplicidad. Como ejemplo, veamos el widget Search en el código:

<\/A>

Widget Search y SearchViewModel<\/P><\/DIV>

El constructor real del widget se usó para nombrar el widget y establecer la visibilidad a true (el valor predeterminado es true de todos modos). El SearchViewModel maneja todas las configuraciones que se establecieron para personalizar la experiencia e interfaz del usuario según lo necesitaba (ver los comentarios en el ejemplo). Lo interesante de este sistema ViewModel es que al estar separado del constructor del widget, ahora es mucho más fácil compartir lógica de negocio entre widgets y bases de código. Aquí hay más información sobre el

SearchViewModel<\/A><\/STRONG>.

El segundo aspecto interesante de la versión 4.0 que discutiré aquí es cómo agregamos el widget Search a la aplicación. Veamos el fragmento de código de la versión 4.0 y de la versión 3.x. Actualmente, podemos agregar el widget directamente a la interfaz de usuario de la view sin crear un elemento div separado. Este es un flujo de trabajo eficiente (y me atrevo a decir elegante).

<\/A>

Agregar Widget Search versión 4.0<\/P><\/DIV>

En las versiones 3.x, necesitamos crear un elemento div, referenciar ese div cuando se crea el widget, y referenciarlo nuevamente dentro de la etiqueta body del HTML.

< \/ A >< P style= \ "color :#888 ; font-size :12 px ; margin :5 px ; \ " > Agregar Widget Search versión 3.x < \/ P >< \/ DIV >< BR \ / >< BR \ / > Para más información sobre cómo agregar widgets a la view , puedes consultar esta < STRONG >< A href = " https : \ / \ / developers . arcgis . com \ / javascript \ / latest \ / api - reference \ / esri - views - ui - UI . html " target = " _ blank " rel = " nofollow noopener noreferrer " > documentación < \/ A >< \/ STRONG > . < BR \ / >< BR \ / > En resumen , el ArcGIS API for JavaScript es un producto poderoso que aprovecha el poder del GIS directamente en tu navegador web . Si has estado trabajando con versiones anteriores del API , leer el < STRONG >< A href = " https : \ / \ / developers . arcgis . com \ / javascript \ / latest \ / guide \ / migrating \ / index . html " target = " _ blank " rel = " nofollow noopener noreferrer " > Transition to 4.x < \/ A > < \/ STRONG > documento de ayuda puede ayudarte a comenzar . Y si eres nuevo , puedes empezar con la < STRONG >< A href = " https : \ / \ / developers . arcgis . com \ / javascript \ / latest \ / guide \ / discover \ / index . html " target = " _ blank " rel = " nofollow noopener noreferrer " > Discover 4.x Guide < \/ A >< \/ STRONG > . Hay mucho más por venir mientras continuamos agregando funcionalidad e increíbles características al JavaScript API 4.x . ¡Feliz codificación!

---

< EM >Noah S. - SDK Readiness Lead< \/ EM >



< \/ BODY >< \/ HTML >