j-DrawZone

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Az összetevő egy zónát (poligont) húzhat. Nyílt A könyvtár a Nyílt térkép 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:

{
    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.

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>