Class: Draw

.geoBCN.Map.Draw

Versió 1.2

Draw

Mòdul que permet dibuixar elements al mapa

Extends

Mètodes

estàticgeoBCN.Map.Draw.addLayer(options)

Prepara una capa per començar a dibuixar-hi elements.

Per paràmetre es pot passar la definició d'una capa Draw geoBCN.Map.Draw~MapCapaConfig o de una capa tipus vector (geoBCN.Map.CartographyLayer) creada i afegida amb el métode geoBCN.Map.addCartography.

Les capes creades amb addCartography tenen la limitació de que encara que puguin fer editables mitjançant el métode addLayer, a aquestes no es podrà afegir elements nous mitjançant la eina Draw, però si que es podran editar, moure i eliminar els elements existents si les eines estan actives.

Nom paràmetre Tipus Descripció
options geoBCN.Map.Draw~MapCapaConfig | geoBCN.Map.CartographyLayer

opcions parametrizables o capa vectorial creada amb addCartography.
Exemple

Exemple de addLayer.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Definim la capa
var capaLinea = {
    name: 'Linea',
    description: 'Esto es una linea',
    id: 'style-linea',
    type: 'LineString',
    style: {
         strokeColor: '#ff3333',
         strokeWidth: 4
     },
     styleSelected: {
         strokeColor: 'rgba(47, 53, 66,1.0)',
         strokeWidth: 5
     }
};

// Afegim les opcions definides i executem el metode.
mapa.Draw.addLayer(capaLinea);

estàticgeoBCN.Map.Draw.clearAll()

Mètode per netejar el mapa dels dibuixos realitzats.

Exemple

Exemple de clearAll.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Afegir N elements
mapa.Draw.drawPoint(...);
mapa.Draw.drawPoint(...);
mapa.Draw.drawPoint(...);

// Netejar tots els elements del Mapa.
mapa.Draw.clearAll();

estàticgeoBCN.Map.Draw.clearById(id)

Mètode per netejar un conjunt d'elements específics mitjançant l'ID associat a la capa.

Nom paràmetre Tipus Descripció
id string

key que identifica el dibuix en el mapa.
Exemple

Exemple de clearById.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Afegir N elements con diferentes id.
mapa.Draw.drawPoint(..., {id:'id1'});
mapa.Draw.drawPoint(..., {id:'id2'});
mapa.Draw.drawPoint(..., {id:'id1'});

// Netejar tots els elements de la capa id1.
mapa.Draw.clearById('id1');

estàticgeoBCN.Map.Draw.drawCircle(coordinates, radius, options)

Afegeix un element de tipus POLY al mapa i el dibuixa

Nom paràmetre Tipus Descripció
coordinates Array.<number>

Array de coordenades númeriques
radius number

Radi del cercle a dibuixar.
options

Opcions parametrizables.

Nom paràmetre Tipus Descripció
id string

Id de la capa afegida amb el métode geoBCN.Map.Draw.addLayer a la que es vol afegir l'element.
style geoBCN.Map.Draw~CircleStyleMap opcional

Estils de l'element si es vol sobreescriure el de la capa.
styleSelected geoBCN.Map.Draw~CircleStyleMap opcional

Estils de l'element per la selecció si es vol sobreescriure el de la capa.
Exemple

Exemple de drawPoly.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Afegir un cercle
mapa.Draw.drawCircle([426588.824979912, 4582155.72763482]. 40);
mapa.Draw.drawCircle([426588.824979912, 4582155.72763482], 40, {...});

estàticgeoBCN.Map.Draw.drawLine(coordinates, options)

Afegeix un element de tipus LINE al mapa i el dibuixa

Nom paràmetre Tipus Descripció
coordinates Array.<Array.<number>>

Array de coordenades númeriques
options

Opcions parametrizables.

Nom paràmetre Tipus Descripció
id string

Id de la capa afegida amb el métode geoBCN.Map.Draw.addLayer a la que es vol afegir l'element.
style geoBCN.Map.Draw~LineStyleMap opcional

Estils de l'element si es vol sobreescriure el de la capa.
styleSelected geoBCN.Map.Draw~LineStyleMap opcional

