j-DrawZone

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant peut dessiner une zone (polygone). Ouverture La bibliothèque avec le OpenStreetMap Le moteur de la carte.

Configuration :

parent {String} un élément parent (defaut : undefined)
height {Number} une hauteur fixe (minimale) (defaut : 200)
color {String} une couleur par défaut pour le polygone (par défauts: #fcba03)
zoom {Number} un niveau de zoom par défaut (defaut: 11)
readonly {Boolean} permet le mode readonly (défaut : false)
stroke {Number} une largeur d'effet (defaut : 2)
radius {Number} une taille de rayon des points dans le polygone (defaut: 7)
center {String} une position de carte par défaut (defaut: 48.73702478789267,19.137712002562715)
opacity {Number} détermine la transparence du polygone en pourcentage (defaut: 40)
required {Boolean} en option (par défaut : false)
filter {String} optionnel, filtre CSS par exemple filter:grayscale(90%) invert(100%) (défaut: null)
NEW: exec {String} optionnel, un lien vers le function(value, component) (il sera exécuté lorsque la valeur est modifiée)

Data-source doit contenir :

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

Méthodes :

component.clear([draw]) nettoie le polygone @draw {Boolean} (defaut: false)
Le component.move(lat, lng) déplace la carte à la position spécifique
component.export(opt, callback(base64)) exporte les données dans l'image
- opt.width {Number} nécessaire
- opt.height {Number} nécessaire
- opt.zoom {Number} (par défaut : 13)
- opt.type {png|jpg} (par défaut : png)
- opt.quality {Number} pour JPEG
- opt.points {Array Number}
- opt.color {String} (par défaut : config.color)
- opt.radius {Number} (par défaut : config.radius)
- opt.opacity {Number} (par défaut : config.opacity)

Sortie :

La propriété est élargie par center { lat: Number, lng: Number }

Bon à savoir :

double click sur les sommets (point créé) supprimera le point sélectionné

Utilisez-le avec <ui-component name="drawzone">Lorsque le composant n’est pas encore chargé, jComponent télécharger à la première utilisation de l'adresse DEF.fallback (Le Componentator Auteur : Peter Sirka et Dodo Marton. Componentator Réservatoire des composants, licence 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>