#mais pas le choix si je veux que ce soit un fond d écran | Explore Tumblr posts and blogs

woldenavro · 8 years ago

Text

Créer des images-cartes OSM dans canvas

Juste un petit “truc” technique pour générer des cartes OpenStreetMap sans avoir à passer par des API externes (type Leaflet ou autres) et générer une image à placer dans une balise canvas :

Choix de la carto à utiliser

Farfouiller dans les nombreux stocks de modèles dispos :

https://leaflet-extras.github.io/leaflet-providers/preview/ https://mc.bbbike.org/mc/?num=2&mt0=mapnik&mt1=hillshading

Choisir celle qui correspond à votre utilisation.

URL des tiles

Un tile est l’image de base ; une carto est constituée d’un tile central (image de base 256x256) selon coordonnées user qui sera entouré de ses tiles précédents et suivants. Une carto est donc un damier d’images accolées. On y reviendra.

Pour obtenir l’URL d’un tile :

1. soit clic-droit sur une partie de l’image et afficher le tile dans un nouvel onglet, par exemple http://a.tiles.wmflabs.org/bw-mapnik/18/136716/90463.png 2. soit alors copier-coller direct le lien (fourni dans le 1er lien : leaflet-providers) qui donne l’URL complète de l’image, par exemple http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png Dans tous les cas, l’URL est toujours constituée de la même chose : a. http:// ou https:// b. un sous-domaine (ou pas, des fois il n’y en a pas) : a.nom_de_domaine.com ou {s}.nom_de_domaine.com c. le domaine proprement dit : nom_de_domaine.com/dir1/dir2/ d. le zoom : 18 si indiqué ou valeur {z} e. les coordonnées si elles existent (136716 / 90463) sinon {x}/{y} f. l’extension : .png dans 99.9% des cas (parfois .jpg)

Le damier de tiles

Partons sur un exemple de 9 images accolées (3 en largeur x 3 en hauteur).

Le tile central (n°5) est celui de vos coordonnées. Vous êtes en plein centre de l’image. Son URL sera donc a.tiles.wmflabs.org/bw-mapnik/18/136716/90463.png pour un zoom de 18 et la latitude/longitude correspondante :

Le tile n°2 juste au-dessus sera votre nord, le n°8 en-dessous votre sud, le n°6 à droite votre est et le n°4 juste à gauche votre ouest. Les 4 tiles restants (n°1, 3, 7 et 9) étant vos NW, NE, SW et SE.

Avec ces 9 tiles de 256x256 pixels on a donc une carte de 768x768 pixels, ce qui est déjà pas mal.

Créer la map

On commence par un DIV de 768px genre :

Dans ce div on va placer nos 9 tiles. Pour cela nous avons besoin de créer un tableau des variables en JS :

var tabtiles = [];

et de notre valeur de zoom + nos coordonnées. Ces dernières s’obtiennent par un script mais c’est pas l’objet de cet article.

var lat = 48.605574; var lon = 7.753365; var zoom = 18; Le “truc” c’est maintenant de transformer nos valeurs de lat+lon (48,605574,7.753365) en valeurs d’URL tile (136716,90463)

On crée la fonction JS :

function doTile(lat,lon,zoom) { with(Math){ var m=pow(2,zoom); var lat_rad=lat*PI/180; return [floor((lon+180)/360*m), floor((1-Math.log(tan(lat_rad) + 1/cos(lat_rad))/PI)/2*m)]; } }

Et on récupère les vals en tableau via :

var tile = doTile(lat,lon,zoom); // retrouve le tile central

ou tile[0] et la valeur de latitude et tile[1] celle de longitude.

le code :

document.getElementById('map').innerHTML = '<img src="http://a.tiles.wmflabs.org/bw-mapnik/'+zoom+’/'+tile[0]+'+’/'+tile[1]+'.png'" />';

placera l’image centrale dans le DIV “map”.

Concernant le sous-domaine (a.) selon les éditeurs de cartes on peut soit s’en passer, soir mettre a. par défaut même si les URL indiquent b. ou c., il semble que ça n’ait pas d’importance. On peut donc switcher entre différents modèles de cartes en tableautant les URL et en appelant celle dont on a besoin :

