j-DrawZone

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

El componente puede dibujar una zona (polígono). Este componente utiliza la biblioteca OpenLayers con el motor de mapas OpenStreetMap.

Configuración:

parent {String} un elemento principal (predeterminado: undefined)
height {Number} una altura fija (mínima) (predeterminado: 200)
color {String} un color predeterminado para el polígono (predeterminado: #fcba03)
zoom {Number} un nivel de zoom predeterminado (predeterminado: 11)
readonly {Boolean} habilita el modo de solo lectura (predeterminado: false)
stroke {Number} un ancho de trazo (predeterminado: 2)
radius {Number} un tamaño de radio de puntos en el polígono (predeterminado: 7)
center {String} una posición predeterminada en el mapa (predeterminado: 48.73702478789267,19.137712002562715)
opacity {Number} determina la transparencia del polígono en porcentaje (predeterminado: 40)
required {Boolean} opcional (predeterminado: false)
filter {String} opcional, filtro CSS, p. filter:grayscale(90%) invert(100%) (predeterminado: null)
NUEVO: exec {String} opcional, un enlace al function(value, component) (se ejecutará cuando se cambie el valor)

Fuente de datos debe contener:

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

Métodos:

component.clear([draw]) borra el polígono @draw {Boolean} (predeterminado: false)
component.move(lat, lng) mueve el mapa a la posición específica
component.export(opt, callback(base64)) exporta datos a la imagen
- opt.width {Number} requerido
- opt.height {Number} requerido
- opt.zoom {Number} (predeterminado: 13)
- opt.type {png|jpg} (predeterminado: png)
- opt.quality {Number} sólo para JPEG
- opt.points {Array Number}
- opt.color {String} (predeterminado: config.color)
- opt.radius {Number} (predeterminado: config.radius)
- opt.opacity {Number} (predeterminado: config.opacity)

Salida:

está ampliado por la propiedad center { lat: Number, lng: Number }

Es bueno saberlo:

double click en los vértices (punto creado) eliminará el punto seleccionado

Úselo con <ui-component name="drawzone">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Sirka y Dodo Marton. Fuente: repositorio de componentes Componentator, licencia 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>