# j-DrawZone

> Το συστατικό μπορεί να σχεδιάσει μια ζώνη (πολιγόνο). [Ανοιχτές](https://openlayers.org/) Η βιβλιοθήκη με το [OpenStreetMap](https://www.openstreetmap.org/) Ο κινητήρας χάρτη.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 39d440a07103a0c8ec36498bb5bd96ae618627083617af4864c3b6b894fe673b
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Το συστατικό μπορεί να σχεδιάσει μια ζώνη (πολιγόνο). [Ανοιχτές](https://openlayers.org/) Η βιβλιοθήκη με το [OpenStreetMap](https://www.openstreetmap.org/) Ο κινητήρας χάρτη.


__ΕΠΙΤΡΟΦΗ__:

- `parent {String}` ένα γονικό στοιχείο (προεπιλεγμένο: `undefined`)
- `height {Number}` ένα σταθερό (μικρό) ύψος (προεπιλεγμένο: `200`)
- `color {String}` ένα προεπιλεγμένο χρώμα για πολυγόνο (προεπιλογή: `#fcba03`)
- `zoom {Number}` Προεπιλεγμένο επίπεδο ζουμ (default) `11`)
- Το `readonly {Boolean}` επιτρέπει τη λειτουργία readonly (προεπιλεγμένο: `false`)
- `stroke {Number}` ένα πλάτος σπασμού (προεπιλεγμένο: `2`)
- `radius {Number}` ένα μέγεθος ραδιού σημείων στο πολυγόνο (προεπιλεγμένο: `7`)
- `center {String}` μια προεπιλεγμένη θέση χάρτη (προεπιλογή: `48.73702478789267,19.137712002562715`)
- Το `opacity {Number}` καθορίζει τη διαφάνεια του πολυγόνου σε ποσοστό (προεπιλεγμένο: `40`)
- `required {Boolean}` προαιρετική (προεπιλεγμένη: `false`)
- `filter {String}` προαιρετικό, φίλτρο CSS για παράδειγμα `filter:grayscale(90%) invert(100%)` (προεπιλεγμένο: `null`)
- __NEW__: `exec {String}` προαιρετική, μια σύνδεση με το `function(value, component)` (θα εκτελεστεί όταν η τιμή αλλάξει)

Η πηγή δεδομένων πρέπει να περιέχει:

```js
{
    points: [{ lat: 48.75152530164132, lng: 19.13902142954625 }, { lat: 48.726826662905296, lng: 19.123238694044034 }, ...] // polygon points
    color: '#FD391A', // optional
    zoom: 13 // optional
}
```

__Μέθοδοι__:

- Το `component.clear([draw])` καθαρίζει το πολυγόνο `@draw {Boolean}` (προεπιλεγμένο: `false`)
- Το `component.move(lat, lng)` μεταφέρει τον χάρτη στην συγκεκριμένη θέση
- `component.export(opt, callback(base64))` εξάγει δεδομένα στην εικόνα
    - `opt.width {Number}` Απαιτείται
    - `opt.height {Number}` Απαιτείται
    - `opt.zoom {Number}` (προεπιλεγμένη τιμή: `13`)
    - `opt.type {png|jpg}` (προεπιλεγμένη τιμή: `png`)
    - `opt.quality {Number}` μόνο για το JPEG
    - `opt.points {Array Number}`
    - `opt.color {String}` (προεπιλεγμένη τιμή: `config.color`)
    - `opt.radius {Number}` (προεπιλεγμένη τιμή: `config.radius`)
    - `opt.opacity {Number}` (προεπιλεγμένη τιμή: `config.opacity`)

__ΕΞΕΛΙΞΗ__:

- Επεκτείνεται από την ιδιοκτησία `center { lat: Number, lng: Number }`

__Καλό να ξέρεις__:

- Το `double click` στις καμπύλες (καθώς δημιουργήθηκε σημείο) θα διαγράψει το επιλεγμένο σημείο

Χρησιμοποιήστε το με `<ui-component name="drawzone">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Sirka & Dodo Marton. Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html example.html
<style>
	body { margin: 0; padding: 0; }
</style>

<ui-component name="drawzone" path="map" config="parent:window;color:#FD391A;geolocation:0"></ui-component>

<script>
	var map = { 
		points: []
	};
</script>
```