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 objetos, rutas y extrusión

Kristian Ekenes, Enero 25 de 2016


Esta es la segunda 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 atributos para representar entidades como en el mundo real.

En la anterior publicación se discutió las consideraciones de trabajar con capas cuya simbología es plana dentro del SceneView. Estos incluyen IconSymbol3DLayer, LineSymbol3DLayer y FillSymbol3DLayer. Además aparte de tener en cuenta el color, tamaño y la geometría del símbolo, se debía definir si se debe cubrir el símbolo o no (Drape o Billboard).

En esta noticia vamos a revisar las visualizaciones con capas de símbolos volumétricos: ObjectSymbol3DLayer, PathSymbol3DLayer y ExtrudeSymbol3DLayer.

La siguiente tabla resume cada tipo de símbolo y que símbolos 3D se pueden aplicar:

  • Al definir la forma de ObjectSymbol3DLayer, las posibles formas en 3D son "esfera", "cilindro", "cubo", "cono", "diamante", o "tetraedro"; en contraste con aquellos enumerados en IconSymbol3DLayer.
  • El tamaño de los símbolos volumétricos siempre se definen en metros no en pixeles.

Definir el tamaño

Los tres tipos de símbolos volumétricos se definen siempre en un espacio del mundo real en 3D, no en el espacio de la pantalla como es el caso de sus homólogos de símbolo plano. El tamaño, rutas y extrusiones de los objetos 3D, aparecen más pequeños o más grandes dependiendo de la distancia que tengan desde la cámara.

En el siguiente ejemplo, se utiliza una esfera en un ObjectSymbol3DLayer para simbolizar las ciudades del mundo. Note que el tamaño se establece en un valor de 50 000 (m).

var renderer = new SimpleRenderer({
  symbol: new PointSymbol3D({
    symbolLayers: [new ObjectSymbol3DLayer({
      resource: { primitive: "sphere" },
      material: { color: "orange" },
      width: 50000
    })]
  })
});

            

Haga clic en la imagen para ver el ejemplo

Variables visuales

Como se discutió en anteriores publicaciones, podemos utilizar las variables visuales para modificar el tamaño de los símbolos teniendo en cuenta uno o más atributos. Esto se puede realizar para el ejemplo anterior, variando el tamaño de las esferas según la densidad poblacional de la ciudad.

Los mismos principios para la definición de las variables visuales en 2D se aplican en 3D. Sólo recuerde: los tamaños en 3D deben reflejar metros, no píxeles. En el siguiente ejemplo, se utilizó ExtrudeSymbol3DLayer en un PolygonSymbol3D para crear una visualización en 3D de la densidad de población por estado de EE.UU.


var extrudePolygonRenderer = new SimpleRenderer({
  symbol: new PolygonSymbol3D({
    symbolLayers: [new ExtrudeSymbol3DLayer()]
  }),
  visualVariables: [{
    type: "sizeInfo",
    field: "POP07_SQMI",
    minSize: 40000,  //40km in height
    maxSize: 1000000,  //1,000km in height
    minDataValue: 1,  //1 person per square mile
    maxDataValue: 1000  //1000 people per square mile
  }, {
    type: "colorInfo",
    field: "POP07_SQMI",
    minDataValue: 1,
    maxDataValue: 1000,
    colors: [ "white", "red" ]
  }]
});


            

Haga clic en la imagen para ver el ejemplo

En la cartografía tradicional, no se suele visualizar el mismo atributo tanto en color y tamaño. En 3D, sin embargo la percepción del tamaño puede ser problemático. Debido a la perspectiva, es difícil procesar la diferencia de tamaño espacial de las entidades. Por ejemplo, supongamos que usted está buscando dos edificios que están a 200 pies de altura. Uno de ellos se encuentra a 100 yardas frente a usted y el otro a una milla de distancia. El edificio que se encuentra a una milla de distancia aparecerá mucho más pequeño que el que esta a sólo 100 yardas de distancia, a pesar de que ambos son del mismo tamaño.

El mismo principio hace que sea difícil juzgar los tamaños en representaciones 3D. Por lo tanto al adicionar una rampa de color para el mismo atributo, nos ayuda a identificar fácilmente los patrones espaciales que de otro modo serían difíciles de entender. Por supuesto, usted tiene la libertad para utilizar el color para un segundo atributo, en lugar del mismo que se usa para el tamaño. En conclusión depende de usted como desarrollador y cartógrafo.

Trabajar con la propiedad Ejes en objetos sizeInfo

