j-DrawZone

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

De component kan een zone (polygon) trekken. OpenLayers De bibliotheek met de OpenStreetMap Kaart van de motor.

Configuratie:

parent {String} een ouderlijk element (default: undefined)
height {Number} een vaste (minimale) hoogte (default: 200)
color {String} een standaard kleur voor polygon (de standaard: #fcba03)
zoom {Number} een standaard zoomniveau (default: 11)
readonly {Boolean} maakt de readonly modus mogelijk (default: false)
stroke {Number} een stroke breedte (default: 2)
radius {Number} een radiusgrootte van punten in het polygon (default: 7)
center {String} een standaard kaartpositie (default: 48.73702478789267,19.137712002562715)
opacity {Number} bepaalt de transparantie van het polygon in percentage (default: 40)
required {Boolean} optioneel (default: false)
filter {String} optioneel, CSS-filter bijvoorbeeld filter:grayscale(90%) invert(100%) (default: null)
NEW: exec {String} optioneel, een link naar de function(value, component) (het wordt uitgevoerd wanneer de waarde verandert)

_Data-bron__ moet bevatten:

{
    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]) reinigt het polygon @draw {Boolean} (default: false)
component.move(lat, lng) verplaatst de kaart naar de specifieke positie
component.export(opt, callback(base64)) exporteert gegevens naar het beeld
- opt.width {Number} Verplicht
- opt.height {Number} Verplicht
- opt.zoom {Number} (de standaard: 13)
- opt.type {png|jpg} (de standaard: png)
- opt.quality {Number} alleen voor JPEG
- opt.points {Array Number}
- opt.color {String} (de standaard: config.color)
- opt.radius {Number} (de standaard: config.radius)
- opt.opacity {Number} (de standaard: config.opacity)

Uitgang:

Uitgebreid door center { lat: Number, lng: Number } eigendom

Goed om te weten:

double click op de verticals (gemaakte punt) zal het geselecteerde punt verwijderen

Gebruik het met <ui-component name="drawzone">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator CDN per standaard). auteur: Peter Sirka & Dodo Marton. bron: de Componentator Componenten repository, MIT licentie.

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>