Estils de l'element per la selecció si es vol sobreescriure el de la capa.
Exemple

Exemple de drawLine.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Afegir una linia
mapa.Draw.drawLine([[426625.06307364, 4582040.34283724], [426683.056548278, 4582041.57094417]]);
mapa.Draw.drawLine([[426625.06307364, 4582040.34283724], [426683.056548278, 4582041.57094417]], {...});

estàticgeoBCN.Map.Draw.drawPoint(coordinates, options)

Afegeix un element de tipus POINT al mapa i el dibuixa

Nom paràmetre Tipus Descripció
coordinates Array.<number>

Array de coordenades númeriques
options

Opcions parametrizables.

Nom paràmetre Tipus Descripció
id string

Id de la capa afegida amb el métode geoBCN.Map.Draw.addLayer a la que es vol afegir l'element.
style geoBCN.Map.Draw~PointStyleMap | geoBCN.Map.Draw~IconStyleMap opcional

Estils de l'element si es vol sobreescriure el de la capa.
styleSelected geoBCN.Map.Draw~PointStyleMap | geoBCN.Map.Draw~IconStyleMap opcional

Estils de l'element per la selecció si es vol sobreescriure el de la capa.
Exemple

Exemple de drawPoint.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Afegir un punt
mapa.Draw.drawPoint([426588.824979912, 4582155.72763482]);
mapa.Draw.drawPoint([426588.824979912, 4582155.72763482], {...});

estàticgeoBCN.Map.Draw.drawPoint(feature, targetLayer)

Mou un element dibuixat de mapa a una altra capa

Nom paràmetre Tipus Descripció
feature ol.feature

ol.Feature que es vol moure a una altra capa
targetLayer string | ol.layer.Vector

String Id o objecte ol.layer.Vector de la capa destí

estàticgeoBCN.Map.Draw.drawPoly(coordinates, options)

Afegeix un element de tipus POLY al mapa i el dibuixa

Nom paràmetre Tipus Descripció
coordinates Array.<Array.<Array.<number>>>

Array de coordenades númeriques
options

Opcions parametrizables.

Nom paràmetre Tipus Descripció
id string

Id de la capa afegida amb el métode geoBCN.Map.Draw.addLayer a la que es vol afegir l'element.
style geoBCN.Map.Draw~PolygonStyleMap opcional

Estils de l'element si es vol sobreescriure el de la capa.
styleSelected geoBCN.Map.Draw~PolygonStyleMap opcional

Estils de l'element per la selecció si es vol sobreescriure el de la capa.
Exemple

Exemple de drawPoly.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Afegir un poligon
mapa.Draw.drawPoly([
[
    [426604.541686769, 4582106.28276705],
    [426606.103010108, 4582137.20403432], 
    [426630.778233922, 4582163.81715758], 
    [426658.182672815, 4582164.06052762], 
    [426675.543768498, 4582150.61973684], 
    [426689.693439455, 4582134.38399504], 
    [426604.541686769, 4582106.28276705]
]
]);
mapa.Draw.drawPoly([
[
    [426604.541686769, 4582106.28276705],
    [426606.103010108, 4582137.20403432], 
    [426630.778233922, 4582163.81715758], 
    [426658.182672815, 4582164.06052762], 
    [426675.543768498, 4582150.61973684], 
    [426689.693439455, 4582134.38399504], 
    [426604.541686769, 4582106.28276705]
]
], {...});

estàticgeoBCN.Map.Draw.offDraw(eventFunction)

Mètode per eliminar el callback d'onDraw.

Nom paràmetre Tipus Descripció
eventFunction geoBCN.Map.Draw~onDrawCallback

El callback que gestiona l'objecte dibuixat.
Exemple

Exemple d'offDraw.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Crear la funció lógica que executarà l'event onDraw.
var callbackOnDraw = function(feature, type) {
    console.log('Feature:', feature);
    console.log('Type:', type);
}

// Afegir un callback per cada nou Draw
mapa.Draw.onDraw(callbackOnDraw);

// Afegir un punt
mapa.Draw.drawPoint([426588.824979912, 4582155.72763482]);

