Slaďte rozhraní s vaší mapou

ReneRubalcava

<\/HEAD>

<\/P>

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

<\/SPAN><\/P>Už jste někdy pracovali na mapové aplikaci a možná někde uváděli nějaká data, která odpovídají datům na vaší mapě? V minulosti jsme viděli ukázky, které ukazují, jak zvýraznit prvky na mapě, když najedete myší na související položku v seznamu nebo tabulce.<\/SPAN><\/P><\/SPAN><\/P>To je super.<\/SPAN><\/P><\/SPAN><\/P>Ale nechtěli jste někdy rychle vidět ve svém seznamu, čemu ta položka na mapě odpovídá? Třeba pomocí odpovídající symbologie, která se používá na mapě? Vsadím se, že ano.<\/EM><\/SPAN><\/P><\/SPAN><\/P>Ukazuje se, že to není vůbec složité udělat.<\/SPAN><\/P><\/SPAN><\/P>Renderer (v obou verzích v3.x i v4beta) má metodu nazvanou

getSymbol<\/A>. Tato metoda přijímá graphic. Ale kdybych měl graphic, měl bych symbol, co se tu snažíš tahat za slovo?!<\/EM><\/STRONG><\/SPAN><\/P><\/SPAN><\/P>Uklidni se.<\/SPAN><\/EM><\/P><\/SPAN><\/P>Předpokládejme, že používáte QueryTask<\/A> k dotazování vašich dat. Výsledky QueryTask vracejí Features, což jsou Graphics, ale nemají symboly. Takže můžete tyto výsledky projít a získat symbol z rendereru.<\/SPAN><\/P>

<\/SPAN><\/P>Může to vypadat například takto v ukázce.<\/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; img.setAttribute('src', sym.source.url);\n  img.setAttribute('height', 25);\n img.setAttribute('width', 25);\n var span = document.createElement('span');
span.innerHTML = attr.ProgName;
item.appendChild(img);
item.appendChild(span);
node.appendChild(item);
});
});
});
});< /PRE >< P >< / P >< P >V této ukázce není mapa, protože to není hlavní téma. Vytváříme pouze FeatureLayer, abychom mohli využít jeho renderer. Pak při dotazu vrstvy použijeme renderer k získání symbolu a vytvoříme prvek seznamu s obrázkem a nějakým textem.< / P >< P >< / P >< P >Demo tohoto můžete vidět < A href= "http://jsbin.com/wezuzucube/1/edit?js,output" rel= "nofollow noopener noreferrer" target= "_blank" > zde < / A > .< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >Tuto ukázku nemůžete jen tak vzít a připojit ji tak, aby po kliknutí na položku došlo k přiblížení na místo na mapě a možná zobrazení podrobných dat v jiné části stránky nebo v popup okně, to je zcela na vás. Chtěl jsem jen ukázat, jak snadné je získat přístup k symbologii prvků pro použití ve vašem skutečném uživatelském rozhraní. Tak směle do toho a hackujte!< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >< / SPAN >< / P >< P class= "p1" >< SPAN class= "s1" >Pro více tipů a triků z geodev navštivte < A href= "http://odoe.net/blog/" rel= "nofollow noopener noreferrer" target= "_blank" > můj blog < / A > .< / SPAN >< / P >< / BODY >< / HTML >