Esta página web no está soportada en este navegador. Intente Microsoft Edge, Google Chrome, Safari o Firefox.

x

Buscador

Buscador

Todo el soporte de Esri en español

Visualización 3D: Trabajando con íconos, líneas y símbolos rellenos

Kristian Ekenes, Enero 19 de 2016


Esta es la primera publicación en serie de tres partes, explorando visualizaciones basadas en atributos 3D en aplicaciones web usando el ArcGIS API for JavaScript version 4.0. En este post en primer lugar discutiremos como trabajar con símbolos planos 3D – íconos, líneas y símbolos rellenos en un SceneView.

La semana pasada, discutí el mapeo multivariado utilizando la versión 3.15 del API de ArcGIS para JavaScript. Gracias a las variables visuales, hemos sido capaces de exponer fácilmente algunos patrones espaciales interesantes, utilizando el tamaño, color y la opacidad. Los principios mencionados en dicha publicación se aplican de manera similar cuando se trabaja con la visualización en 2D en un MapView utilizando la versión 4.0 beta 3 API

Antes de tomar decisiones de visualización, lo primero es entender nuestros datos, su tipo de geometría, el número de variables que queremos visualizar y cómo representarlos.

Mientras la SceneView soporta todos los tipos de símbolos 2D para renderizar datos in MapViews (SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, etc.), también tenemos símbolos 3D a nuestra disposición que nos dará un control más personalizado sobre la apariencia y el ¨sentir¨ de cada símbolo. Esto es posible gracias a los symbol layers

Capas de Símbolos

La versión 4.0 del API de JavaScript introdujo el concepto de capa de símbolo en los símbolos 3D. Imagine cada símbolo objeto como un paquete que contiene múltiples capas de símbolos que define la apariencia de los símbolos. Una capa puede ser outline, another the fill, etc. La relación de capas de símbolos a símbolo es similar a la relación de la capa operacional a un mapa. El mapa es un paquete que guarda los datos, y las capas son las piezas individuales de un dato que hace que del mapa una representación visual de fenómenos geográficos.

Estos son cuatro tipos de símbolos 3D que corresponden a tipos específicos de geometría: PointSymbol3D (puntos), LineSymbol3D (líneas), PolygonSymbol3D (polígonos) y MeshSymbol3D (meshes). Estos símbolos solo pueden ser asignados a entidades que comparten respetivo tipo de geometría.


Cada tipo de símbolo tiene una propiedad de capa de símbolo, la cual es una matriz de capa de símbolos que forman el símbolo. Todos los símbolos deben tener por lo menos una capa de símbolo añadido a esta propiedad. Hay varios tipos de capa de símbolo. Vea la siguiente tabla para aprender de cada uno de ellos.


Cada capa de símbolo tiene una propiedad del material, la cual define el color del símbolo y una propiedad del tamaño (con la excepción de FillSymbol3DLayer) que controla el tamaño del símbolo.

En la mayoría de los casos, un solo símbolo capa puede ser suficiente para un símbolo particular. Sin embargo, se pueden agregar múltiples símbolos capa para crear un símbolo personalizado como se ve en la siguiente captura de pantalla.

Haga clic en la imagen para ver el ejemplo en vivo


El símbolo del ejemplo que se encuentra a continuación fue creado con tres IconSymbol3DLayers. En el código, el símbolo es creado de la siguiente manera.


El siguiente ejemplo tiene un enfoque similar pero simboliza el uso de múltiples carreteras LineSymbol3DLayers en un UniqueValueRenderer.

Haga clic en la imagen para ver el ejemplo en vivo


Billboared Vs. Íconos drapeados

Si se está trabajando con íconos de capa de símbolos, otra consideración al crear visualizaciones 2D en escenas 3D es si deben cubrir los símbolos en el terreno o “cartelera” de ellos. Billboarding permite que el usuario vea el símbolo en todo momento, siempre que sea visible para la cámara. Drapeado permite al símbolo mentir sobre la superficie para que quede cubierto en el terreno. El ejemplo del terremoto a continuación hace referencia al uso de símbolos drapeados.

Haga clic en la imagen para ver el ejemplo en vivo


Ambas opciones tienen sus ventajas y desventajas. El drapeado toma una perspectiva dentro de la cuenta, por lo tanto los símbolos del mismo tamaño parecen más pequeños cuando se localizan más lejos de la cámara. Este no es el caso del Billboarding donde los símbolos mantienen el mismo espacio en la pantalla en la medida en que son visibles.

Otra limitación con los símbolos planos es que puede ser difícil interpretar cuando la vista se inclina sin importar si está con cartel o drapeada (billboarder o draped). Por ésta razón es posible que se desee considerar usar restricciones de vista para mantener al usuario desde inclinar la vista de ángulos que dificultan la comprensión de los datos. Sin embargo, esa decisión depende de usted como desarrollador y depende de la finalidad de la aplicación y el contexto de los datos.

Drapeado y billboarding son controlados en la propiedad elevationInfo de la capa. Configurar el modo a “onTheGround” drapea el símbolo, y configurar el modo a “absoluteHeight” o “relativeToGround” utiliza el billboard. Cuando se usa billboard, establecer el desplazamiento opcional ayuda a representar cada ícono de forma óptima.

Haga clic en la imagen para ver el ejemplo en vivo



Variables Visuales

Como lo discutí en la publicación de la semana pasada sobre técnicas de renderización multivariable, las variables visuales pueden ser usada fácilmente para poner el tamaño, color u opacidad de cada característica basados en el valor datos asignados a una rampa continua de valores de tamaño, color u opacidad.

El ejemplo a continuación tiene los mismos datos de la publicación de la semana pasada y utiliza variables visuales con el tamaño y el color de cada ícono en función de si la mayoría de los adultos en cada condado de EE.UU asistió a la universidad. La opacidad se determina con base en el porcentaje del grupo mayoritario (Los que asistieron al menos a alguna educación superior frente a los que no lo hicieron.


Cuando se usa IconSymbol3DLayer, LineSymbol3DLayer, y FillSymbol3DLayer, visualVariables pueden representar los datos de la misma manera que lo demostramos en la publicación de la semana pasada. La interpretación cambia cuando se usan las capas de símbolos volumétricos que figuran en la tabla anterior.

La semana que viene voy a discutir el uso de objetor, rutas y extrusiones para visualizar los datos 2D con gráficos volumétricos.