j-DrawZone

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente kann eine Zone (Polygon) zeichnen. Diese Komponente verwendet die OpenLayers-Bibliothek mit der OpenStreetMap-Karten-Engine.

Konfiguration:

parent {String} ein übergeordnetes Element (Standard: undefined)
height {Number} eine feste (minimale) Höhe (Standard: 200)
color {String} eine Standardfarbe für Polygone (Standard: #fcba03)
zoom {Number} eine Standardzoomstufe (Standard: 11)
readonly {Boolean} aktiviert den schreibgeschützten Modus (Standard: false)
stroke {Number} eine Strichstärke (Standard: 2)
radius {Number} eine Radiusgröße der Punkte im Polygon (Standard: 7)
center {String} eine Standard-Kartenposition (Standard: 48.73702478789267,19.137712002562715)
opacity {Number} bestimmt die Transparenz des Polygons in Prozent (Standard: 40)
required {Boolean} optional (Standard: false)
filter {String} optional, CSS-Filter z.B. filter:grayscale(90%) invert(100%) (Standard: null)
NEW: exec {String} optional, ein Link zum function(value, component) (wird ausgeführt, wenn der Wert geändert wird)

Datenquelle muss Folgendes enthalten:

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

Methoden:

component.clear([draw]) löscht das Polygon @draw {Boolean} (Standard: false)
component.move(lat, lng) verschiebt die Karte an die spezifische Position
component.export(opt, callback(base64)) exportiert Daten in das Bild
- opt.width {Number} erforderlich
- opt.height {Number} erforderlich
- opt.zoom {Number} (Standard: 13)
- opt.type {png|jpg} (Standard: png)
- opt.quality {Number} nur für JPEG
- opt.points {Array Number}
- opt.color {String} (Standard: config.color)
- opt.radius {Number} (Standard: config.radius)
- opt.opacity {Number} (Standard: config.opacity)

Ausgabe:

wird um die Eigenschaft center { lat: Number, lng: Number } erweitert

Gut zu wissen:

double click auf Scheitelpunkten (erstellter Punkt) löscht den ausgewählten Punkt

Verwenden Sie es mit <ui-component name="drawzone">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Sirka & Dodo Marton. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>