<\/HEAD>
De algemene weerssituatie in de afgelopen twee dagen over Duitsland werd gedomineerd door Niklas, een van de krachtigste stormen van de laatste jaren. En terwijl het land, en vooral de Bahn<\/SPAN><\/A>, nog bezig zijn met de opruimwerkzaamheden, bekijken we op een kaart wat er eigenlijk in deze twee dagen gebeurde:<\/P>Met behulp van twee CSV-tabellen, gedownload van de homepage van de Deutschen Wetterdienstes<\/SPAN><\/A>, is vrij snel een webmap gemaakt op ArcGIS Online. Elke tabel levert een laag voor elke van de twee dagen. Beide kaartlagen werden vervolgens als Hosted Feature Service gepubliceerd en openbaar vrijgegeven.
De services kunnen nu overal worden gebruikt, en met behulp van de nieuwe functies in de ArcGIS API for JavaScript<\/SPAN><\/A> genereert de kleine applicatie "Sturm Niklas over Duitsland<\/SPAN><\/A>" mooie weergaven van het weer dat bij de meetstations aankwam.<\/P>
<\/P>In wezen wordt hierbij gebruikgemaakt van het nieuwe "Smart Mapping"-module<\/SPAN><\/A>, oftewel "slimme cartografie". Onder dit toverwoord wordt het zowel nieuwkomers als ervaren gebruikers gemakkelijk gemaakt om nuttige en indrukwekkende kaarten te maken: De module biedt een reeks vooraf geconfigureerde renderers die eenvoudig op attributen kunnen worden toegepast en features classificeren op kleur, grootte of locatie. Eerst geïntroduceerd in de maart-release van ArcGIS Online, ondersteunt de JS API sinds versie 3.13 deze nieuwe mogelijkheden.<\/P>Als extraatje is de nieuwe "Search Widget"<\/SPAN><\/A> ingebouwd, waarin niet alleen een Locator Service, maar ook een eenvoudige willekeurige Feature Service kan worden doorzocht. In het geval van de "Sturm Niklas"-applicatie doorzoeken we gewoon het veld met de namen van de weerstations in een van onze twee Feature Layers.<\/P><\/P>
En wat doet de applicatie wat ArcGIS Online niet kan?<\/H3>Zoals gebruikelijk heeft men als ontwikkelaar meer mogelijkheden dan via de GUI. In dit geval worden de vooraf gedefinieerde Smart-Mapping-renderers in de code onderschept en afhankelijk van de gegevens aangepast. Zo profiteert men nog steeds van de standaardinstellingen zoals automatische Class Breaks of een Color Range, maar kan men individuele eigenschappen aanpassen.<\/P>De rendering gebeurt hierbij aan de clientzijde, wat bij grote hoeveelheden data natuurlijk prestatieverminderend kan werken. Bij zulke eenvoudige tabellen en twee over elkaar gelegde lagen is de weergavesnelheid echter binnen het bereik.<\/P><\/P>Rendering in de applicatie<\/H3>Via een menu kan worden geschakeld tussen verschillende weersgegevens. Hierbij wordt niet simpelweg een laag aan- of uitgezet, maar worden de renderers voor beide daglagen opnieuw gedefinieerd. De menukeuze definieert gewoon een nieuw attribuutveld, en via diverse case-onderscheidingen worden de instellingen van de renderers gezet. Hier een kort fragment waarin duidelijk wordt hoe wordt onderscheiden naar veldnaam (regels 2-6) of laagnaam (regel 15) en hoe in bepaalde gevallen aan symbolen van de slimme ClassBreakRenderer een andere kleur wordt toegekend:<\/P>else if ( <\/SPAN><\/EM>
field === "RR24" ||<\/SPAN><\/EM>
field === "FX" ||<\/SPAN><\/EM>
field === "SSS24" ||<\/SPAN><\/EM>
field === "SGLB24" ||<\/SPAN><\/EM>
field === "Höhe") {<\/SPAN><\/EM>
//Hier begint het Smart Mapping<\/SPAN><\/EM>
smartMapping.createClassedSizeRenderer({<\/EM><\/SPAN>
layer: renderLayer,<\/SPAN><\/EM>
field: field,<\/SPAN><\/EM>
basemap: map.getBasemap(),<\/SPAN><\/EM>
classificationMethod: "quantile"<\/SPAN><\/EM>
}).then(function (response) {<\/SPAN><\/EM>
// Volgende dag in grijs weergeven<\/SPAN><\/EM>
if (renderLayer.name==="DWD_20150401" || field === "Höhe") {<\/SPAN><\/EM>
array.forEach(response.renderer.infos, function (f) {<\/SPAN><\/EM>
f.symbol.color = new Color.fromHex("#CCCCCC");<\/SPAN><\/EM>
});<\/SPAN><\/EM>
}<\/EM><\/SPAN>
else {<\/EM><\/SPAN>
// op 31.3. onderscheid naar data<\/EM><\/SPAN>
if (
\u00dcber diese Fallunterscheidung werden f\u00fcr unterschiedliche Daten unterschiedliche Farben vergeben - Regen ist beispielsweise blau, Sonne ist gelb, w\u00e4hrend alle anderen \u201esmarten\u201c Eingeschaften des ClassedSizeRenderers unangetastet bleiben. Die Daten des 1.4., also des Sturm-Folgetags, werden in grau angezeigt. So sieht man auf einen Blick, welche Wetterstation an welchem Tag im \u201eRanking\u201c vorne lag: Mehr Farbe bedeutet, diese Station war am Sturmtag \u201ebesser\u201c. Ist der graue Kreis gr\u00f6\u00dfer, liegt die Station im Ranking des 1.4. weiter vorne.<\p>\u003cp\u003e\u003cimg __jive_id=\u002281316\u0022 alt=\u0022SonneRegen.png\u0022 class=\u0022image-2 jive-image\u0022 src=\u0022https:\/\\us.v-cdn.net\\6038851\\uploads\\legacyfs\\online\\81316_SonneRegen.png\u0022 style=\u0022width:\ 620px ; height : 610px ; \u0022 \/>\p>\u003cp\u003eÜber eine andere Fallunterscheidung werden keine Farbwerte , aber ein Offset gesetzt . So erscheinen die Werte der beiden Tage nebeneinander auf der Karte . \p> \ u003cimg __jive_id = \ u002281329 \ u0022 alt = \ u0022MitTemp.png \ u0022 class = \ u0022image-3 jive-image \ u0022 src = \ u0022https : \/ \/ us.v-cdn.net \/ 6038851 \/ uploads \/ legacyfs \/ online \/ 81329_MitTemp.png \ u0022 Stil = \ u0022Breite : 620px ; Höhe : 537px ; \ u0022 \/ > \ p > \ u003c p > So lassen sich mit wenig Code und wenig Aufwand viele schöne aussagekräftige Kartenansichten generieren . \ p > \ u003c p > \ u003ch3 id = \ u0022toc-hId-818160095 \ u0022 id = \ u0022toc-hId-818160095 \ u0022 > Code < / h3 > \ p > Die Datei " sturmniklas.html " mit dem kompletten Spaghetticode ( ja , es ist einfach nur ein längeres Sample - keine Applikation mit empfehlenswerter Architektur ! ) ist ebenfalls auf Github zu finden : < A href = " https : \/ \/ github.com \/ esride-nik \/ esride-nik.github.io " title = " https : \/ \/ github.com \/ esride-nik \/ esride-nik.github.io " rel = " nofollow noopener noreferrer " target = " _blank " >< SPAN Stil = " Farbe : Blau ; " > esride-nik \/ esride-nik.github.io < / span >< / a >< / p >< / body >< / html >
