<\/P>
Así que sí, tengo cierta afinidad por los Accessors<\/A> en la ArcGIS JS API 4.0 beta<\/A>.<\/P><\/P>He escrito mucho sobre ellos<\/A>.<\/P><\/P>Son increíblemente versátiles, permitiéndote hacer cosas que no podías hacer con la observación de eventos regular en la API 3.x. Puedes manipular la cámara, guardar el estado de tu aplicación y mucho mucho más<\/EM>.<\/P><\/P>Últimamente he estado pensando en posibles escenarios de edición<\/A> y dibujo<\/A> que puedes obtener de Accessors. Muchas veces, no solo estás editando geometría, estás editando atributos<\/EM>. He estado experimentando con cómo tú como desarrollador puedes aprovechar Accessors para lograr esto.<\/P><\/P>No entraré en detalles aquí, puedes obtener los detalles de los campos desde los datos de la capa devueltos por el ArcGIS REST API<\/A>. Esto te dirá qué campos están disponibles, cuáles son editables, cuál es el tipo de campo, lo cual es información realmente poderosa usada para la edición. Puedes aprovechar esta información para crear dinámicamente tus formularios de edición para tu aplicación.<\/P><\/P>Simplificaremos un poco este escenario.<\/EM><\/P><\/P>Asumamos simplemente que quieres hacer lo siguiente:<\/P>Mostrar entradas para cada campo de atributo<\/LI>Vincular los cambios en la entrada a los atributos<\/LI>Mostrar esos cambios<\/LI><\/UL><\/P>Accessors nos permiten hacer esto.<\/STRONG><\/P><\/P>Veamos cómo crear una entrada que vincule los cambios en la entrada al Accessor.<\/P><\/P> function createInput(\/*Accessor*\/)target, \/*FieldName*\/)name) {\n var node = document.createElement('div');\n node.setAttribute('class', 'form-group');\n var lbl = document.createElement('label');\n lbl.innerText = name;\n var input = document.createElement('input');\n input.setAttribute('class', 'form-control');\n input.setAttribute('type', 'text');\n input.setAttribute('name', name);\n input.setAttribute('value', inputValue(target, name));\n node.appendChild(lbl);\n node.appendChild(input);\n on(input, 'keyup', function(e) {\n \/\/- actualizar el accessor\n target[e.target.name] = e.target.value;\n });\n return node;\n; }< /PRE >< P >< / P >< P > En este ejemplo, escuchamos el evento keyup del input y actualizamos el Accessor. < EM >< STRONG > Bastante simple. < / STRONG >< / EM >< / P >< P >< / P >< P >< / P >< P > Ahora puedes observar los cambios realizados al accessor y hacer algo con eso. Probablemente querrás enviar una actualización a un FeatureService y simplemente sincronizar cada actualización con el servicio.< / P >< P >< / P >< P > Para demostrar este enlace, vincularé el formulario generado dinámicamente a otro formulario que está deshabilitado para mostrar las actualizaciones.< / P >< P >< / P >< PRE class = "lia-code-sample line-numbers language-none" > & nbsp ; qTask.execute(query).then(function (results) { & nbsp ; & nbsp ; & nbsp ; var feature = results.features[0]; & nbsp ; & nbsp ; & nbsp ; var attr = new Accessor(feature.attributes); & nbsp ; & nbsp ; & nbsp ; Object.keys(attr).sort().map(function(key) { & nbsp ; & nbsp ; & nbsp ; & nbsp ; \/\/- mostrar solo ciertos campos & nbsp ; & nbsp ; & nbsp ; & nbsp ; if (key !== 'OBJECTID' && key !== '_accessorProps') { & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var node = createInput(attr, key); & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var elem = document.getElementById(key); & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; elem.value = inputValue(attr, key); & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; \/\/- observar actualizaciones y actualizar el formulario deshabilitado& nb sp; & nb sp; & nb sp; & nb sp; & nb sp; & nb sp; attr.watch(key, function(val) {& nb sp; & nb sp; & nb sp; & nb sp; & nb sp; & nb sp; elem.value = val;& nb sp; & nb sp; & nb sp; });& nb sp; & nb sp; & nb sp; entryForm.appendChild(node);& nb sp; }& nb sp;} );& nb sp;} );< / PRE >< P > Este método realiza la consulta al servicio y convierte los atributos en un Accessor. También crea el formulario dinámico, pero observa los cambios en el Accessor y actualiza el formulario deshabilitado. Aquí es donde también podrías pasar actualizaciones a un FeatureService si quisieras, tal vez usando las herramientas de edición aquí< \/ A >.< \/ P > < P >< \/ P > < STRONG > Puedes ver esto en acción en < A href= "http:\/ \/jsbin.com \/bugime \/3 \/edit?js,output " rel= "nofollow noopener noreferrer" target= "_blank">este JSBIN< \/ A >.< \/ STRONG >.< \/ P > < P >< \/ P > < P > Aquí hay una versión un poco optimizada de < A href= "http:\/ \/jsbin.com \/bugime \/6 \/edit?js,output " rel= "nofollow noopener noreferrer" target= "_blank">este ejemplo< \/ A >.< \/ P > < PRE class= "lia-code-sample line-numbers language-none">& nb sp;qTask.execute(query).then(function (results) {& nb sp;& nb sp;& nb sp;var feature = results.features[0];& nb sp;& nb sp;& nb sp;var attr = new Accessor(feature.attributes);& nb sp;& nb sp;& nb sp;var props = Object.keys(attr).filter(function(key) {& nb sp;& nb sp;& nb sp;& nb sp;return key !== 'OBJECTID' && key !== '_accessorProps';& nb sp;& nb sp;& nb sp;} ).sort();& nb sp;& nb sp;& nb sp;var nodeCache = {};& nb sp;& nb sp;& nb sp;attr.watch(props, function(val, _, name) {& nb sp;& nb sp;& nb sp;& nb sp;var elem;& nb sp;& nb sp;& nb sp;if (nodeCache[name]) {& nb sp;& nb sp;& nb sp;& nb sp;& nb sp;element = nodeCache[name];& nb sp;& nb sp;} else { element = document.getElementById(name); nodeCache[name] = elem;}elem.value = val;} );props.map(function(prop) {var node = createInput(attr, prop);var elem = document.getElementById(prop);elem.value = inputValue(attr, prop);entryForm.appendChild(node);});});< / PRE >< P >< / P >< P > Realmente no es tan difícil cuando lo miras. Básicamente puedes delegar las actualizaciones al Accessor a algunos otros métodos y simplemente observar cuándo ocurren cambios en él.< / P >< P >< / P >< P > Juega con esto, métete profundamente en los Accessors y déjalo asimilarse, < EM >no te decepcionarás< / EM >.< / P >< P >< / P >< P > Para más consejos y trucos geodev, < A href= "http:\/ \/odoe.net \/blog \/ " rel= "nofollow noopener noreferrer" target= "_blank">visita mi blog< / A >.< / P >< / BODY >< / HTML >
He
Son increíblemente versátiles, permitiéndote hacer cosas que no podías hacer con la observación de eventos regular en la API 3.x. Puedes manipular la cámara, guardar el estado de tu aplicación y mucho mucho más<\/EM>.<\/P><\/P>Últimamente he estado pensando en
Simplificaremos un poco este escenario.<\/EM><\/P><\/P>Asumamos simplemente que quieres hacer lo siguiente:<\/P>Mostrar entradas para cada campo de atributo<\/LI>Vincular los cambios en la entrada a los atributos<\/LI>Mostrar esos cambios<\/LI><\/UL><\/P>Accessors nos permiten hacer esto.<\/STRONG><\/P><\/P>Veamos cómo crear una entrada que vincule los cambios en la entrada al Accessor.<\/P><\/P> function createInput(\/*Accessor*\/)target, \/*FieldName*\/)name) {\n var node = document.createElement('div');\n node.setAttribute('class', 'form-group');\n var lbl = document.createElement('label');\n lbl.innerText = name;\n var input = document.createElement('input');\n input.setAttribute('class', 'form-control');\n input.setAttribute('type', 'text');\n input.setAttribute('name', name);\n input.setAttribute('value', inputValue(target, name));\n node.appendChild(lbl);\n node.appendChild(input);\n on(input, 'keyup', function(e) {\n \/\/- actualizar el accessor\n target[e.target.name] = e.target.value;\n });\n return node;\n; }< /PRE >< P >< / P >< P > En este ejemplo, escuchamos el evento keyup del input y actualizamos el Accessor. < EM >< STRONG > Bastante simple. < / STRONG >< / EM >< / P >< P >< / P >< P >< / P >< P > Ahora puedes observar los cambios realizados al accessor y hacer algo con eso. Probablemente querrás enviar una actualización a un FeatureService y simplemente sincronizar cada actualización con el servicio.< / P >< P >< / P >< P > Para demostrar este enlace, vincularé el formulario generado dinámicamente a otro formulario que está deshabilitado para mostrar las actualizaciones.< / P >< P >< / P >< PRE class = "lia-code-sample line-numbers language-none" > & nbsp ; qTask.execute(query).then(function (results) { & nbsp ; & nbsp ; & nbsp ; var feature = results.features[0]; & nbsp ; & nbsp ; & nbsp ; var attr = new Accessor(feature.attributes); & nbsp ; & nbsp ; & nbsp ; Object.keys(attr).sort().map(function(key) { & nbsp ; & nbsp ; & nbsp ; & nbsp ; \/\/- mostrar solo ciertos campos & nbsp ; & nbsp ; & nbsp ; & nbsp ; if (key !== 'OBJECTID' && key !== '_accessorProps') { & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var node = createInput(attr, key); & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var elem = document.getElementById(key); & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; elem.value = inputValue(attr, key); & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; \/\/- observar actualizaciones y actualizar el formulario deshabilitado& nb sp; & nb sp; & nb sp; & nb sp; & nb sp; & nb sp; attr.watch(key, function(val) {& nb sp; & nb sp; & nb sp; & nb sp; & nb sp; & nb sp; elem.value = val;& nb sp; & nb sp; & nb sp; });& nb sp; & nb sp; & nb sp; entryForm.appendChild(node);& nb sp; }& nb sp;} );& nb sp;} );< / PRE >< P > Este método realiza la consulta al servicio y convierte los atributos en un Accessor. También crea el formulario dinámico, pero observa los cambios en el Accessor y actualiza el formulario deshabilitado. Aquí es donde también podrías pasar actualizaciones a un FeatureService si quisieras, tal vez usando las
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
