j-DrawZone

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente pode desenhar uma zona (poligão). OpenLayers A biblioteca com o OpenStreetMap O motor do mapa.

Configuração:

parent {String} um elemento parental (default: undefined)
height {Number} uma altura fixa (minima) (default: 200)
color {String} uma cor padrão para o poligono (default: #fcba03)
zoom {Number} Nível de zoom padrão (default) 11)
readonly {Boolean} permite o modo readonly (default: false)
stroke {Number} uma largura de colisão (default: 2)
radius {Number} um tamanho de rádio dos pontos no poligono (default: 7)
center {String} uma posição de mapa padrão (default: 48.73702478789267,19.137712002562715)
opacity {Number} determina a transparência do poligon em percentagem (default: 40)
required {Boolean} opcional (default: false)
filter {String} opcional, filtro CSS, por exemplo, filter:grayscale(90%) invert(100%) (default: null)
NEW: exec {String} opcional, um link para o function(value, component) (é executado quando o valor for alterado)

__Data-Source_ precisa de conter:

{
    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]) limpa o poligono @draw {Boolean} (default: false)
component.move(lat, lng) mova o mapa para a posição específica
component.export(opt, callback(base64)) exporta dados para a imagem
- opt.width {Number} Necessário
- opt.height {Number} Necessário
- opt.zoom {Number} (defaço: 13)
- opt.type {png|jpg} (defaço: png)
- opt.quality {Number} apenas para JPEG
- opt.points {Array Number}
- opt.color {String} (defaço: config.color)
- opt.radius {Number} (defaço: config.radius)
- opt.opacity {Number} (defaço: config.opacity)

saída:

A propriedade é extendida por center { lat: Number, lng: Number }

Bom para saber:

double click em vertices (punto criado) irá excluir o ponto selecionado

Use-o com <ui-component name="drawzone">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator Autor: Peter Sirka e Dodo Marton. fonte: o Componentator Reserva de componentes, licença 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>