Buscador

Buscador

Nuestro nuevo e-commerce ya está al aire

Visualización 3D: El uso de atributos para representar entidades como en el mundo real

Kristian Ekenes, Febrero 1 de 2016


Esta es la última publicación de una serie de tres noticias que tratan sobre la visualización de datos 3D en aplicaciones web usando la API de ArcGIS para JavaScript Versión 4.0:

  1. Trabajando con íconos, líneas y símbolos rellenos.
  2. Trabajando con objetos, rutas y extrusión.
  3. El uso de atributos para representar entidades como en el mundo real.

En la anterior noticia se mostró la diferencia entre iconos planos, líneas y polígonos; y objetos volumétricos, rutas y extrusiones, para visualizaciones temáticas usando atributos como población, afiliación a partidos, tasas de graduación; dentro de una Vista de escena.

En esta publicación se va a discutir cómo tomar ventaja de las variables visuales en 3D para representar entidades que aparecen en el mundo real. Por ejemplo, si usted tiene un conjunto de datos de tuberías, es posible que tenga un campo de atributo que almacena el diámetro de cada entidad o quizás usted tiene un conjunto de datos tipo punto que representan árboles y tiene como atributos el ancho del tronco, altura y tamaños de dosel; entonces podrá utilizar variables visuales para crear símbolos que representan sus tamaños reales en una vista.

Antes de abordar este tema, tenga en cuenta lo siguiente:

  1. Por defecto, las unidades en las variables visuales de sizeInfo se encuentran en metros.
  2. Los campos usados para representar entidades del mundo real, deben ser numéricos no cadenas de texto.

A continuación se va a trabajar a través de algunos ejemplos que involucran objetos de diferentes tipos de geometría.

Polígonos: Extrusión de planos de edificios

Suponga que se tiene un conjunto de datos tipo polígono que representan la forma de algunas edificaciones, asimismo se tiene un atributo que almacena la altura de cada edificio. Usted puede crear fácilmente una representación 3D sencilla de la altura real de cada edificio utilizando ExtrudeSymbol3DLayer dentro de PolygonSymbol3D.

Al visualizar los tamaños del mundo real, no hay necesidad de establecer valores mínimos / máximos y asignarlos a tamaños mínimos / máximos; dado que los valores de los datos representan verdaderos tamaños, se usaran estos debido a que permitirán representar los tamaños de cada una de nuestras entidades, puesto que los tamaños de los símbolo de las capas volumétricas se definen en metros por defecto, se debe establecer la propiedad valueUnit de la variable visual sizeInfo a las unidades de los datos en caso de nuestra capa use una unidad de medida diferente.

En el siguiente ejemplo, se tiene un conjunto de datos de la forma de unos edificios, asimismo se cuenta con un campo denominado ELEVATION, que almacena las alturas de cada edificio en pies. Para establecer los tamaños apropiados de los edificios, sólo se debe establecer para la propiedad field el atributo ELEVATION e indicar la unidad de medida en valueUnit (en este caso "feet").

            var renderer = new SimpleRenderer({
              symbol: new PolygonSymbol3D({
                symbolLayers: [new ExtrudeSymbol3DLayer()]
              }),
              visualVariables: [{
                type: "sizeInfo",
                field: "ELEVATION",  //The field storing height values for each building
                valueUnit: "feet"  //converts and extrudes all data values in feet
              }]
            });
            
Ver aquí el ejemplo en vivo:

Tenga en cuenta que la extrusión se calcula a partir de la superficie del terreno. Por lo tanto, el techo de cada extrusión no será necesariamente horizontal. Puede ser inclinado o curvo en función de la topografía subyacente. Para evitar esto, los datos deben tener valores de z correctos y el elevationInfo.mode de la capa debe estar definido en "absoluteHeight".

Líneas: Diámetro del tubo

El siguiente ejemplo muestra el uso dePathSymbol3DLayer para visualizar los datos de línea 2D como tubos en 3D. El campo Pipe_Diameter en un servicio representa tuberías de agua que contienen el diámetro de cada tubo en pulgadas. Así que vamos a establecer la propiedad valueUnit en "inches".

                   var renderer = new SimpleRenderer({
                    symbol: new LineSymbol3D({
                      symbolLayers: [new PathSymbol3DLayer({
                        material: { color: "blue" }
                      })]
                    }),
                    visualVariables: [{
                      type: "sizeInfo",
                      field: "Pipe_Diameter",
                      valueUnit: "inches"  //converts and extrudes all data values in inches
                    }]
                  });

         

