Cartographie intelligente avec Niklas

NiklasKöhn

<\/HEAD>

La situation météorologique des deux derniers jours en Allemagne a été dominée par Niklas, l'une des tempêtes les plus fortes de ces dernières années. Et pendant que le pays, et en particulier la Bahn<\/SPAN><\/A>, est encore occupé aux travaux de nettoyage, nous regardons sur une carte ce qui s'est réellement passé ces deux jours :<\/P>Avec l'aide de deux tableaux CSV, téléchargés depuis la page d'accueil du Deutschen Wetterdienstes<\/SPAN><\/A>, une Webmap a été rapidement créée sur ArcGIS Online. Chaque tableau constitue une couche pour chacun des deux jours. Les deux couches cartographiques ont ensuite été publiées en tant que Hosted Feature Service et rendues publiques.
Les services peuvent désormais être consommés de partout, et grâce aux nouvelles fonctionnalités dans l'ArcGIS API for JavaScript<\/SPAN><\/A>, la petite application "Sturm Niklas über Deutschland<\/SPAN><\/A>" génère de belles vues du temps enregistré aux stations météorologiques.<\/P><\/P>Essentiellement, c'est le nouveau module Smart Mapping<\/SPAN><\/A> qui est utilisé, donc la "cartographie intelligente". Sous ce terme magique, il est facile pour les débutants comme pour les utilisateurs expérimentés de créer des cartes utiles et impressionnantes : le module propose une série de renderers préconfigurés qui peuvent être appliqués simplement aux attributs et classent les entités par couleur, taille ou position. Introduit initialement dans la version de mars d'ArcGIS Online, l'API JS supporte ces nouvelles possibilités depuis la version 3.13.<\/P>Comme autre nouveauté, le nouveau Search Widget<\/SPAN><\/A> a été intégré, permettant non seulement de rechercher via un Locator Service mais aussi dans n'importe quel Feature Service simple. Dans le cas de l'application "Sturm Niklas", nous recherchons simplement dans le champ des noms des stations météo dans l'une de nos deux couches de features.<\/P><\/P>

Et que fait l'application que ArcGIS Online ne peut pas faire ?<\/H3>Comme d'habitude, en tant que développeur on dispose de possibilités plus avancées que via l'interface graphique. Dans ce cas, les renderers Smart Mapping prédéfinis sont interceptés dans le code et modifiés selon les données. Ainsi on profite toujours des réglages par défaut comme les Class Breaks automatiques ou une gamme de couleurs, mais on peut ajuster certaines propriétés.<\/P>Le rendu se fait ici côté client, ce qui peut bien sûr affecter la performance avec de grandes quantités de données. Pour des tableaux aussi simples et deux couches superposées, la vitesse d'affichage reste cependant acceptable.<\/P><\/P>Rendu dans l'application<\/H3>Un menu permet de basculer entre différentes données météorologiques. Il ne s'agit pas simplement d'afficher ou masquer une couche, mais de redéfinir les renderers pour les deux couches journalières. La sélection du menu définit simplement un nouveau champ attributaire, et via diverses conditions les paramètres des renderers sont définis. Voici un extrait montrant clairement comment on distingue selon le nom du champ (lignes 2-6) ou celui de la couche (ligne 15) et comment dans certains cas une autre couleur est attribuée aux symboles du ClassBreakRenderer intelligent :<\/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>
    // Ici commence le 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>
      // Afficher le jour suivant en gris<\/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>
// Le 31.3., distinction selon les données<\/EM><\/SPAN>
if ( <\/EM>
field === "SSS24" ||