Changes between Initial Version and Version 1 of Eo:Help/Styles/MapCSSTutorial

Timestamp:

2025-03-08T21:10:22+01:00 (5 months ago)

Author:

paleid

Comment:

Eo added

Eo:Help/Styles/MapCSSTutorial

@@ +1 @@
+[[TranslatedPages(revision=13)]]
+= MapCSS Lernilo =
+
+=== Ekzemplo 1 ===
+
+{{{#!html
+<table width="100%">
+  <tr>
+    <td valign="top">
+<pre class="wiki">
+node[amenity=restaurant] 
+{
+    icon-image: "presets/food/restaurant.svg";
+    text: auto;
+}
+</pre>
+  </td>
+    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example01.png" /></td>
+  </tr>
+</table>
+}}} 
+Ĉi tio desegnas restoracian ikonon kaj tekstan etikedon por ĉiu nodo, kiu estas markita kun `amenity=restaurant`. La bildo povas esti specifita en unu el la sekvaj formoj:
+ * absoluta vojo
+ * URL
+ * vojo rilata al la nuna *.mapcss dosiero
+ * rilata vojo, kiu referencas al enkonstruita bildo (vidu Ekzemplon 1). La `josm-tested.jar` dosiero estas simpla zip-arkivo; vi povas elpaki ĝin kaj uzi ĉiujn dosierojn el la `images` dosierujo.
+La deklaro **`text: auto;`** diras al JOSM aŭtomate derivi la tekston por la etikedo. Ĉe la tempo de skribado, la sekvaj etikedoj estas serĉitaj kaj la unua trovita estos uzata: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" kaj "`addr:housenumber`". Vi ankaŭ povas elekti specifan etikedon, ekzemple **`text: "cuisine";`**.
+
+=== Ekzemplo 2 ===
+{{{#!html
+<table width="100%">
+  <tr>
+    <td valign="top">
+<pre class="wiki">
+way[highway=residential]
+{
+    width: 4;
+    color: lightgray;
+}
+</pre>
+  </td>
+    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example02.png" /></td>
+  </tr>
+</table>
+}}} 
+Ĉi tie ni havas ĉiujn loĝejajn vojojn desegnitajn en helgriza koloro kaj kun linia larĝo de 4 rastrumeroj. Koloro povas esti donita en unu el la sekvaj formatoj:
+ * nomita koloro kiel trovebla en [http://www.w3.org/TR/css3-color/#svg-color ĉi tiu] listo
+ * html-stilo: **`#ff0000`**
+ * **`rgb(0.0, 1.0 , 0.2)`** - rgb valoro kun argumentoj de 0.0 ĝis 1.0
+ 
+=== Ekzemplo 3 ===
+{{{#!html
+<table width="100%">
+  <tr>
+    <td valign="top">
+<pre class="wiki">
+way[highway=living_street]
+{
+    width: 7;
+    color: #c0c0c0;
+    dashes: 15,9;
+    dashes-background-color: #00ff00;
+
+    text: "name";
+    text-position: line;
+    text-offset: 9;
+    font-size: 12;
+    font-color: lightyellow;
+}
+</pre>
+  </td>
+    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example03.png" /></td>
+  </tr>
+</table>
+}}}
+En la unua parto de la deklaroj, ni difinas strekan ŝablonon de griza kaj verda. Forlasu la `dashes-background-color` por montri interrompitan linion sen koloro inter la strekoj.
+
+En la dua parto, la nomo de la strato (**`text: "name";`**) estos montrita laŭ la linio (**`text-position: line;`**) kun vertikala deŝovo de 9 rastrumeroj. Deŝovo de 0 metus la tekston sur la linion.
+
+=== Ekzemplo 4 ===
+{{{#!html
+<table width="100%">
+  <tr>
+    <td valign="top">
+<pre class="wiki">
+area[building]
+{
+    fill-color: orange;
+}
+</pre>
+  </td>
+    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example04.png" /></td>
+  </tr>
+</table>
+}}}
+
+La **`area`** tipo-selektilo agas sur vojoj kaj multipoligonaj rilatoj. La kondiĉo **`[building]`** aplikiĝas al ĉiuj objektoj, kiuj havas la ŝlosilon `building` agorditan al iu ajn valoro. Notu, ke la konturo de la konstruaĵo estas ankaŭ pentrita, kvankam ni ne specifis iujn ajn liniajn propraĵojn. Tio estas ĉar JOSM ĉiam desegnos almenaŭ unu linian elementon por ĉiu vojo. Se neniuj liniaj propraĵoj estas trovitaj, defaŭlta linia elemento estas generita.
+
+=== Ekzemplo 5 ===
+
+{{{#!html
+<table width="100%">
+  <tr>
+    <td valign="top">
+<pre class="wiki">
+area[landuse=forest], area[natural=wood]
+{
+    fill-image: "http://trac.openstreetmap.org/export/25265/applications/rendering/mapnik/symbols/forest.png";
+    fill-opacity: 0.8;
+
+    text: auto;
+    text-position: center;
+}
+</pre>
+  </td>
+    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example05.png" /></td>
+  </tr>
+</table>
+}}}
+
+Ĉi tio montras, kiel vi povas listigi multoblajn selektilojn por unu regulo. Ni plenigas la areon kun ŝablono, se ĝi estas markita kun `landuse=forest` aŭ `natural=wood`. La opakeco estas agordita al 0.8, kie 1.0 signifas opakan kaj 0.0 estas tute travidebla. Vi povas agordi opakecon, kiam ajn koloro aŭ bildo estas difinita. Ekzemple `icon-opacity` por `icon-image` kaj `opacity` por `color`. Etikedo por la objekto estas metita en la centro de la areo.
+
+
+== Vidu ankaŭ ==
+* la [wikitr:/Help/Styles/MapCSSImplementation JOSM implementada referenco] listigas la subtenatajn mapcss-trajtojn pli detale.
+* la [wikitr:/Help/Validator/MapCSSTagChecker etikedkontrolilo] uzas multajn el ĉi tiuj trajtoj.