Estas entiades no aparecen en su lugar verdadero que es bajo tierra, ya que no contienen valores z. Para hacer que los objetos más fáciles de ver, se le define a la capa un desplazamiento de 20 metros sobre el suelo utilizando la propiedad elevationInfo

Ver aquí el ejemplo en vivo

Puntos: Arboles

Los datos tipo punto pueden ser más complicado de visualizar con tamaños del mundo real, ya que se representan como objetos volumétricos de distintas dimensiones. Un ejemplo es visualizar los árboles a través de datos tipo punto. Al parecer difícil de hacer teniendo en cuenta que cada árbol tiene una forma única basada en la altura del tronco, el ancho y el tamaño de la copa. Sin embargo, gracias a la propiedad axis de la variable visual sizeInfo, se puede recorrer un largo camino en la representación de las dimensiones del árbol del mundo real con sólo unas pocas líneas de código.

En el siguiente ejemplo, se utiliza un conjunto de datos de los árboles de Warren Wilson College. El conjunto de datos se completa con los atributos de la altura del árbol, diámetro del tronco y diámetro de copa. A partir de la versión actual de la API de ArcGIS para JavaScript (4.0 beta 3), las variables visuales son soportadas solo cuando se utiliza una capa de símbolo por símbolo. Para permitir la asignación a las variables visuales de capas de símbolos específicos se podrá añadir en una versión futura de la API. Por ahora, vamos a simbolizar los árboles con dos capas de entidades - una para troncos y otro para las copas.

Para representar los troncos, se va a utilizar un cilindro primitivo en ObjectSymbol3DLayer. Observe que la altura del tronco se mide en pies, y el diámetro del tronco se mide en pulgadas.

              var trunkRenderer = new SimpleRenderer({
                symbol: new PointSymbol3D({
                  symbolLayers: [new ObjectSymbol3DLayer({
                     material: { color: "brown" },  //color the trunk brown
                     resource: { primitive: "cylinder" }  //give each the shape of a cylinder
                  })]
                }),
                visualVariables: [
                 {
                   type: "sizeInfo",
                   axis: "height",  //Set the size on the height axis
                   field: "Height",  //Tree height in feet
                   valueUnit: "feet"  //converts and visualizes all sizes in feet
                 }, {
                   type: "sizeInfo",
                   axis: "widthAndDepth",  //set the size on both width and depth axes
                   field: "DBH1",  //Trunk diameter in inches
                   valueUnit: "inches"  //converts and visualizes all sizes in inches
                 }
                ]
              });

            

A continuación, se asigna una representación a una capa separada que apunta a los mismos datos tipo punto para visualizar las copas de los árboles. Nótese que para las copas se hace uso de cada eje del objeto sizeInfo con atributos separados en ObjectSymbol3DLayer. También se incluye la variable visual colorInfo para visualizar el almacenamiento de carbono de cada árbol.

              var crownRenderer = new SimpleRenderer({
              symbol: new PointSymbol3D({
                symbolLayers: [new ObjectSymbol3DLayer({
                  material: { color: "green" },
                  resource: { primitive: "sphere" }
                })]
              }),
              visualVariables: [
               {
                 type: "sizeInfo",
                 axis: "height",  //set the crown height on the height axis
                 field: "Crown_Height",  //Crown heights are expressed in feet
                 valueUnit: "feet"  //converts and extrudes all data values in feet
               }, {
                 type: "sizeInfo",
                 axis: "width",  //set the crown diameter (east to west) to the width axis
                 field: "Width_EW",  //crown diameter (EW) is expressed in feet
                 valueUnit: "feet"  //converts and extrudes all data values in feet
               }, {
                 type: "sizeInfo",
                 axis: "depth",  //set the crown diameter (north to south) to the depth axis
                 field: "Width_NS",  //crown diameter (NS) is expressed in feet
                 valueUnit: "feet"  //converts and extrudes all data values in feet
               }, {
                 type: "colorInfo",
                 field: "C_Storage",  //Carbon storage
                 minDataValue: 0,
                 maxDataValue: 800,
                 colors: ["#f7fcb9", "#31a354"]
               }
              ]
            });

            

Debido a que el desplazamiento de elevationInfo sólo toma números y expresiones, no podemos colocar la copa de cada árbol exactamente donde se midió. Para efectos de este ejemplo, se coloca un filtro para la altura del árbol y se le asigna un desplazamiento de 6,5 metros a todas las copas de los árboles. Esto funciona bien para la mayoría de las entidades a pesar de que no es preciso para todos los árboles en el mapa.

              elevationInfo: {
                mode: "relativeToGround",
                offset: 6.5
              }

            

