Accueil / Blog / Métier / 2014 / Dessiner une ville à la main avec TileMill (1 - Les bâtiments)

Dessiner une ville à la main avec TileMill (1 - Les bâtiments)

Par Karl Azémar — publié 14/03/2014
Contributeurs : Eric Bréhault, Frédéric Bonifas, Mathieu Leplatre
L'objectif de ce projet est d'afficher une carte dans un style crayonné à partir de données géométriques stockées en base de données PostgreSQL/PostGIS. Nous voyons ici comment mettre en forme les bâtiments.
Dessiner une ville à la main avec TileMill (1 - Les bâtiments)

Appliquer un effet de dessin à des données OSM

Cette carte de Toulouse a été créée à partir de données provenant de OpenStreetMap ; la zone affichée se situe à Toulouse et ses environs. La réalisation est faite sans modifier les données d'origine, afin de pouvoir appliquer ces styles à d'autres emprises avec un minimum d'interventions techniques.

La majeure partie du travail résidait dans la définition d'un affichage « imparfait » des données. Il existe à priori peu de projets originaux de cartes stylisées sur le web (notamment la magnifique 'Pirate Map' de AJ Ashton, mais également les cartes historiques de Toulouse). Pour parvenir au résultat, j'ai utilisé les possibilités du code de TileMill, celles de PostGis, et créé sous GIMP des textures adaptées.

Automatiser l'imperfection d'un dessin manuel

Lorsqu'on dessine une carte à la main on va forcément perdre des détails, dépasser des limites, faire des tracés plus ou moins fidèles.

En utilisant des moteurs de rendu, les tracés sont rectilignes, les fonds de couleur unis :

Dessin Toulouse rendu de base

J'ai voulu automatiser un aspect manuel, en 4 étapes :

  1. modifier les tracés, afin de donner l'impression d'un coup de crayon trop rapide, qui sur un croquis aurait permis de schématiser les tracés
  2. allonger les lignes afin de reproduire un tracé rapide à la règle
  3. remplir les polygones avec du crayonnage
  4. ajout de nouvelles lignes de contour, légèrement décalées pour créer un effet de tracés de crayon

Tout cela sera appuyé par des textures créées avec Gimp, afin de reproduire un effet de coloriage et de grain de papier.

Une première ébauche au crayon

La première étape est assez facile à réaliser : TileMill propose un attribut (line-smooth) qui amplifie les tracés.

line-color: lighten(@building-line-color,15%);
line-width: 0.5;
line-opacity: 0.5;
line-smooth: 0.8;

Dessin Toulouse Effet line-smooth

Le tracé à la règle des contours de bâtiments

La seconde étape est plus complexe, car il faut pour cela intervenir dans la base de données. Les bâtiments étant des polygones, il s'agit de découper ces polygones en lignes droites (donc à chaque angle rencontré une nouvelle ligne est créée).

Ces nouvelles linestring sont enregistrées dans une table. L'emprise de la zone de travail comprend environ 344 000 bâtiments, qui sont ainsi découpés en plus de 2 440 000 lignes.

J'applique à ces lignes une fonction PostGIS qui les agrandit, de manière à ce qu'elles dépassent. Une valeur aléatoire est utilisée pour parvenir à l'imperfection recherchée (plus d'informations à ce propos dans le post "Découper 340 000 polygones").

Dessin Toulouse découpage des bâtiments

Le coloriage

Je crée une trame de fond de crayonnage en niveaux de gris et gestion de la transparence, avec GIMP (en m'aidant d'un tutoriel) :

Dessin Toulouse Texture de fond

Les couleurs de fond (en fonction du type de bâtiment) donnent ensuite l'illusion d'un coloriage réalisé avec des crayons classiques :

[type='habitat'] {
polygon-fill:#3b4447;
polygon-pattern-file: url("images/trame-crayon-inv-gauche.png");
}

[type='historique'] {
polygon-fill:#9D4D26;
polygon-pattern-file: url("images/trame-crayon-inv-256.png");
}

Dessin Toulouse Texture + Couleur

L'assemblage

Toutes les étapes préparatoires étant terminées, je superpose les différents effets, en gérant la transparence sur les différentes couches :

Dessin Toulouse Effet final

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Paralléliser des requêtes avec PostgreSQL 31/03/2020

PostgreSQL permet de découper les requêtes pour en exécuter des parties en parallèle. Il faut ...

Optimisation de la production de tuiles vectorielles de fond de carte OpenStreetMap pour un service à la demande : Makina Maps Optimisation de la production de tuiles vectorielles de fond de carte OpenStreetMap pour un service à la demande : Makina Maps 04/02/2020

L'expert OSM Frédéric Rodrigo de Makina Corpus met en place Makina Maps, une pile logicielle pour ...

SIG : Préparation de données pour la création de tuiles vectorielles 30/01/2020

Pour servir des données sous forme des tuiles vectorielles une préparation est nécessaire comme ...

Recherche et développement d’indicateurs pour l’aménagement d’un territoire Recherche et développement d’indicateurs pour l’aménagement d’un territoire 14/01/2020

Nous explorons l’intérêt de calculer automatiquement des indicateurs d’aménagement du ...

Améliorez votre SQL : utilisez des invariants dans les conditions Améliorez votre SQL : utilisez des invariants dans les conditions 05/11/2019

Il suffit parfois de repenser la façon d'exprimer une condition de filtrage dans une requête SQL ...