Match interface met je kaart

ReneRubalcava

<\/HEAD>

<\/P>

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

<\/SPAN><\/P>Heb je ooit gewerkt aan een mapping-applicatie en misschien ergens een lijst met gegevens die overeenkomen met de gegevens op je kaart? We hebben in het verleden voorbeelden gezien die laten zien hoe je features op de kaart kunt markeren wanneer je over een gerelateerd item in een lijst of tabel zweeft.<\/SPAN><\/P><\/SPAN><\/P>Dat is gaaf.<\/SPAN><\/P><\/SPAN><\/P>Maar heb je niet ooit snel willen zien in je lijst wat dat item op de kaart vertegenwoordigt? Misschien met gebruik van de bijpassende symbologie die op de kaart wordt gebruikt? Ik wed dat je dat hebt? <\/EM><\/SPAN><\/P><\/SPAN><\/P>Het blijkt dat dat niet ongelooflijk moeilijk is om te doen.<\/SPAN><\/P><\/SPAN><\/P>De renderer (zowel in v3.x als v4beta) heeft een methode genaamd

getSymbol<\/A>. Deze methode neemt een graphic. Maar als ik een graphic had, had ik het symbool al, wat probeer je hier te halen man?!<\/EM><\/STRONG><\/SPAN><\/P><\/SPAN><\/P>Rustig aan.<\/SPAN><\/EM><\/P><\/SPAN><\/P>Laten we aannemen dat je de QueryTask<\/A> gebruikt om je data te queryen. De resultaten van een QueryTask retourneren Features, die Graphics zijn, maar ze hebben geen symbolen. Dus je kunt deze resultaten itereren en het symbool van de renderer krijgen.<\/SPAN><\/P>

<\/SPAN><\/P>Dat zou er ongeveer zo uit kunnen zien als dit voorbeeld.<\/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 &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;.var img = document.createElement('img'); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. img.setAttribute('src', sym.source.url); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. img.setAttribute('height', 25); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. img.setAttribute('width', 25); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. var span = document.createElement('span'); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. span.innerHTML = attr.ProgName; \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. item.appendChild(img); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. item.appendChild(span); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nb sp ; .& nb sp ; . nb sp ; . node.appendChild(item); \ n& nb sp ; .& nb sp ; .}); \ n& nb sp ; .}); \ n& nb sp ; .}); \ n});< / PRE >< P >< / P >< P >Er is geen kaart in dit voorbeeld, omdat dat hier niet het focuspunt is. We maken gewoon een FeatureLayer zodat we gebruik kunnen maken van de renderer. Wanneer we dan de laag queryen, gebruiken we de renderer om het symbool te krijgen en maken we een lijstitem met een afbeelding en wat tekst.< / P >< P >< / P >< P >Je kunt een demo hiervan < A href= "http://jsbin.com/wezuzucube/1/edit?js,output" rel= "nofollow noopener noreferrer" target= "_blank" >hier< / A > zien.< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >Je kunt dit voorbeeld niet zomaar nemen en koppelen zodat wanneer je op een item klikt, het kan inzoomen op de locatie op de kaart en misschien gedetailleerde gegevens weergeven in een ander deel van de pagina of in de popup, dat is helemaal aan jou. Ik wilde alleen laten zien hoe gemakkelijk het is om toegang te krijgen tot de symbologie van features om ze te gebruiken in je daadwerkelijke gebruikersinterface. Dus ga ervoor en hack erop los!< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >Voor meer geodev tips en trucs, < A href= "http://odoe.net/blog/" rel= "nofollow noopener noreferrer" target= "_blank" >bekijk mijn blog< / A >.< / SPAN >< / P >< / BODY >< / HTML >