Schnittstelle mit Ihrer Karte abgleichen

ReneRubalcava

<\/HEAD>

<\/P>

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

<\/SPAN><\/P>Haben Sie schon einmal an einer Mapping-Anwendung gearbeitet und vielleicht irgendwo Daten aufgelistet, die den Daten auf Ihrer Karte entsprechen? Wir haben in der Vergangenheit Beispiele gesehen, die zeigen, wie man Features auf der Karte hervorhebt, wenn man über ein zugehöriges Element in einer Liste oder Tabelle fährt.<\/SPAN><\/P><\/SPAN><\/P>Das ist cool.<\/SPAN><\/P><\/SPAN><\/P>Aber wollten Sie nicht schon einmal schnell in Ihrer Liste sehen, was dieses Element auf der Karte entspricht? Vielleicht unter Verwendung der gleichen Symbologie, die auf der Karte verwendet wird? Ich wette, das haben Sie!<\/EM><\/SPAN><\/P><\/SPAN><\/P>Es stellt sich heraus, dass das gar nicht so schwierig ist.<\/SPAN><\/P><\/SPAN><\/P>Der Renderer (sowohl in v3.x als auch in v4beta) hat eine Methode namens

getSymbol<\/A>. Diese Methode nimmt ein Graphic entgegen. Aber wenn ich ein Graphic hätte, hätte ich das Symbol, was versuchen Sie hier zu holen, Mann?!<\/EM><\/STRONG><\/SPAN><\/P><\/SPAN><\/P>Beruhigen Sie sich.<\/SPAN><\/EM><\/P><\/SPAN><\/P>Nehmen wir an, Sie verwenden die QueryTask<\/A>, um Ihre Daten abzufragen. Die Ergebnisse einer QueryTask liefern Features zurück, die Graphics sind, aber keine Symbole haben. Also können Sie diese Ergebnisse durchlaufen und das Symbol vom Renderer erhalten.<\/SPAN><\/P>

<\/SPAN><\/P>Das könnte ungefähr so aussehen wie dieses Beispiel.<\/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<\/<A>''\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.;& nb sp.;& nb sp.;& nb sp.;& nb sp.;& nb sp.;& nb sp;. node.appendChild(item); \ n & nb sp.;& nb sp.;& nb sp.;& nb sp.; }); \ n & nb sp.; }); \ n & nb sp.; }); \ n});< /PRE >< P >< / P >< P > In diesem Beispiel gibt es keine Karte, da dies hier nicht im Fokus steht. Wir erstellen nur einen FeatureLayer, um dessen Renderer zu nutzen. Wenn wir dann die Abfrage (Query) der Ebene durchführen, verwenden wir den Renderer, um das Symbol zu erhalten und ein Listenelement mit einem Bild und etwas Text zu erstellen.< / P >< P >< / P >< P > Eine Demo davon können Sie < A href= "http://jsbin.com/wezuzucube/1/edit?js,output" rel= "nofollow noopener noreferrer" target= "_blank" > hier < / A > sehen.< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" > Sie können dieses Beispiel nicht einfach übernehmen und so verbinden, dass beim Klicken auf ein Element zur Position auf der Karte gezoomt wird und vielleicht detaillierte Daten in einem anderen Bereich der Seite oder im Popup angezeigt werden – das liegt ganz bei Ihnen. Ich wollte nur zeigen, wie einfach es ist, Zugriff auf die Symbologie von Features zu erhalten, um sie in Ihrer tatsächlichen Benutzeroberfläche zu verwenden. Also legen Sie los und hacken Sie drauf los! < / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" > Für weitere geodev Tipps und Tricks besuchen Sie < A href= "http://odoe.net/blog/" rel= "nofollow noopener noreferrer" target= "_blank" > meinen Blog < / A > . < / SPAN >< / P >< / BODY >< / HTML >