Ver aquí el ejemplo en vivo

Este ejemplo muestra que se pueden utilizar variables visuales que representen tamaños reales de los objetos y combinarlos con una rampa de color para crear una visualización temática que proporcione un contexto de cómo se ven estos objetos en el mundo real. Una vez más, en una versión futura de la API se puede permitir la creación de este tipo de aplicaciones sin que sea necesario el uso de dos capas de entidades separadas.

Representación del Subsuelo: Pozos y Terremotos

El modo de visualización en Escenas Web permite la creación de escenas locales, en lugar de escenas globales. Las escenas locales permiten la representación del subsuelo.

El siguiente ejemplo proviene directamente de la página de ejemplos de la API de ArcGIS para JavaScript.

En este ejemplo tenemos dos capas de datos tipo punto: los pozos de petróleo / gas y los terremotos. El objetivo es mapear la ubicación del epicentro de cada sismo, simbolizar su tamaño temáticamente basados en su magnitud, y representar la profundidad real de los pozos petrolíferos y de gas cercanos.

Debido a que esta muestra es un poco más compleja, sólo nos centraremos en la representación de las entidades del subsuelo

Dado que el servicio de terremotos tiene valores de z, las entidades se colocan automáticamente en su ubicación correcta, siempre y cuando returnZ se establezca como true en la capa. Ahora podemos utilizar variables visuales para alterar el tamaño de cada esfera teniendo en cuenta la magnitud del sismo:

              var quakesRenderer = new SimpleRenderer({
              symbol: new PointSymbol3D({
                symbolLayers: [new ObjectSymbol3DLayer({
                  resource: { primitive: "sphere" }
                })]
              }),
              visualVariables: [{
                type: "sizeInfo",
                field: "mag",
                axis: "all",
                minDataValue: 2,  //2.0 on the Richter scale
                maxDataValue: 5,  //5.0 on the Richter scale
                minSize: 100,  //100m in diameter
                maxSize: 2000  //2km in diameter
              }]
            });

            

Los pozos se tratan de manera diferente, ya que pueden ser representados como ejes o líneas verticales. En lugar de esferas, se usaran cilindros para representarlos. Se añade altura a la variable visual sizeInfo y se fijan tamaños mínimos y máximos para valores negativos, por lo que los cilindros se dibujaran bajo tierra y así se visualizaran las profundidades reales de cada pozo.

También se establece un ancho en la variable visual con un valor constante de 50 metros. Se ha exagerado este valor de ancho real para cada pozo con el fin de que sea fácilmente visualizable.

              var wellsDepthRenderer = new SimpleRenderer({
                symbol: new PointSymbol3D({
                  symbolLayers: [new ObjectSymbol3DLayer({
                    resource: { primitive: "cylinder" }
                  })]
                }),
                visualVariables: [{
                  type: "sizeInfo",
                  field: "DEPTH",  //depths are measured in feet
                  axis: "height",
                  minDataValue: 1,
                  maxDataValue: 10000,
                  minSize: -0.3048,
                  maxSize: -3048  //negative values ensure the features are rendered underground
                }, {
                  type: "sizeInfo",
                  minSize: 50,
                  axis: "width"
                }]
              });

            

Para ver el ejemplo en vivo, tendrá que estar familiarizado con la navegación para Vistas de Escena con el fin de poder ver las entidades debajo de la superficie.

Ver aquí el ejemplo en vivo

Ya se trate de representar entidades con su ubicación y tamaño del mundo real o crear representaciones temáticas de datos estadísticos las variables visuales con símbolos 3D en la API de ArcGIS para JavaScript Versión 4.0, le permitirá realizar visualizaciones impresionantes en 3D.

Tenga en cuenta que para usar variables visuales se requiere un amplio conocimiento de los datos, especialmente para la creación de visualizaciones temáticas. Smart Mapping de la versión 4.0 de la API de ArcGIS para JavaScript, le permitirá crear visualizaciones 3D sin conocer muy bien los datos.

Fuentes

Blog ArcGIS

https://blogs.esri.com/esri/arcgis/2016/02/01/3d-visualization-using-attributes-to-represent-real-world-sizes-of-features/

  • 3D GIS
  • App Developers
  • Developer, Web
  • 3D
  • 3D visualization
  • ArcGIS API for JavaScript
  • JavaScript,
  • Smart mapping,
  • Visualization,