j-DrawZone

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Il componente può disegnare una zona (poligono). OpenLayers La biblioteca con il OpenStreetMap Il motore mappa.

Configurazione:

parent {String} un elemento parentale (default: undefined)
height {Number} a altezza fissa (minima) (default: 200)
color {String} un colore predefinito per il poligono (predefinita: #fcba03)
zoom {Number} un livello di zoom predefinito (predefinita: 11)
readonly {Boolean} consente il modulo readonly (default: false)
stroke {Number} una larghezza di colpo (default: 2)
radius {Number}: dimensioni radiali dei punti nel poligono (default: 7)
center {String} una posizione di mappa predefinita (predefinito: 48.73702478789267,19.137712002562715)
opacity {Number} determina la trasparenza del poligono in percentuale (default: 40)
required {Boolean} opzionale (default: false)
filter {String} opzionale, filtro CSS ecc. filter:grayscale(90%) invert(100%) (default: null)
NEW: exec {String} opzionale, un collegamento al function(value, component) (è eseguito quando il valore è cambiato)

data-source deve contenere:

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

Metodi:

component.clear([draw]) pulisce il poligono @draw {Boolean} (default: false)
component.move(lat, lng) sposta la mappa alla posizione specifica
component.export(opt, callback(base64)) esporta i dati nella foto
- opt.width {Number} richiesto
- opt.height {Number} richiesto
- opt.zoom {Number} (per impostazione predefinita: 13)
- opt.type {png|jpg} (per impostazione predefinita: png)
- opt.quality {Number} solo per JPEG
- opt.points {Array Number}
- opt.color {String} (per impostazione predefinita: config.color)
- opt.radius {Number} (per impostazione predefinita: config.radius)
- opt.opacity {Number} (per impostazione predefinita: config.opacity)

La uscita:

La proprietà è estesa da center { lat: Number, lng: Number }

Buono sapere:

double click su verticali (punto creato) eliminerà il punto selezionato

Utilizzare con <ui-component name="drawzone">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator CDN per default). autore: Peter Sirka & Dodo Marton. Componentator Ristorante dei componenti, licenza MIT.

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>