Renderizar, Guardar, Darlo por terminado

ReneRubalcava

<\/HEAD>

<\/P>

Recientemente hablé un poco sobre algunas de las herramientas de visualización en el ArcGIS API for JavaScript. Las versiones recientes han introducido Smart Mapping<\/A>, que elimina algunas conjeturas al generar renderers basados en tus datos. También han introducido algunas características realmente geniales que tratan con blending of colors<\/A> basándose en los datos de tu mapa. Está llegando a un punto donde los devs no tendrán muchas excusas para mapas feos<\/EM>.<\/P><\/P>Una cosa que vi mencionada en el EsriUC la semana pasada<\/A> fue la idea de usar Smart Mapping para generar tu renderer, experimentar un poco y usarlo para generar el JSON del renderer que puedes usar más tarde sin tener que invocar las herramientas de Smart Mapping. Esto es totalmente posible, pero un poco confuso sobre cómo podrías hacerlo. Así que echemos un vistazo a un par de técnicas que podrías querer usar.<\/P>

<\/P>

Guárdalo localmente<\/H2>Entonces tal vez tu app permite al usuario hacer algunas consultas sobre los datos y actualizar el renderer basado en esa consulta. Un ejemplo directo de la documentación podría verse así<\/A>. Bueno, puedes agregar un par de funciones más a este ejemplo y guardar el renderer en localStorage. similar a como podrías con Features<\/A>. Esas funciones auxiliares podrían verse algo así.<\/P>

<\/P>

function saveLocal(data, field) {
  var key = location.pathname + '-' + field;
  localStorage.setItem(key, JSON.stringify(data));
}

function getLocal(field) {
  var key = location.pathname + '-' + field;
  var data = localStorage.getItem(key);
  if (data) {
    return JSON.parse(data);
  } else {
    return null;
  }
}<\/PRE><\/P>Luego, cuando configures Smart Mapping, podrías revisar localStorage para ver si hay un renderer existente y simplemente usar ese renderer guardado, evitando Smart Mapping por completo.<\/P><\/P>function createRenderer(field) {
  \/\/_smart mapping functionality begins
  var data = getLocal(field);
  if (data) {
    console.log('load renderer from localStorage');
    layer.setRenderer(jsonUtils.fromJson(data));
    layer.redraw();
    createLegend(map, layer, field);
  } else {
    smartMapping.createClassedColorRenderer({
      layer: layer,
      field: field,
      basemap: map.getBasemap(),
      classificationMethod: "quantile"
    }).then(function (response) {
      console.log('save renderer to localStorage');
      saveLocal(response.renderer.toJson(), field);
      layer.setRenderer(response.renderer);
      layer.redraw();
      createLegend(map, layer, field);
    });
  }
}<\/PRE><\/P>Ahora, eso es bastante genial.<\/EM> Los datos en este ejemplo no son muy complicados, pero puedes imaginar que si tuvieras un conjunto de datos grande, podría tomar un segundo o algo así para que Smart Mapping genere el renderer y este método podría ser una dosis de optimización para tu app. Aquí hay una 

demo completa<\/A> de esta aplicación en acción.<\/P>

<\/P>

Crea una App de Prueba<\/H2>Otra cosa genial que podrías hacer es crear una app de prueba similar a este ejemplo<\/A>.  Luego puedes agregar una etiqueta <pre><\/SPAN> a tu página y actualizarla con el JSON de los renderers cuando se actualice. El código podría verse algo así.<\/P><\/P>var data = colorRenderer.renderer.toJson();
var js = JSON.stringify(data, null, 2);
document.getElementById('results').innerHTML = js;<\/PRE><\/P>Así que ahora, puedes copiar y pegar este JSON directamente desde tu página web y podrías usarlo en una configuración local que podría usar la webmap spec<\/A>. Ahora no tienes que preocuparte por usar Smart Mapping en una app de producción que puede no necesitarlo, solo necesita los renderers con buen aspecto que puede generar. Aquí hay una app demo<\/A> mostrando cómo podrías hacer esto.<\/P>

<\/P>

Vete a casa<\/H2>Así que ahí lo tienes, ahora tienes un par de maneras para generar tus renderers, guardarlos y usarlos en tus apps para optimizar el rendimiento cuando sea necesario. Las herramientas de visualización en el ArcGIS API for JavaScript han avanzado mucho a lo largo de los años y creo que le da a los desarrolladores algunos recursos bastante buenos para hacer mapas con buen aspecto para sus apps. <\/> Has terminado, ya puedes irte a casa.<\/> <\/> <\/> <\/> <\/> <\/> <\/> <\/> <\/> <\/> <\/> <\/> <\/> <\/> For more geodev tips and tricks, check out my blog<\/>.