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

Timestamp:

2025-06-16T10:16:50+02:00 (12 days ago)

Author:

makmar

Comment:

--

El:Help/Styles/MapCSSTutorial

@@ +1 @@
+[[TranslatedPages(revision=13)]]
+
+= Οδηγός MapCSS =
+
+=== Παράδειγμα 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>
+}}} 
+Αυτό σχεδιάζει ένα εικονίδιο εστιατορίου και μια ετικέτα κειμένου για κάθε κόμβο που έχει την ετικέτα `amenity=restaurant`. Η εικόνα μπορεί να καθοριστεί με μία από τις παρακάτω μορφές:
+ * απόλυτη διαδρομή
+ * διεύθυνση URL
+ * μία διαδρομή σχετική με το τρέχον αρχείο *.mapcss file
+ * σχετική διαδρομή που αναφέρεται σε ενσωματωμένη εικόνα (δείτε το Παράδειγμα 1). Το αρχείο `josm-tested.jar` είναι ένα απλό αρχείο zip, μπορείτε να το αποσυμπιέσετε και να χρησιμοποιήσετε όλα τα αρχεία από τον φάκελο `images`.
+Η δήλωση **`text: auto;`** λέει στο JOSM να προσδιορίσει αυτόματα το κείμενο για την ετικέτα. Τη στιγμή της συγγραφής, αναζητούνται οι παρακάτω ετικέτες και χρησιμοποιείται η πρώτη που βρίσκεται: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" και "`addr:housenumber`". Μπορείτε επίσης να επιλέξετε μια συγκεκριμένη ετικέτα π.χ. **`text: "cuisine";`**.
+
+=== Παράδειγμα 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>
+}}} 
+Εδώ έχουμε όλους τους οικιστικούς δρόμους σχεδιασμένους με ανοιχτό γκρι και με πλάτος γραμμής 4 px. Το χρώμα μπορεί να δοθεί σε μία από τις ακόλουθες μορφές:
+ * με όνομα χρώματος, όπως αναφέρεται σε [http://www.w3.org/TR/css3-color/#svg-color αυτή] τη λίστα
+ * σε στυλ html: **`#ff0000`**
+ * με τιμή **`rgb(0.0, 1.0 , 0.2)`** - τιμές rgb με ορίσματα από 0.0 έως 1.0
+ 
+=== Παράδειγμα 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>
+}}}
+Στο πρώτο μέρος των δηλώσεων, ορίζουμε ένα μοτίβο παύλων με γκρι και πράσινο χρώμα. Αφήστε έξω τις `dashes-background-color` για να εμφανιστεί μια διακεκομμένη γραμμή χωρίς χρώμα ανάμεσα στις παύλες.
+
+Στο δεύτερο μέρος, το όνομα του δρόμου (**`text: "name";`**) θα εμφανίζεται κατά μήκος της γραμμής (**`text-position: line;`**) με κατακόρυφη μετατόπιση 9 εικονοστοιχείων. Αν η μετατόπιση είναι 0, το κείμενο θα σχεδιαστεί στην κορυφή της γραμμής.
+
+=== Παράδειγμα 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>
+}}}
+
+Ο επιλογέας τύπου **`area`** εφαρμόζεται σε γραμμές και σχέσεις πολλαπλών πολυγώνων. Η συνθήκη **`[building]`** εφαρμόζεται σε όλα τα αντικείμενα που έχουν το κλειδί `building` ορισμένο σε οποιαδήποτε τιμή. Σημειώστε ότι το περίγραμμα του κτιρίου σχεδιάζεται επίσης, παρόλο που δεν έχουμε καθορίσει ιδιότητες γραμμής. Αυτό συμβαίνει επειδή το JOSM θα σχεδιάζει πάντα τουλάχιστον ένα στοιχείο γραμμής για κάθε γραμμή. Αν δεν βρεθούν ιδιότητες γραμμής, δημιουργείται ένα προεπιλεγμένο στοιχείο γραμμής.
+
+=== Παράδειγμα 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>
+}}}
+
+Αυτό δείχνει πώς μπορείτε να παραθέσετε πολλούς επιλογείς για έναν κανόνα.  Γεμίζουμε την περιοχή με ένα μοτίβο, εάν αυτή έχει την ετικέτα `landuse=forest` ή `natural=wood`. Η αδιαφάνεια ορίζεται στο 0.8, όπου 1.0 σημαίνει πλήρως αδιαφανές και 0.0 πλήρως διαφανές. Μπορείτε να ορίσετε αδιαφάνεια κάθε φορά που καθορίζεται ένα χρώμα ή μια εικόνα π.χ. `icon-opacity` για το `icon-image` και `opacity` για το `color`. Μια ετικέτα (label) για το αντικείμενο τοποθετείται στο κέντρο της περιοχής.
+
+
+== Δείτε επίσης ==
+* η [wikitr:/Help/Styles/MapCSSImplementation αναφορά υλοποίησης του JOSM] παραθέτει τις υποστηριζόμενες δυνατότητες mapcss με περισσότερες λεπτομέρειες.
+* το [wikitr:/Help/Validator/MapCSSTagChecker tagchecker] χρησιμοποιεί πολλά από αυτά τα χαρακτηριστικά.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+