Passer ses fonds de cartes en niveaux de gris - 4/4

Je termine ma série d'articles consacrés à l'utilisation de fonds de cartes en nuances de gris dans les applications web ArcGIS. Aujourd'hui, je vais me focaliser sur les applications HTML/JavaScript.

 

Bien que ce soit un peu plus complexe, il existe des solutions permettant de traiter à la volée les pixels des tuiles renvoyées par un service web ArcGIS. Le principe sera similaire à celui utilisé avec l'API ArcGIS for Flex, c'est-à-dire dériver la classe ArcGISTiledMapServiceLayer.

Pour pouvoir traiter l'image à la volée et lui appliquer un rendu de type "nuance de gris", nous allons utiliser un élément de type Canvas d'HTML5. Plusieurs navigateurs supportent cette nouveauté d'HTML5: Firefox, Chrome, Safari, Opera … d'autres comme Internet Explorer ne le supportent pas intégralement. La méthode proposée n'est donc pas compatible avec IE.

Pour bien comprendre le principe de l'utilisation d'un élément Canvas dans notre cas de figure, j'ai placé ci-dessous un exemple simple de code JavaScript permettant de transformer une image couleur en une image noir et blanc. Le code commence par créer et paramétrer un élément Canvas puis, via le contexte du Canvas (CanvasContext) on récupère les données de l'image (getImageData) c'est-à-dire le tableau de pixels de cette image. Une fois le tableau récupérer, vous pouvez alors appliquer les transformations colorimétriques souhaitées.

Dans notre cas, grâce au framework Dojo intégré dans l'API ArcGIS for JavaScript, nous allons pouvoir créer une sous-classe de ArcGISTiledMapServiceLayer. Nous allons ensuite surcharger la méthode GetTileURL afin d'appliquer un traitement à la volée sur chaque tuile reçue de notre serveur ArcGIS. 

Dans la page HTML de votre application, vous devrez ensuite ajouter le type de service personnalisé à la place de votre fond de carte habituel. 

 

Dans l'exemple suivant, l'application affiche par défaut le fond de carte en couleur et propose à l'utilisateur de l'afficher ensuite en niveaux de gris, en couleurs inversées ou en couleurs désaturées. Le code source de cette application se trouve ici.

Une dernière remarque, dans cet exemple on utilise une page proxy pour l'accès au serveur ArcGIS. Ce n'est pas strictement nécessaire pour une telle application, le code source peut donc être modifiée en conséquence. Cette page proxy est une page ashx (donc ASP .Net), si votre serveur n'exécute pas de code ASP .Net  vous pouvez également utiliser une page proxy Java/JSP ou PHP que vous téléchargerez ici.