Cartografía inteligente con Niklas

NiklasKöhn

<\/HEAD>

La situación meteorológica general de los últimos dos días sobre Alemania estuvo dominada por Niklas, una de las tormentas más fuertes de los últimos años. Y mientras el país, y ante todo la Bahn<\/SPAN><\/A>, aún están ocupados con las labores de limpieza, observamos en un mapa qué fue lo que realmente sucedió en estos dos días:<\/P>Con la ayuda de dos tablas CSV, descargadas desde la página web del Deutschen Wetterdienstes<\/SPAN><\/A>, se creó rápidamente un Webmap en ArcGIS Online. Cada tabla genera una capa para cada uno de los dos días. Ambas capas del mapa fueron posteriormente publicadas como Hosted Feature Service y liberadas públicamente.
Los servicios ahora pueden ser consumidos desde cualquier lugar, y con la ayuda de las nuevas características en la ArcGIS API for JavaScript<\/SPAN><\/A>, la pequeña aplicación "Sturm Niklas sobre Alemania<\/SPAN><\/A>" genera bonitas vistas del clima que llegó a las estaciones de medición.<\/P><\/P>Esencialmente se utiliza el nuevo módulo "Smart Mapping"<\/SPAN><\/A>, es decir, "cartografía inteligente". Bajo esta palabra mágica se facilita tanto a principiantes como a usuarios experimentados crear mapas útiles e impresionantes: el módulo ofrece una serie de renderizadores preconfigurados que pueden aplicarse fácilmente a atributos y clasifican las características por color, tamaño o ubicación. Introducido inicialmente en la versión de marzo de ArcGIS Online, la JS API soporta estas nuevas funcionalidades desde la versión 3.13.<\/P>Como otro beneficio se incorporó el nuevo "Search Widget"<\/SPAN><\/A>, que no solo puede buscar en un Locator Service, sino también en cualquier Feature Service simple. En el caso de la aplicación "Sturm Niklas", simplemente buscamos en el campo con los nombres de las estaciones meteorológicas en una de nuestras dos capas de entidades.<\/P><\/P>

¿Y qué hace la aplicación que ArcGIS Online no puede?<\/H3>Como es habitual, como desarrollador se tienen más posibilidades que a través de la GUI. En este caso, los renderizadores Smart Mapping predefinidos son interceptados en el código y modificados según los datos. Así se sigue beneficiando uno de las configuraciones predeterminadas como los Class Breaks automáticos o un rango de colores, pero se pueden ajustar propiedades individuales.<\/P>El renderizado ocurre en el cliente, lo que puede afectar el rendimiento con grandes volúmenes de datos. Sin embargo, con tablas tan simples y dos capas superpuestas, la velocidad de visualización está dentro del rango aceptable.<\/P><\/P>Renderizado en la aplicación<\/H3>A través de un menú se puede cambiar entre diferentes datos meteorológicos. No se muestra u oculta una capa, sino que se redefinen los renderizadores para las dos capas diarias. La selección del menú simplemente define un nuevo campo atributo y mediante diversas condiciones se establecen las configuraciones de los renderizadores. Aquí un breve extracto donde se muestra claramente cómo se distingue según el nombre del campo (líneas 2-6) o del nombre de la capa (línea 15) y cómo en ciertos casos a los símbolos del ClassBreakRenderer inteligente se les asigna otro color:<\/P>else if ( <\/SPAN><\/EM>
    field === "RR24" ||<\/SPAN><\/EM>
    field === "FX" ||<\/SPAN><\/EM>
    field === "SSS24" ||<\/SPAN><\/EM>
    field === "SGLB24" ||<\/SPAN><\/EM>
    field === "Höhe") {<\/SPAN><\/EM>
    //Aquí comienza el Smart Mapping<\/SPAN><\/EM>
smartMapping.createClassedSizeRenderer({<\/EM><\/SPAN>
layer: renderLayer,<\/SPAN><\/EM>
       field: field,<\/SPAN><\/EM>
       basemap: map.getBasemap(),<\/SPAN><\/EM>
       classificationMethod: "quantile"<\/SPAN><\/EM>
    }).then(function (response) {<\/SPAN><\/EM>
      // Mostrar el día siguiente en gris<\/SPAN><\/EM>
      if (renderLayer.name===\"DWD_20150401\" || field === \"Höhe\") {<\/SPAN><\/EM>
       array.forEach(response.renderer.infos, function (f) {<\/SPAN><\/EM>
          f.symbol.color = new Color.fromHex(\"#CCCCCC\");<\/SPAN><\/EM>
       });<\/SPAN><\/EM>
}<\/EM><\/SPAN>
else {<\/EM><\/SPAN>
// El 31.3. diferenciación según datos<\/EM><\/SPAN>
if ( <\/EM><\/SPAN>
field === \"SSS24\" ||<\/EM><\/SPAN>
field === \"SGLB24\") {<\/EM><\/SPAN>
array.forEach(response.renderer.infos, function (f) {<\/EM>























f.symbol.color = new Color.fromHex("#EDD873");
});
}
}