Faire correspondre l'interface avec votre carte

ReneRubalcava

<\/HEAD>

<\/P>

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

<\/SPAN><\/P>Avez-vous déjà travaillé sur une application de cartographie et peut-être listé des données quelque part qui correspondent aux données sur votre carte ? Nous avons vu des exemples dans le passé montrant comment mettre en surbrillance des entités sur la carte lorsque vous survolez un élément lié dans une liste ou un tableau.<\/SPAN><\/P><\/SPAN><\/P>C'est cool.<\/SPAN><\/P><\/SPAN><\/P>Mais n'avez-vous jamais voulu voir rapidement dans votre liste à quoi correspond cet élément sur la carte ? Peut-être en utilisant la symbologie correspondante utilisée dans la carte ? Je parie que oui ?<\/EM><\/SPAN><\/P><\/SPAN><\/P>Il s'avère que ce n'est pas incroyablement difficile à faire.<\/SPAN><\/P><\/SPAN><\/P>Le renderer (dans les versions v3.x et v4beta) possède une méthode appelée

getSymbol<\/A>. Cette méthode prend un graphic. Mais si j'avais un graphic, j'aurais le symbole, qu'essayez-vous d'extraire ici mec ?!<\/EM><\/STRONG><\/SPAN><\/P><\/SPAN><\/P>Détends-toi.<\/SPAN><\/EM><\/P><\/SPAN><\/P>Supposons que vous utilisez la QueryTask<\/A> pour interroger vos données. Les résultats d'une QueryTask renvoient des Features, qui sont des Graphics, mais ils n'ont pas de symboles. Vous pouvez donc parcourir ces résultats et obtenir le symbole depuis le renderer.<\/SPAN><\/P>

<\/SPAN><\/P>Cela pourrait ressembler à cet exemple.<\/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: '<\/<A class=\"jive-link-external-small\" href=\"https:\/\/community.esri.com\/external-link.jspa?url=http%3A%2F%2Fservices2.arcgis.com%2FLMBdfutQCnDGYUyc%2Farcgis%2Frest%2Fservices%2FLos_Angeles_County_Homeless_Programs_Services%2FFeatureServer%2F0\" target=\"_blank\">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        img.setAttribute('src', sym.source.url);\n&nbsp:& 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 & nbsp ; }); \ n});< / PRE >< P >< / P >< P > Il n'y a pas de carte dans cet exemple, car ce n'est pas l'objectif ici. Nous créons simplement un FeatureLayer afin de pouvoir utiliser son renderer. Ensuite, lorsque nous effectuons la requête du layer, nous utilisons le renderer pour obtenir le symbole et créer un élément de liste avec une image et du texte.< / P >< P >< / P >< P > Vous pouvez voir une démo de ceci < A href= "http://jsbin.com/wezuzucube/1/edit?js,output" rel= "nofollow noopener noreferrer" target= "_blank" > ici < / A > . < / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" > Vous ne pouvez pas prendre cet exemple et le connecter pour que lorsque vous cliquez sur un élément, il puisse zoomer sur l'emplacement sur la carte et peut-être afficher des données détaillées dans une autre partie de la page ou dans le popup, c'est totalement à vous de décider. Je voulais juste montrer à quel point il est facile d'accéder à la symbologie des entités pour les utiliser dans votre interface utilisateur réelle. Alors allez-y et hackez ! < / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" > Pour plus d'astuces geodev, < A href= "http://odoe.net/blog/" rel= "nofollow noopener noreferrer" target= "_blank" > consultez mon blog < / A > . < / SPAN >< / P >< / BODY >< / HTML >