# j-DrawZone

> Componentul poate trage o zonă (poligon). [OpenLayers](https://openlayers.org/) Biblioteca cu [OpenStreetMap](https://www.openstreetmap.org/) Motorul de hârtie.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: ro
Content-SHA256: 9fddca44b9ab3b708bef6923d4d0de1deed5fefd779a5b0f99792547256e66e5
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Componentul poate trage o zonă (poligon). [OpenLayers](https://openlayers.org/) Biblioteca cu [OpenStreetMap](https://www.openstreetmap.org/) Motorul de hârtie.


__Configurarea__:

- `parent {String}` este un element parental (default: `undefined`)
- `height {Number}` o înălțime fixă (minimală) (default: `200`)
- `color {String}` este o culoare standard pentru poligon (default: `#fcba03`)
- `zoom {Number}` Nivelul de zoom (default) `11`)
- `readonly {Boolean}` permite modul readonly (default: `false`)
- `stroke {Number}` o lățime de lovitură (default: `2`)
- `radius {Number}` o dimensiune de raze a punctelor din poligon (default: `7`)
- `center {String}` Poziția de pe hartă (default) `48.73702478789267,19.137712002562715`)
- `opacity {Number}` determină transparența poligonului în procente (default: `40`)
- `required {Boolean}` opțional (default: `false`)
- `filter {String}` opțional, filtrul CSS etc. `filter:grayscale(90%) invert(100%)` (default: `null`)
- __NEW__: `exec {String}` opțional, un link la `function(value, component)` (se va executa atunci când valoarea este schimbată)

_sursă de date trebuie să conțină:

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

__Metode__:

- `component.clear([draw])` curăță poligonul `@draw {Boolean}` (default: `false`)
- `component.move(lat, lng)` mută hârtia la poziția specifică
- `component.export(opt, callback(base64))` exportă datele în imagine
    - `opt.width {Number}` Necesitate
    - `opt.height {Number}` Necesitate
    - `opt.zoom {Number}` (defaultă: `13`)
    - `opt.type {png|jpg}` (defaultă: `png`)
    - `opt.quality {Number}` numai pentru JPEG
    - `opt.points {Array Number}`
    - `opt.color {String}` (defaultă: `config.color`)
    - `opt.radius {Number}` (defaultă: `config.radius`)
    - `opt.opacity {Number}` (defaultă: `config.opacity`)

__ieşire__:

- Proprietăți extinse de `center { lat: Number, lng: Number }`

__bine să știi__:

- `double click` pe verticale (punct creat) va șterge punctul selectat

Utilizați-l cu `<ui-component name="drawzone">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Sirka și Dodo Marton. sursa: Componentator Componente de stocare, MIT licență.

```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>
```