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

x

Buscador

Buscador

Los mejores momentos de la CCU

Visualización de datos con la API de ArcGIS para JavaScript: Mostrar datos por valores únicos


En la noticia anterior llamada Visualización de datos con la API de ArcGIS para JavaScript se ha mencionado que la mejor manera para visualizar los datos es hacer preguntas sobre el propósito del mapa; además de tener en cuenta “el donde” de los eventos como se hizo anteriormente, se pueden también responder las siguientes preguntas:

  • ¿Qué cadenas de restaurantes se encuentran en mi ciudad?
  • ¿Cuáles son los cultivos que predominan en mi país?
  • ¿Qué nivel de delitos tiene mi región?

El Visualizador de valor único es útil para responder estas preguntas.

El Visualizador de valor único analiza los campos de un atributo de su capa y proporciona un símbolo para cada valor único en ese campo. En este ejemplo utilizaremos nuevamente el servicio de Centros comerciales de Bogotá, el mapa resultante de este ejercicio mostrara los diferentes tipos de Centros comerciales que existen en Bogotá, como “Supermercado”, “Centro comercial”, “Tienda deportiva”, “Librería”, etc.

Crear un Visualizador de valor único.

La manera de crear símbolos únicos es muy similar a la forma de crear una simbología simple, el cual ha sido mencionado en la anterior noticia. La diferencia radica únicamente en que ahora usted deberá introducir un argumento adicional, los valores de este campo determinaran que símbolo se utiliza para cada entidad en el mapa. En este ejemplo escogimos el atributo “Tipo”.

var symbol = new SimpleMarkerSymbol();
symbol.setColor(new Color("#cccccc"));
var renderer = new UniqueValueRenderer(symbol, "Tipo");

El objeto símbolo creado anteriormente es el símbolo por defecto para sus datos.

Definir símbolos para sus valores únicos

El propósito de un mapa que responde preguntas específicas es mostrar con claridad las entidades en el mapa, lógicamente agrupadas por algo que tiene en común, en este caso por el valor único de un campo. Para realizar esto se deben crear símbolos relacionados con el tema, pero suficientemente diferentes entre sí debido a los distintos patrones que pueden surgir en el mapa. Definir símbolos es un proceso iterativo: Probar y modificar en base a su resultado.

Para especificar un símbolo para cada valor único del atributo Tipo, usted puede utilizar el método AddValue() para asignarle a cada valor su símbolo único.

var symbol1 = new SimpleMarkerSymbol();
symbol1.setColor(new Color("#ed5151"));
renderer.addValue("Libreria", symbol1);

var symbol2 = new SimpleMarkerSymbol();
symbol2.setColor(new Color("#0080FF"));
renderer.addValue("Centro Comercial", symbol2);

var symbol3 = new SimpleMarkerSymbol();
symbol3.setColor(new Color("#F4FA58"));
renderer.addValue("Supermercado", symbol3);


Puede que no sea necesario proporcionar símbolos únicos para todos los valores en el campo. De hecho, el público casi no puede distinguir más de diez colores diferentes. Se recomienda agregar solamente símbolos de las categorías superiores, y los demás en un grupo llamado "otros." El resto obtendrá automáticamente el símbolo por defecto, que se define en el constructor UniqueValueRenderer.

Un paso más adelante: Convertir los datos sin procesar en categorías predefinidas

A veces hay un campo con demasiados valores únicos que hacen que sea difícil crear una buena visualización de ese campo. Un buen truco que puede utilizar con el visualizador de valor único es convertir al instante los datos a unas pocas categorías predefinidas. Por ejemplo, en lugar de tomar los valores del campo "Dirección", si desea agrupar los datos en algunas categorías como "Zona oeste", "Zona Norte", etc.; basado en el tipo de uso se puede tomar ventaja de este truco para convertir los datos al instante.

La conversión de valores al instante le ahorra el paso de tener que agregar un campo a los datos y calcularlos, si eso es algo que no desea hacer o no puede hacer.

La magia empieza con la creación del constructor Renderer:

var renderer = new UniqueValueRenderer(symbol, function(graphic){ ... });

Para el segundo parámetro en el código en lugar de pasar un nombre de campo (string) se proporciona una función para convertir los valores en ese campo. Esta función le permite acceder a cada gráfico en la capa. Cada objeto gráfico contiene todas las propiedades que necesita para mostrar en el mapa, incluyendo la geometría, atributos, etc.

Basado en el campo "Dirección", podemos convertir la dirección en dos categorías: Zona oeste y otras áreas. Utilizamos graphic.attributes ['Direccion'] para acceder a este campo. Si una dirección contiene abreviatura CA, OR o WA, categorizamos que se encuentra en la zona oeste.

var renderer = new UniqueValueRenderer(null, function(graphic){
if (graphic.attributes['Direccion'].indexOf("CA") !== -1 ||
graphic.attributes['Direccion'].indexOf("OR") !== -1 ||
graphic.attributes['Direccion'].indexOf("WA") !== -1) {
return "Zona Oeste";
} else {
return "Otras Áreas";
};
});

A partir de la creación del visualizador, también tenemos que proporcionar símbolos para estas categorías recién creadas:

var symbol1 = new SimpleMarkerSymbol();
symbol1.setColor(new Color("#7b3578"));
renderer.addValue("Zona Oeste", symbol1);

var symbol2 = new SimpleMarkerSymbol();
symbol2.setColor(new Color("#cccccc"));
renderer.addValue("Otras Areas", symbol2);

Una aplicación finalizada se puede encontrar aquí. Usted pudo observar como los valores únicos le permiten visualizar no sólo los datos que se encuentran en su capa de entidades, sino también nueva información calculada a partir de un campo de su capa.

Lo que vendrá después

Esta técnica es realmente muy poderosa, es por esto que en la siguiente noticia usted vera las diferentes maneras de visualizar datos numéricos, así como la forma de incluir un pop-up y una leyenda en sus aplicaciones.


Fuentes

Blog ArcGIS - Visualización de datos con la API de ArcGIS para JavaScript: Mostrar datos por valores únicos

http://blogs.esri.com/esri/arcgis/2014/09/11/data-visualization-with-arcgis-api-for-javascript-show-data-by-unique-value/

© Esri Colombia 2017 - Calle 90 # 13 - 40 Piso 5

+57 (1) 650-1575