La configuración de un solo valor en ExtrudeSymbol3DLayer y en PathSymbol3DLayer es suficiente, ya que la extrusión de polígonos solo afecta la altura, y para las rutas se usa también un único valor que permite configurar el diámetro de un tubo.

Sin embargo, trabajar con objetos en 3D puede ser más complejo. Los objetos como cilindros y pirámides tienen tres ejes a considerar: altura, ancho (diámetro de este a oeste) y profundidad (diámetro de norte a sur). La propiedad eje de la variable visual sizeInfo nos permite definir cada uno de estos valores. En el ejemplo de huracanes que se muestra a continuación, se establece un tamaño constante del ancho y la profundidad de los ejes para que todos los cilindros tengan el mismo tamaño de diámetro (50 km). El eje de altura se utiliza para ajustar la altura de cada entidad entre 60 y 450 kilómetros, dependiendo del valor del campo WIND_KTS.


[{
  type: "sizeInfo",
  field: "WIND_KTS",
  axis: "height"
  minDataValue: 20,
  maxDataValue: 150,
  minSize: 60000,
  maxSize: 450000,
}, {
  type: "sizeInfo",
  axis: "widthAndDepth"
  minSize: 50000
}]


            

Haga clic en la imagen para ver el ejemplo

Debido a que tenemos tres ejes para trabajar, podemos visualizar dos o más variables con el tamaño. En el siguiente ejemplo dos atributos se mapean con el tamaño en diferentes ejes: altura (y color) indica el porcentaje de la población afiliada al partido democrático y el ancho indica el porcentaje de personas que se identifican a sí mismos como conservadores.


visualVariables: [
{
  type: "sizeInfo",
  field: "MP06024a_B",  //Affiliated with Democratic Party
  normalizationField: "TOTPOP_CY",  //divided by total population
  axis: "height",
  minDataValue: 0.15,
  maxDataValue: 0.25,
  minSize: 10000,
  maxSize: 2000000,
  valueUnit: "unknown"
}, {
  type: "sizeInfo",
  field: "CONSERVATIVE",  //people who identify as conservative
  normalizationField: "TOTPOP_CY",  //divided by total population
    axis: "widthAndDepth",
  minDataValue: 0.21,
  maxDataValue: 0.26,
  minSize: 10000,
  maxSize: 100000,
  valueUnit: "unknown"
}, {
  type: "colorInfo",
  field: "MP06024a_B",  //Affiliated with Democratic Party
  normalizationField: "TOTPOP_CY",  //divided by total population
  colors: ["#FF3030", "blue"],
  minDataValue: 0.15,
  maxDataValue: 0.25
}]
            

            

Haga clic en la imagen para ver el ejemplo

En este ejemplo estamos mirando dos variables: El porcentaje de la población que son demócratas y el porcentaje de la población que son conservadores. Teniendo en cuenta la definición de las variables visuales, esperaríamos que las zonas con un alto porcentaje de demócratas tengan cilindros altos y delgados de color azul, dado que los conservadores tienden a favorecer al partido republicano. Eso ciertamente parece ser el caso en áreas como San Francisco y Nueva York. Curiosamente, vemos focos en áreas de baja población, donde parece que hay un mayor porcentaje de conservadores y demócratas. No debemos asumir que la mayoría de la gente en estas áreas se identifica como demócratas conservadores, pero mirando los números (a través de la ventana emergente) en cada uno de estos condados, es razonable concluir que hay un buen número de personas que podrían identificarse como tal.

Limitaciones

El uso de la propiedad eje de sizeInfo para representar más de un atributo puede aligerar el camino para algunas visualizaciones fascinantes, pero también puede crear escenas muy complicadas y confusas. Como es el caso cuando se trabaja con otras variables visuales de fines temáticos, lo mejor es permanecer lo más simple posible. Si bien las posibilidades parecen no tener fin, una regla general es que los mapas que visualizan más de dos o tres atributos a la vez se vuelven muy difíciles de interpretar. Por lo tanto, a pesar de que las variables visuales son de un gran alcance, asegúrese de utilizarlas con precaución en los mapas temáticos.

Debido a que las capas de símbolos 3D utilizan metros para representar el ancho, la profundidad y la altura de las entidades, usted puede utilizar las variables visuales para mapear los tamaños de las entidades que existen en el mundo real. Aquí es donde la propiedad eje sobre el objeto sizeInfo se convierte particularmente poderosa. En la noticia final de esta serie, se va a hablar de cómo tomar ventaja de las variables visuales cuando se mapean las ubicaciones y tamaños de sus entidades en el mundo real.