j-DrawZone

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Το συστατικό μπορεί να σχεδιάσει μια ζώνη (πολιγόνο). Ανοιχτές Η βιβλιοθήκη με το OpenStreetMap Ο κινητήρας χάρτη.

ΕΠΙΤΡΟΦΗ:

parent {String} ένα γονικό στοιχείο (προεπιλεγμένο: undefined)
height {Number} ένα σταθερό (μικρό) ύψος (προεπιλεγμένο: 200)
color {String} ένα προεπιλεγμένο χρώμα για πολυγόνο (προεπιλογή: #fcba03)
zoom {Number} Προεπιλεγμένο επίπεδο ζουμ (default) 11)
Το readonly {Boolean} επιτρέπει τη λειτουργία readonly (προεπιλεγμένο: false)
stroke {Number} ένα πλάτος σπασμού (προεπιλεγμένο: 2)
radius {Number} ένα μέγεθος ραδιού σημείων στο πολυγόνο (προεπιλεγμένο: 7)
center {String} μια προεπιλεγμένη θέση χάρτη (προεπιλογή: 48.73702478789267,19.137712002562715)
Το opacity {Number} καθορίζει τη διαφάνεια του πολυγόνου σε ποσοστό (προεπιλεγμένο: 40)
required {Boolean} προαιρετική (προεπιλεγμένη: false)
filter {String} προαιρετικό, φίλτρο CSS για παράδειγμα filter:grayscale(90%) invert(100%) (προεπιλεγμένο: null)
NEW: exec {String} προαιρετική, μια σύνδεση με το function(value, component) (θα εκτελεστεί όταν η τιμή αλλάξει)

Η πηγή δεδομένων πρέπει να περιέχει:

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

Μέθοδοι:

Το component.clear([draw]) καθαρίζει το πολυγόνο @draw {Boolean} (προεπιλεγμένο: false)
Το component.move(lat, lng) μεταφέρει τον χάρτη στην συγκεκριμένη θέση
component.export(opt, callback(base64)) εξάγει δεδομένα στην εικόνα
- opt.width {Number} Απαιτείται
- opt.height {Number} Απαιτείται
- opt.zoom {Number} (προεπιλεγμένη τιμή: 13)
- opt.type {png|jpg} (προεπιλεγμένη τιμή: png)
- opt.quality {Number} μόνο για το JPEG
- opt.points {Array Number}
- opt.color {String} (προεπιλεγμένη τιμή: config.color)
- opt.radius {Number} (προεπιλεγμένη τιμή: config.radius)
- opt.opacity {Number} (προεπιλεγμένη τιμή: config.opacity)

ΕΞΕΛΙΞΗ:

Επεκτείνεται από την ιδιοκτησία center { lat: Number, lng: Number }

Καλό να ξέρεις:

Το double click στις καμπύλες (καθώς δημιουργήθηκε σημείο) θα διαγράψει το επιλεγμένο σημείο

Χρησιμοποιήστε το με <ui-component name="drawzone">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Sirka & Dodo Marton. Componentator Ετικέτες Αξιολόγηση, 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>