j-DrawZone

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Komponent môže nakresliť zónu (polygón). Tento komponent používa knižnicu OpenLayers s mapovým modulom OpenStreetMap.

Konfigurácia:

parent {String} nadradený prvok (predvolené: undefined)
height {Number} pevná (minimálna) výška (predvolené: 200)
color {String} predvolená farba pre mnohouholník (predvolená: #fcba03)
zoom {Number} predvolená úroveň priblíženia (predvolená: 11)
readonly {Boolean} umožňuje režim len na čítanie (predvolené: false)
stroke {Number} šírka zdvihu (predvolená: 2)
radius {Number} veľkosť polomeru bodov v polygóne (predvolené: 7)
center {String} predvolená poloha na mape (predvolená: 48.73702478789267,19.137712002562715)
opacity {Number} určuje priehľadnosť polygónu v percentách (predvolené: 40)
required {Boolean} voliteľné (predvolené: false)
filter {String} voliteľné, CSS filter napr. filter:grayscale(90%) invert(100%) (predvolené: null)
NEW: exec {String} voliteľné, prepojenie na function(value, component) (vykoná sa pri zmene hodnoty)

Data-source musí obsahovať:

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

Metódy:

component.clear([draw]) vymaže polygón @draw {Boolean} (predvolené: false)
component.move(lat, lng) presunie mapu na konkrétnu pozíciu
component.export(opt, callback(base64)) exportuje dáta do obrazu
- Vyžaduje sa opt.width {Number}
- Vyžaduje sa opt.height {Number}
- opt.zoom {Number} (predvolené: 13)
- opt.type {png|jpg} (predvolené: png)
- opt.quality {Number} len pre JPEG
- opt.points {Array Number}
- opt.color {String} (predvolené: config.color)
- opt.radius {Number} (predvolené: config.radius)
- opt.opacity {Number} (predvolené: config.opacity)

Výstup:

je rozšírený o majetok center { lat: Number, lng: Number }

Je dobré vedieť:

double click na vrcholoch (vytvorený bod) vymaže vybraný bod

Použite ho so <ui-component name="drawzone">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Sirka & Dodo Marton. Zdroj: úložisko komponentov Componentator, licencia 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>