j-DrawZone

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Componentul poate trage o zonă (poligon). OpenLayers Biblioteca cu OpenStreetMap 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ă:

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

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>