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
Retour State of the Map France 2018 Retour State of the Map France 2018 23/07/2018

L'équipe de Makina attendait avec impatience l'événement de l'année, State Of The Map 2018 à ...

Drape lines on a DEM with PostGIS 30/04/2013

This article gives a few SQL commands to drape 2D geometries on a DEM (Digital Elevation Model), in ...

Formation PostgreSQL / PostGIS du 12 au 14 juin à Paris Formation PostgreSQL / PostGIS du 12 au 14 juin à Paris 07/05/2018

Découvrez les outils Libres pour gérer vos données spatiales.

Ré-ordonner des lignes dans PostGIS avec une requête récursive 09/02/2018

Comment ordonner des lignes les unes à la suite des autres dans PostGIS

Formation Python initiation à Toulouse du 18 au 20 septembre Formation Python initiation à Toulouse du 18 au 20 septembre 06/07/2017

Vous êtes développeur et maîtrisez déjà un langage de programmation ? Python vous tente et ...