Le blog francophone consacré
aux technologies Esri

Cartographier les vents avec l'API JavaScript ArcGIS

La multiplication des applications et des modèles d'applications HTML5/JavaScript ArcGIS ainsi que l'arrivée prochaine du générateur d'application ArcGIS Web AppBuilder le démontrent, l'API JavaScript ArcGIS est la plus mature et la plus complète du marché pour construire des applications web cartographiques. Exploitant les capacités offertes par HTML 5 (canvas, svg, ...), elle propose des fonctionnalités de rendu cartographique avancées qui vont encore s'accélérer en début d'année 2015 avec la version 4.0 et l'arrivée de la 3D sans plug-in. 


Il y a quelques mois, Esri à publier un exemple de code intéressant illustrant les capacités de rendus d'HTML 5 utilisées avec l'API JavaScript ArcGIS. Il s'agissait de cartographier les conditions de vent à la surface de la terre en présentant un rendu dynamique facilitant la lecture des directions et des vitesses de ces vents. 

Basé sur l'idée d'utiliser les capacités de rendu coté-client d'HTML 5, le projet de librairie Open-Source Wind-JS d'Esri est reparti du projet Open-Source Earth pour le rendre utilisable plus simplement dans différents frameworks de web mapping dont l'API JavaScript ArcGIS. 



Comment ça marche ?

Le code de cette librairie n'est rien d'autre que du code JavaScript exploitant un "canvas" et en particulier les possibilités de manipulation des pixels offertes par ce type d'élément d'HTML 5. Les données sont issues du Global Forecast System fournissant des jeux de données météo sur l'ensemble du monde via un format maillé (GRIB2). Ces données maillées sont préalablement converties en JSON avant d'être lues par la classe JavaScript Windy qui, en fonction de l'étendue courante de la carte, utilisent la grille de données pour en générer dynamiquement une surface continue et "lissée" à l'aide de la méthode d'interpolation bilinéaire. Une fois que cette surface des vents est générée, une fonction place de manière aléatoire des "particules" sur le canvas HTML 5. Ces "particules" sont ensuite mise en mouvement selon la direction et la vitesse correspondant à la cellule de la surface des vents dans laquelle elles se trouvent. En appliquant un dégradé de couleur à chaque "particule" en fonction de la vitesse, la vélocité des vents est visuellement renforcée.

Pour plus d'information, le projet Wind-JS se trouve sur le GitHub d'Esri. La page du projet décrit les dépendances et les projets utilisés par Esri pour développer cette librairie.


Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article: