# j-DrawZone

> Az összetevő egy zónát (poligont) húzhat. [Nyílt](https://openlayers.org/) A könyvtár a [Nyílt térkép](https://www.openstreetmap.org/) Térkép motor

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

Az összetevő egy zónát (poligont) húzhat. [Nyílt](https://openlayers.org/) A könyvtár a [Nyílt térkép](https://www.openstreetmap.org/) Térkép motor


__konfiguráció__:

- `parent {String}` egy szülőelem (default: `undefined`)
- `height {Number}` fix (minimális) magasság (például `200`)
- `color {String}` a poligon alapértelmezett színe (például: `#fcba03`)
- `zoom {Number}` egy alapértelmezett zoom szint (default: `11`)
- `readonly {Boolean}` lehetővé teszi a readonly módot (default: `false`)
- `stroke {Number}` egy ütés szélessége (default: `2`)
- `radius {Number}` a poligonban lévő pontok rádiómérete (default: `7`)
- `center {String}` egy alapértelmezett térkép pozíció (default: `48.73702478789267,19.137712002562715`)
- A `opacity {Number}` határozza meg a poligon átláthatóságát százalékban (default: `40`)
- `required {Boolean}` opcionális (default: `false`)
- `filter {String}` opcionális, CSS szűrő stb. `filter:grayscale(90%) invert(100%)` (default: `null`)
- __NEW__: `exec {String}` opcionális, a `function(value, component)`-hez való link (az értéket módosítva futtatják)

Az adatforrásnak tartalmaznia kell:

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

__módszerek__:

- `component.clear([draw])` tisztítja a poligon `@draw {Boolean}` (default: `false`)
- A `component.move(lat, lng)` a térképet egy adott pozícióba mozgatja
- A `component.export(opt, callback(base64))` adatokat exportál a képbe
    - `opt.width {Number}` Szükséges
    - `opt.height {Number}` Szükséges
    - `opt.zoom {Number}` (például a `13`)
    - `opt.type {png|jpg}` (például a `png`)
    - `opt.quality {Number}` csak JPEG
    - `opt.points {Array Number}`
    - `opt.color {String}` (például a `config.color`)
    - `opt.radius {Number}` (például a `config.radius`)
    - `opt.opacity {Number}` (például a `config.opacity`)

__kiadás__:

- A `center { lat: Number, lng: Number }` tulajdonságok bővülnek

__Jó tudni__:

- `double click` a függönyökön (teremtett pont) törli a kiválasztott pont

Használja a `<ui-component name="drawzone">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator Szerző: Peter Sirka és Dodo Marton. forrás: a Componentator Az összetevők raktár, MIT licenc.

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