Combine a interface com seu mapa

ReneRubalcava

<\/HEAD>

<\/P>

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

<\/SPAN><\/P>Você já esteve trabalhando em uma aplicação de mapeamento e talvez esteja listando alguns dados em algum lugar que correspondem aos dados no seu mapa? Já vimos exemplos no passado que mostram como destacar feições no mapa quando você passa o mouse sobre um item relacionado em uma lista ou tabela. <\/SPAN><\/P><\/SPAN><\/P>Isso é legal.<\/SPAN><\/P><\/SPAN><\/P>Mas você já não quis ver rapidamente na sua lista a que aquele item corresponde no mapa? Talvez usando a simbologia correspondente que é usada no mapa? Eu aposto que sim?<\/EM><\/SPAN><\/P><\/SPAN><\/P>Acontece que isso não é incrivelmente difícil de fazer.<\/SPAN><\/P><\/SPAN><\/P>O renderer (tanto na v3.x quanto na v4beta) tem um método chamado

getSymbol<\/A>. Este método recebe um graphic. Mas se eu tivesse um graphic, eu teria o símbolo, o que você está tentando obter aqui, cara?!<\/EM><\/STRONG><\/SPAN><\/P><\/SPAN><\/P>Relaxa.<\/SPAN><\/EM><\/P><\/SPAN><\/P>Vamos supor que você está usando o QueryTask<\/A> para consultar seus dados. Os resultados de um QueryTask retornam Features, que são Graphics, mas eles não têm símbolos. Então você pode iterar esses resultados e obter o símbolo do renderer.<\/SPAN><\/P>

<\/SPAN><\/P>Isso poderia ser algo parecido com este exemplo.<\/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: '<\/>

http:\/\/services2.arcgis.com\/LMBdfutQCnDGYUyc\/arcgis\/rest\/services\/Los_Angeles_County_Homeless_Programs_Services\/FeatureServer\/0<\/>'<\/>\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:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:25); \ n & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; & Nbsp ; 25); \ 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 ; node.appendChild(item); \ n }); \ n }); \ n }); \ n});< / PRE >< P >< / P >< P > Não há mapa neste exemplo, pois não é o foco aqui. Estamos apenas criando um FeatureLayer para que possamos aproveitar seu renderer. Então, quando fazemos a consulta da camada, usamos o renderer para obter o símbolo e criar um elemento de lista com uma imagem e algum texto.< / P >< P >< / P >< P > Você pode ver uma demonstração disso < A href = "http://jsbin.com/wezuzucube/1/edit?js,output" rel = "nofollow noopener noreferrer" target = "_blank" > aqui < / A > .< / P >< P class = "p1" >< SPAN class = "s1" >< / SPAN >< / P >< P class = "p1" >< SPAN class = "s1" > Você pode pegar este exemplo e conectá-lo para que, quando clicar em um item, ele possa dar zoom na localização no mapa e talvez exibir alguns dados detalhados em outra parte da página ou no popup, isso depende totalmente de você. Eu só queria mostrar como é fácil acessar a simbologia das feições para usá-las na sua interface de usuário real. Então vá em frente e comece a hackear! < / SPAN >< / P >< P class = "p1" >< SPAN class = "s1" >< / SPAN >< / P >< P class = "p1" >< SPAN class = "s1" > Para mais dicas e truques geodev, < A href = "http://odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank" > confira meu blog < / A > . < / SPAN >< / P >< / BODY >< / HTML >