j-DrawZone

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Składnik może wyciągać strefę (polygon). OpenLayers Biblioteka z OpenStreetMap Maszyna do mapy.

Konfiguracja:

parent {String} element rodzinny (default: undefined)
height {Number} (minimalna) wysokość stała (default: 200)
color {String} - kolor poligonu (default: #fcba03)
zoom {Number} standardowy poziom zoomu (default: 11)
readonly {Boolean} umożliwia modyfikację readonly (default: false)
stroke {Number} szerokość wstrząsu (default: 2)
radius {Number} rozmiar promieniowania punktów w poligonie (default: 7)
center {String} Podstawowe pozycje mapy (default) 48.73702478789267,19.137712002562715)
opacity {Number} określa przejrzystość poligonu w procentach (default: 40)
required {Boolean} opcjonalny (default: false)
filter {String} opcjonalny, filtr CSS np. filter:grayscale(90%) invert(100%) (default: null)
NEW: exec {String} opcjonalny, link do function(value, component) (będzie wykonywany po zmianie wartości)

Data-source musi zawierać:

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

Metody:

component.clear([draw]) oczyszcza poligon @draw {Boolean} (default: false)
component.move(lat, lng) przenosi mapę do konkretnej pozycji
component.export(opt, callback(base64)) eksportuje dane do obrazu
- opt.width {Number} Wymagane
- opt.height {Number} Wymagane
- opt.zoom {Number} (default: 13)
- opt.type {png|jpg} (default: png)
- opt.quality {Number} tylko dla JPEG
- opt.points {Array Number}
- opt.color {String} (default: config.color)
- opt.radius {Number} (default: config.radius)
- opt.opacity {Number} (default: config.opacity)

Wyjście:

Został rozszerzony przez center { lat: Number, lng: Number }

Dobrze wiedzieć:

double click na skrzynkach (skreowane punkty) usuną wybrane punkty

Użyj go z <ui-component name="drawzone">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Sirka i Dodo Marton Źródło: Componentator Zestaw składników, licencja 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>