tabURLmaps = [ “a.tiles.wmflabs.org/bw-mapnik“, “http://tile3.opencyclemap.org/landscape“, ““.......” ];

Création des 9 tiles

On a notre tile central (n°5) dans notre map ; reste à trouver les 8 autres...

La règle est simplissime :

soit x la val de latitude (136716) et y celle de longitude (90463) : Ligne 1 (3 tiles) : x-1/y-1 -> x/y-1 -> x+1/y-1 Ligne 2 (3 tiles) : x-1/y -> x/y -> x+1/y Ligne 3 (3 tiles) : x-1/y+1 -> x/y+1 -> x+1/y+1

Ce qui nous donne : x-1 : 136715 -> x : 136716 -> x+1 : 136717 y-1 : 90462 -> y : 90463 -> y+1 : 90464

Nous avons maintenant nos 9 URLs de tiles.

Ce qui se programme comme ça :

var num = 0; for (var y=0; y<=2; y++) { var ty = y-1; var tile_y = tile[1]+ty; // produit de y-1 à y+1 for (var x=0; x<=2; x++) { var tx = x-1; var tile_x = tile[0]+tx; // produit de x-1 à x+1 tabtiles[num] = tile_x+'/'+tile_y; num++; } }

puis, une fois notre table de tiles créée,

for (var i=0; i<9; i++) { document.getElementById('map').innerHTML += '<img src="'+tabURLmaps[0]+'/'+zoom+'/'+tabtiles[i]+'.png" />'; }

Nous avons bien nos 9 images dans notre DIV “map”.

La question des extensions et des keys

Certaines cartos ont des tiles en .jpg comme dit plus haut, donc créer une table d’extensions associée à celle des URL peut être une bonne idée pour éviter des soucis ultérieurs :

tabURLexts = [ “png“, “jpg“, ““.......” ];

L’URL tile devient donc :

'<img src="'+tabURLmaps[0]+'/'+zoom+'/'+tabtiles[i]+'.'+tabURLexts[0]+'" />';

D’autres exigent des keys user... pareil, on tableaute :

tabURLkeys = [ ““, "?apikey=180e6a0f....", ““.......” ];

et on rajoute à l’URL de chaque tile :

'<img src="'+tabURLmaps[0]+'/'+zoom+'/'+tabtiles[i]+'.'+tabURLexts[0]+tabURLkeys[0]+'" />';

Passer dans canvas

Une fois nos images créées reste à les passer dans canvas si on en a besoin. Le problème est que canvas interdit l’import d’image en provenance d’autres domaines (voir CORS et les questions de CrossDomain).

La solution consiste à déclarer chaque image comme “anonyme” au moment de son import dans canvas :

var imagemap = new Image(); imagemap.setAttribute('crossOrigin', 'anonymous'); imagemap.onload = function(){ ctx.drawImage(imagemap, left, top, 256, 256); // left et top sont calculés } imagemap.src = URL; // URL = ressource de l’image tile

Mais ça ne fonctionne pas toujours, certains éditeurs spécifient des inertdictions de CrossDomain. Testez chaque éditeur avant de mettre en votre map en prod.

L’intérêt de créer la map dans canvas est qu’on peut générer une image globale à la taille finale voulue : notre maillage de 9 tiles fait 756px de côté, or je veux une image de 400 x 400px :

ctx.drawImage(imagemap, left, top, 400, 400);

où imagemap est mon image finale et où left et top sont des marges négatives : 756 - 400 / 2 = -178

Drag-dropper le canvas

Le canvas est placé en position : absolute pour être déplaçable. J’ai construit il y a longtemps un script de DND qui permet de tout déplacer à la souris, au clavier ou à la main sur écrans tactiles. Une fois le canvas relâché on mesure la distance entre les positions top-left du canvas et de la carte, ce qui permet d’ajaxer l’image en base64 sur le serveur par xhr canvas.toDataURL("image/png");

Les curseurs de réglage

Les 3 curseurs envoient leur position à canvas. En récupérant le tableau des pixels et en algorithmant chaque fonction (netteté, n&b, contraste) on les modifie un par un :

function doNB(id,left) { var pos = parseInt(left/20); // de 0 à 9 var xr = 0.333333; var xv = 0.5; var xb = 0.166667; var imageData = ctx.getImageData(0, 0, canvas.offsetWidth, canvas.offsetHeight); var data = imageData.data; var origin = ctxoriginal; var pixs = origin.data; for(var i = 0; i < data.length; i += 4) { var gray = xr*data[i] + xv*data[i+1] + xb*data[i+2]; data[i] = ( ( pos*gray) + ((10-pos)*pixs[i]) ) /10; data[i+1] = ( ( pos*gray) + ((10-pos)*pixs[i+1]) ) /10; data[i+2] = ( ( pos*gray) + ((10-pos)*pixs[i+2]) ) /10; } ctx.putImageData(imageData, 0, 0); }

La nouvelle image est générée immédiatement et ajaxée en remplacement de la précédente.

Usages possibles

L’utilisation concernant ce projet en cours est de rendre ensuite le canvas cliquable, de détecter les points cliqués, de tracer les lignes de point à point et de passer l’info dans une iframe de la page où l’image sert de fond (plane horizontale) à une 3D webGL et où les points cliqués-refermés (tous les 4 clics) buildent des bâtiments 3D... Enjoy :-)

0 notes