Coincidir la interfaz con tu mapa

ReneRubalcava

<\/HEAD>

<\/P>

https:\/\/www.flickr.com\/photos\/paloetic\/4795592340\/<\/A><\/SPAN><\/P>

<\/SPAN><\/P>¿Alguna vez has estado trabajando en una aplicación de mapeo y tal vez estás listando algunos datos en algún lugar que corresponden a los datos en tu mapa? Hemos visto ejemplos en el pasado que muestran cómo resaltar características en el mapa cuando pasas el cursor sobre un elemento relacionado en una lista o una tabla. <\/SPAN><\/P><\/SPAN><\/P>Eso es genial.<\/SPAN><\/P><\/SPAN><\/P>Pero, ¿alguna vez has querido ver rápidamente en tu lista a qué corresponde ese elemento en el mapa? ¿Quizás usando la simbología coincidente que se usa en el mapa? ¿Apuesto a que sí? <\/EM><\/SPAN><\/P><\/SPAN><\/P>Resulta que eso no es increíblemente difícil de hacer.<\/SPAN><\/P><\/SPAN><\/P>El renderer (tanto en v3.x como en v4beta) tiene un método llamado

getSymbol<\/A>. Este método toma un graphic. Pero si tuviera un graphic, ya tendría el símbolo, ¿qué intentas obtener aquí, hombre?!<\/EM><\/STRONG><\/SPAN><\/P><\/SPAN><\/P>Tranquilo.<\/SPAN><\/EM><\/P><\/SPAN><\/P>Supongamos que estás usando el QueryTask<\/A> para consultar tus datos. Los resultados de un QueryTask devuelven Features, que son Graphics, pero no tienen símbolos. Así que puedes iterar estos resultados y obtener el símbolo del renderer.<\/SPAN><\/P>

<\/SPAN><\/P>Eso podría verse algo así como este ejemplo.<\/SPAN><\/P>require([\n  'esri\/layers\/FeatureLayer',\n  'esri\/tasks\/QueryTask',\n  'esri\/tasks\/support\/Query'\n], function(\n  FeatureLayer, QueryTask, Query\n) {\n  var featureLayer = new FeatureLayer({\n    id: 'myLayer',\n    outFields: ['*'],\n    url: '<\/-span->

http:\/\/services2.arcgis.com\/LMBdfutQCnDGYUyc\/arcgis\/rest\/services\/Los_Angeles_County_Homeless_Programs_Services\/FeatureServer\/0<\/-span->'\n  });\n  featureLayer.then(function() {\n    var node = document.getElementById('my-list');\n    var q = new Query({\n      where: '1=1',\n      outFields: ['*'],\n      returnGeometry: false\n    });\n    var qTask = new QueryTask(featureLayer.url);\n    var promise = qTask.execute(q).then(function(results) {\n      return results.features.map(function(a) {\n        var sym = featureLayer.renderer.getSymbol(a);\n        a.symbol = sym;\n        return a;\n      });\n    });\n    promise.then(function(features) {\n      features.map(function(feature) {\n        var attr = feature.attributes;\n        var sym = feature.symbol;\n        var item = document.createElement('li');\n        var img = document.createElement('img');\n&nbsp:& nbsp & nbsp & nbsp ; img.setAttribute('src', sym.source.url); \ n & nbsp & nbsp & nbsp ; img.setAttribute('height', 25); \ n & nbsp & nbsp & nbsp ; img.setAttribute('width', 25); \ n & nbsp & nbsp & nbsp ; var span = document.createElement('span'); \ n & nbsp & nbsp & nbsp ; span.innerHTML = attr.ProgName; \ n & nbsp & nbsp & nbsp ; item.appendChild(img); \ n & nbsp & nbsp & nbsp ; item.appendChild(span); \ n & nbsp & nbsp & nbsp ; node.appendChild(item); \ n & nbsp & nbsp ; }); \ n & nbsp ; }); \ n }); \ n});< /PRE >< P >< / P >< P > No hay mapa en este ejemplo, ya que no es el foco aquí. Solo estamos creando un FeatureLayer para poder aprovechar su renderer. Luego, cuando hacemos la consulta de la capa, usamos el renderer para obtener el símbolo y crear un elemento de lista con una imagen y algo de texto.< / P >< P >< / P >< P > Puedes ver una demostración de esto < A href= "http://jsbin.com/wezuzucube/1/edit?js,output" rel= "nofollow noopener noreferrer" target= "_blank" > aquí < / A >.< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" > No puedes tomar este ejemplo y conectarlo para que cuando hagas clic en un elemento, pueda hacer zoom a la ubicación en el mapa y tal vez mostrar algunos datos detallados en otra parte de la página o en el popup, eso depende totalmente de ti. Solo quería mostrar lo fácil que es acceder a la simbología de las features para usarlas en tu interfaz de usuario real. ¡Así que adelante y hackea! < / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" > Para más consejos y trucos geodev, < A href= "http://odoe.net/blog/" rel= "nofollow noopener noreferrer" target= "_blank" > visita mi blog < / A >.< / SPAN >< / P >< / BODY >< / HTML >