// Eliminar el callback
mapa.Draw.offDraw(callbackOnDraw);

estàticgeoBCN.Map.Draw.onDraw(eventFunction)

Mètode per afegir un callback que serà executat cada vegada que es dibuixa un element al mapa

Nom paràmetre Tipus Descripció
eventFunction geoBCN.Map.Draw~onDrawCallback

El callback que gestiona l'objecte dibuixat.
Exemple

Exemple d'onDraw.

// Crear l'objecte Map
var mapa = new geoBCN.Map({...});

// Crear la funció lógica que executarà l'event onDraw.
var callbackOnDraw = function(feature, type) {
    console.log('Feature:', feature);
    console.log('Type:', type);
}

// Afegir un callback per cada nou Draw
mapa.Draw.onDraw(callbackOnDraw);

// Afegir un punt
mapa.Draw.drawPoint([426588.824979912, 4582155.72763482]);

Tipus definits

CircleStyleMap

CircleStyleMap

Propietats:
Nom propietat Tipus Argument Descripció
fillColor string <optional>

Color interior
strokeColor string <optional>

Color de la linia exterior
strokeWidth string <optional>

Mida línia exterior

IconStyleMap

IconStyleMap

Propietats:
Nom propietat Tipus Argument Descripció
anchor Array.<number> <optional>

Valor de l’ancorament. Per defecte [0.5,1]
anchorXUnits string <optional>

Unitats pel anchor per l'eix X, valors possibles: ‘fraction’ o ‘píxels’. Per defecte ‘fraction’
anchorYUnits string <optional>

Unitats pel anchor per l'eix Y, valors possibles: ‘fraction’ o ‘píxels’. Per defecte ‘fraction’
scale number <optional>

Escala de la icona
rotation number <optional>

Rotació aplicada a la icona
size number | Array.<number> <optional>

Mida de la icona
url string <optional>

Url de la icona

LineStyleMap

LineStyleMap

Propietats:
Nom propietat Tipus Argument Descripció
strokeColor string <optional>

Color de la linia exterior
strokeWidth string <optional>

Mida línia exterior

MapCapaConfig{object}

Definició de la configuració per als layers.

Propietats:
Nom propietat Tipus Argument Descripció
name string <optional>

Nom de la capa.
description string <optional>

Descripció de la capa.
id string

Identificador de la capa
type string <optional>

Tipus d'elements que conté la capa a escollir entre els seguents: Circle, Polygon, Point, LineString
data object <optional>

Objecte de dades adicionals
zIndex number <optional>

zIndex que s'aplicarà a la capa al mapa
style geoBCN.Map.Draw~LineStyleMap | geoBCN.Map.Draw~CircleStyleMap | geoBCN.Map.Draw~PolygonStyleMap | geoBCN.Map.Draw~PointStyleMap | geoBCN.Map.Draw~IconStyleMap <optional>

Estil de la capa, segons el que s'epecifiqui al param type.
styleSelected geoBCN.Map.Draw~LineStyleMap | geoBCN.Map.Draw~CircleStyleMap | geoBCN.Map.Draw~PolygonStyleMap | geoBCN.Map.Draw~PointStyleMap | geoBCN.Map.Draw~IconStyleMap <optional>

Estil de la capa per la sel·lecció, segons el que s'epecifiqui al param type. {geoBCN.Map.Draw~StyleMap} [styleLegend] - styleLegend

onDrawCallback(feature, type)

Aquest callback es mostra com a part de geoBCN.Map.Draw.

Nom paràmetre Tipus Descripció
feature object
type string

PointStyleMap

PointStyleMap

Propietats:
Nom propietat Tipus Argument Descripció
fillColor string <optional>

Color interior
strokeColor string <optional>

Color de la linia exterior
strokeWidth string <optional>

Mida línia exterior
radius string <optional>

Radi del punt en píxels

PolygonStyleMap

PolygonStyleMap

Propietats:
Nom propietat Tipus Argument Descripció
fillColor string <optional>

Color interior
strokeColor string <optional>

Color de la linia exterior
strokeWidth string <optional>

Mida línia exterior