FR:Osmarender/Rules
Développer les styles Osmarender
Si vous prévoyez de créer un nouveau style de rendu, jetez un oeil sur le guide des styles où nous tentons de donner quelques lignes directrices.
Grammaire du fichier de règles
Le fichier de règles (rule file) est un fichier xml qui spécifie les règles du rendu. La structure basic est une liste de règles de sélection suivies par des instructions de rendu qui sont exécutées séquenciellement. Les objets dessinés plus tard se situeront au dessus des objets dessinés plus tôt. Par exemple:
<rule e="way" k="highway" v="primary">
...
</rule>
<rule e="way" k="highway" v="motorway">
...
</rule>
Chaque règle spécifie quels éléments doivent être sélectionnés à partir d'une paire clé/valeur (key/value) (par exemple, e="way" k="highway" v="motorway" sélectionnera tous les chemins tagués avec 'highway' et la valeur 'motorway'). Il précise ensuite ce qui doit être fait avec les noeuds (nodes) et chemins (ways) ainsi sélectionnés. L'ensemble des instructions actuelles permet de dessiner des lines, circles, symbols et text.
Les règles peuvent s'emboîter. Ceci permet la création d'instructions de rendu basés sur une combinaison de clés/valeurs. Par exemple, la règle suivante sélectionnera uniquement les lieux de culte ("place_of_worship") anglicans ("anglican"):
<rule e="node" k="amenity" v="place_of_worship">
<rule e="node" k="denomination" v="anglican">
...
</rule>
</rule>
Règles
<rule>
<rule e="elementList" k="keyList" v="valueList"
[s="selector"]
[layer="layer"]
[horizontalProximity="degrees" verticalProximity="degrees"]>
...
</rule>
- elementList est une liste d'un ou plusieurs éléments (séparée par |) qui respectent cette règle:
- node
- segment (NDT: les segments ont disparus depuis l'API 0.5)
- waysegment (NDT: les segments ont disparus depuis l'API 0.5)
- way
- selector est un attribut optionnel qui spécifie quel élément doit être utilisé pour la sélection. Par exemple, tous les noeuds (nodes) qui font partie de chemins (ways) qui ont un tag 'highway' peuvent être sélectionnés en utilisant
e="node" s="way" k="highway" v="*". - keyList est une liste de clés (séparée par |) qui doivent être trouvées par cette règle
- valueList est une liste de valeurs (séparée par |) qui doivent être trouvées pour les clés sélectionnées par cette règle
- Une valeur égale à "*" trouvera n'importe quel élément, clé ou valeur.
- Une valeur égale à "~" pour keyList trouvera n'importe quel élément qui ne comporte pas de clés.
- Une valeur égale à "~" pour valueList trouvera n'importe quel élément qui ne comporte pas la clé indiquée.
- layer force la sélection des éléments dans le calque indiqué. Ceci remplace n'importe quel tag 'layer' qui peut se trouver dans l'élément lui-même.
- horizontalProximity et verticalProximity fournissent une méthode grossière de prévention des collisions entre les noms de places en indiquant la distance minimum entre noeuds qui corresponde à l'actuelle règle. Voir l'exemple de détection de collision pour plus de détails.
<else>
<else>
...
</else>
La règle <else> sélectionne tous les éléments qui n'ont pas été sélectionnés par le <rule> précédent.
Instructions de rendu
Les instructions suivantes indiquent à Osmarender ce qu'il faut faire avec les éléments sélectionnés par une règle:
- <line> dessine une ligne. Cela s'applique aux éléments <way>.
- <circle> dessine un cercle. Cela s'applique aux éléments <node>.
- <text> dessine un texte relativement à un noeud (node) ou le long d'un chemin (way). Ceci s'applique aux éléments <node> et <way>.
- Le texte à utiliser est défini par l'attribut k de l'instruction de texte (par ex.
<text k="name"/>) ou par le contenu de l'élément <text>.
- Le texte à utiliser est défini par l'attribut k de l'instruction de texte (par ex.
- <areaText> dessine un texte au milieu du chemin (way) qui décrit une zone.
- <symbol> dessine un symbole ou une image. Ceci s'applique aux éléments <node>.
- <areaSymbol> dessine un symbole ou une image au milieu d'un chemin (way) qui décrit une zone.
- <wayMarker> dessine un marqueur sur un noeud, perpendiculaire à n'importe quel chemin qui croise ce noeud. Ceci s'applique aux éléments <node>.
Chaque instruction de rendu peut contenir des attributs de style SVG ou peut faire référence à une classe qui est définie dans une feuille de style CSS intégré. Ainsi, toute la puissance de SVG et CSS peut être utilisée pour contrôler l'apparence du résultat final.
Exemple simple
Voici un exemple simple d'un fichier de règle qui sélectionne les routes primaires (tous les chemins (ways) avec une clé "highway" et une valeur "primary") et les dessine en noir d'abord avec une ligne de 4px de large puis en vert avec une ligne de 2px (le résultat est une route verte avec une bordure noire).
<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet type="text/xsl" href="osmarender.xsl"?>
<rules
data="data.xml"
scale="1"
minimumMapWidth="4"
minimumMapHeight="3"
showScale="yes"
showGrid="yes"
showBorder="yes"
showAttribution="yes"
showLicense="yes"
showZoomControls="yes"
javaScript="yes">
<rule e="way" k="highway" v="primary">
<line style="stroke-width: 4px; stroke-linecap: round; stroke: #000000;"/>
</rule>
<rule e="way" k="highway" v="primary">
<line style="stroke-width: 2px; stroke-linecap: round; stroke: #7FC97F;"/>
</rule>
</rules>
Exemple de dessin de noeuds
Les noeuds (nodes) peuvent être dessinés soit avec des cercles, soit avec du texte ou avec les deux. Cet exemple dessine les noms des villes avec du texte, les églises avec des cercles noirs et les noms de ces églises avec du texte, et les hôtels avec des cercles verts sans descriptif.
Quand un cercle et un texte sont tous les deux dessinés pour un noeud, le texte peut être décalé du cercle en utilisant les attributs SVG dx et dy.
<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet type="text/xsl" href="osmarender.xsl"?>
<rules
data="data.xml"
scale="1"
minimumMapWidth="4"
minimumMapHeight="3"
showScale="yes"
showGrid="yes"
showBorder="yes"
showAttribution="yes"
showLicense="yes"
showZoomControls="yes"
javaScript="yes">
<rule e="node" k="class" v="town">
<text k="name" font-family='Verdana' font-size='14px' font-style='bold' fill='black'/>
</rule>
<rule e="node" k="class" v="church">
<circle r='3px' fill='black' stroke='black' stroke-width='1px'/>
<text k="name" font-family='Verdana' font-size='10px' fill='black' dx='4px' dy='4px'/>
</rule>
<rule e="node" k="class" v="hotel">
<circle r='3px' fill='green' stroke='black' stroke-width='1px'/>
</rule>
</rules>
Exemple d'utilisation de styles CSS intégrés
Les styles CSS peuvent être utilisés pour définir l'apparence d'un élément utilisant un style d'élément intégré dans le fichier de règles. On le fait en référençant le style utilisant l'attribut de classe. L'exemple suivant montre les routes mineures et non-classifiées ("minor" et "unclassified") dessinées par la même règle de style:
<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet type="text/xsl" href="osmarender.xsl"?>
<rules
data="data.xml"
scale="1"
minimumMapWidth="4"
minimumMapHeight="3"
showScale="yes"
showGrid="yes"
showBorder="yes"
showAttribution="yes"
showLicense="yes"
showZoomControls="yes"
javaScript="yes">
<rule e="way" k="highway" v="unclassified">
<line class='unclassified-casing'/>
</rule>
<rule e="way" k="highway" v="minor">
<line class='unclassified-casing'/>
</rule>
<rule e="way" k="highway" v="unclassified">
<line class='unclassified-core'/>
</rule>
<rule e="way" k="highway" v="minor">
<line class='unclassified-core'/>
</rule>
<defs>
<style type="text/css" xmlns="http://www.w3.org/2000/svg">
.unclassified-casing {
stroke-width: 3px;
stroke-linecap: round;
stroke: #000000;
}
.unclassified-core {
stroke-width: 2px;
stroke-linecap: round;
stroke: #E6E6E6;
}
</style>
</defs>
</rules>
Exemple d'affichage de descriptifs de routes
Cet exemple montre comment afficher des textes près d'une route. Le texte suit la ligne de la route mais est légèrement décalé sur un côté:
<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet type="text/xsl" href="osmarender.xsl"?>
<rules
data="data.xml"
scale="1"
minimumMapWidth="4"
minimumMapHeight="3"
showScale="yes"
showGrid="yes"
showBorder="yes"
showAttribution="yes"
showLicense="yes"
showZoomControls="yes"
javaScript="yes">
<rule e="way" k="highway" v="primary">
<line style="stroke-width: 4px; stroke-linecap: round; stroke: #000000;"/>
</rule>
<rule e="way" k="highway" v="primary">
<line style="stroke-width: 2px; stroke-linecap: round; stroke: #7FC97F;"/>
<text k="ref" font-family='Verdana' font-size='10px' fill='black' dx='2.5px' dy='-2.5px'/>
</rule>
</rules>
Exemple de texte sur un chemin
Cet exemple montre comment dessiner du texte le long d'un chemin (way) en utilisant l'instruction <text>. L'attribut k="name" précise que le texte doit correspondre à la valeur du nom de la clé.
Les attributs startOffset='50%' et text-anchor='middle' indiquent que le texte doit être centré au milieu et suivre la ligne du chemin. L'attribut baseline-shift décale la base du texte par rapport à la ligne centrale sur le chemin.
Attention:
- tout texte qui s'étend au-delà de la limite du chemin sera coupé.
- Tous les visionneurs SVG ne sont pas capables d'afficher la fonction "textPaths" de SVG. Adobe ASV3 et Inscape le peuvent, Firefox 1.5 et GIMP ne le peuvent pas. Inkscape n'interprète pas l'attribut baseline-shift.
<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet type="text/xsl" href="osmarender.xsl"?>
<rules
data="data.osm"
scale="1"
minimumMapWidth="4"
minimumMapHeight="3"
showScale="yes"
showGrid="yes"
showBorder="yes"
showAttribution="yes"
showLicense="yes"
showZoomControls="yes"
javaScript="yes">
<rule e="way" k="highway" v="primary">
<line style="stroke-width: 4px; stroke-linecap: round; stroke: #000000;"/>
</rule>
<rule e="way" k="highway" v="primary">
<line style="stroke-width: 2px; stroke-linecap: round; stroke: #7FC97F;"/>
<text k="name" baseline-shift='-35%' text-anchor='middle' startOffset='50%' font-family='Verdana' font-size='4px' fill='black'/>
</rule>
</rules>
Exemple de détection de collision
Cet exemple montre comment filtrer les noeuds pour réduire le risque de collisions quand des textes doivent être dessinés. Normallement, les textes se superposent si deux objets sont trop proches.
Un <rule> peut filtrer certains noeuds en se basant sur la distance avec un noeud proche et similaire en utilisant les attributs horizontalProximity et verticalProximity. S'il y a un autre noeud similaire à l'intérieur du rectangle ainsi défini, alors le premier noeud sera ignoré.
Par exemple:
<rule e="node" k="place" v="town" horizontalProximity="0.8" verticalProximity="0.2"> <rule e="node" k="place" v="town"> <text k="name" class='caption-casing town-caption-casing'/> <text k="name" class='caption-core town-caption' /> </rule> </rule>
Cette règle sélectionnera tous les noeuds (nodes) tagués avec place=town, mais ignorera tous les noeuds qui seront proches d'un autre noeud dans un angle de 0.8 degré horizontalement ou 0.2 degré verticalement.
Liens
- ColorBrewer est un outil en ligne pour aider les gens à choisir les bonnes palettes de couleurs et autres graphiques. C'est gratuit mais les auteurs apprécieront que vous les citiez au cas où vous choisiriez une de leurs palettes de couleurs.
- Vischeck vous montre à quoi peut ressembler votre image vue par un daltonien
- OpenGIS® Styled Layer Descriptor (SLD) Implementation Specification