2.1.2.1. Genérica
Permite definir las características de todos los atributos de la simbología, para cada tipo de geometría que queramos que aplique en nuestra capa:
let estilo1 = new M.style.Generic({
point: {
// Definición atributos para puntos
},
polygon: {
// Definición atributos para polígonos
},
line: {
// Definición atributos para líneas
}
});
// Asignamos el estilo a la capa
capaVectorial.setStyle(estilo1);Solo son necesarias las definiciones que apliquen a la capa. Es decir, si la capa contiene únicamente elementos de tipo punto, bastaría con incluir la definición 'point'. Si la capa contiene elementos de tipo punto y poligonal, bastaría con incluir las definiciones 'point' y 'polygon'. El estilo definido para un tipo de geometría que no exista en la capa se ignora.
A continuación se describen los parámetros de cada tipo de geometría:
La simbología que deseemos crear es la que establece qué parámetros son necesarios, sin que existan parámetros intrínsecamente obligatorios. Así por ejemplo, serían válidos todos los siguientes estilos:
// Punto con relleno rojo
let estilo1 = new M.style.Generic({
point: {
fill: {
color: 'red',
}
}
});
// Punto de radio 5 con relleno verde semitransparente y borde rojo
let estilo2 = new M.style.Generic({
point: {
radius: 5,
fill: {
color: 'green',
opacity: 0.5
},
stroke: {
color: '#FF0000'
}
}
});
// Punto con icono y etiqueta con que lee el valor del atributo nombre del objeto geográfico
let estilo3 = new M.style.Generic({
point: {
icon: {
src: 'http://URL_ICONO/icono.png'
},
label: {
text: '{{nombre}}'
}
}
});A continuación se describen todos los parámetros posibles, siempre teniendo en cuenta lo anteriormente comentado respecto a la obligatoriedad de los mismos:
const point = M.style.Generic({
point: {
// Radio del punto. Numérico
radius: 8,
// Relleno
fill: {
// Color de relleno. Hexadecimal, nominal
color: '#F54700' || 'red',
// Transparencia. 0(transparente)|1(opaco)
opacity: 0.5,
},
// Borde exterior
stroke: {
// Color del borde. Hexadecimal, nominal
color: '#C8FE2E' || 'green',
// Grosor en pixeles
width: 2,
// Patrón de distancias
linedash: [5, 5, 20],
// Offset de fase
linedashoffset: 1,
// Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
linecap: 'square',
// Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
linejoin: 'miter',
// Tamaño máximo segmento de conexión
miterlimit: 15,
// Transparencia
opacity: 1,
},
// Etiquetado
label: {
// Texto a escribir
text: 'Etiqueta',
// Fuente y características
font: 'bold 19px Comic Sans MS',
// Color de la fuente. Hexadecimal, nominal
color: '#FF0000' || 'red',
// Debe o no rotar con la pantalla
rotate: false,
// Factor de escala de la fuente
scale: 0.9,
// Desplazamiento en pixeles
offset: [10, 20],
// Halo de la fuente
stroke: {
// Color de relleno del halo. Hexadecimal, nominal
color: 'yellow' || '#FFF000',
// Grosor en píxeles del halo
width: 2,
// Patrón de distancias de la línea
linedash: [5, 5, 20],
// Offset de fase
linedashoffset: 1,
// Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
linecap: 'square',
// Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
linejoin: 'miter',
// Tamaño máximo segmento de conexión
miterlimit: 15,
},
// Rotación de la etiqueta
rotation: 0.5,
// Alineación. RIGHT|LEFT|CENTER
align: M.style.align.RIGHT,
// Altura de la etiqueta. TOP|BOTTOM|MIDDLE|
// ALPHABETIC|HANGING|IDEOGRAPHIC
baseline: M.style.baseline.TOP,
},
// Icono tipo imagen
icon: {
// Url de la imagen
src: 'http://url_imagen',
// Rotación de la imagen
rotation: 0.5,
// Factor de escala
scale: 0.5,
// Transparencia del icono. 0(transparente)|1(opaco)
opacity: 0.8,
// Desplazamiento respecto al punto
anchor: [0.5, 1.9],
// Ubicación inicial de la coordenada respecto al icono
anchororigin: 'top-left',
// Unidades de desplazamiento de anchor. fraction | pixel
anchorxunits: 'fraction',
anchoryunits: 'fraction',
// Rotación con dispositivo
rotate: false,
// Offset permite recortar la imagen
offsetorigin: 'top-left', // Punto de referencia para el corte. bottom-left/right|top-left/right
// Píxeles a mover el punto de referencia en cada eje
offset: [10, 0],
// Píxeles a recortar desde el offset en cada eje
size: [5, 15],
// null||'Anonymous'(permite la descarga no autenticada de la imagen de origen cruzado)
crossorigin: null,
// Renderizado. true(nítido)|false(desenfoque)
snaptopixel: true,
// Relleno del SVG
fill: {
// Color de relleno. Hexadecimal, nominal
color: '#FF0000' || 'red',
// Transparencia. 0(transparente)|1(opaco)
opacity: 0.5,
},
// Halo del SVG
stroke: {
// Hexadecimal, nominal
color: '#006CFF' || 'blue',
// Tamaño
width: 1,
},
},
// Icono tipo FontSymbol
icon: {
// Forma del fontsymbol.
// BAN(cículo)|BLAZON(diálogo cuadrado)|BUBBLE(diálogo redondo)|CIRCLE(círculo)|LOZENGE(diamante)|MARKER(diálogo redondeado)
// NONE(ninguno)|SHIELD(escudo)|SIGN(triángulo)|SQUARE(cuadrado)|TRIANGLE(triángulo invertido)
form: M.style.form.LOZENGE,
// Clase fuente
class: 'g-cartografia-alerta',
// Tamaño de la fuente
fontsize: 0.5,
// Tamaño del radio
radius: 8,
// Giro del icono en radianes
rotation: 0,
// Activar rotación con dispositivo
rotate: false,
// Desplazamiento en píxeles en los ejes x,y
color: '#006CFF' || 'blue', // Hexadecimal, nominal
// Desplazamiento
offset: [0, 0],
// Color de relleno. Hexadecimal, nominal
fill: '#8A0829' || 'red',
// Color del borde. Hexadecimal, nominal
gradientcolor: '#088A85' || 'blue',
// Degradado entre color de borde e interior
gradient: true,
// Transparencia. 0(transparente)|1(opaco)
opacity: 0.5,
},
}
});Permite cargar estilos de la librería base.
new M.style.Generic(undefined, new ol.style.Style({
fill: new ol.style.Fill({
color: '#F5470088'
}),
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 10,
lineDash: [5, 5, 20],
lineDashOffset: 5,
lineCap: 'butt'
}),
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: '#F5470088',
width: 20
}),
stroke: new ol.style.Stroke({
color: '#0000ff88',
width: 5,
lineDash: [5, 5, 20],
lineDashOffset: 5,
lineCap: 'butt'
})
})
});
);
Al igual que con los otros tipos de simbología, la simbología lineal que deseemos crear es la que establece qué parámetros usar, de entre todos los disponibles. Así por ejemplo, serían válidos todos los siguientes estilos:
// linea amarilla de grosor de tamaño 2
let estilo1 = new M.style.Generic({
line: {
fill: {
color: 'yellow',
width: 2
}
}
});
// linea roja semitransparente con borde negro y etiqueta
let estilo2 = new M.style.Generic({
line: {
'fill': {
color: 'red',
width: 3,
opacity: 0.5,
},
// borde exterior de la linea
'stroke': {
color: '#000000',
width: 5,
},
// etiquetado de la linea
'label': {
// texto o función de etiquetado
text: function(feature) {
return feature.getAttribute('nombre');
},
font: 'bold italic 10px Comic Sans MS',
}
}
});A continuación se describen todos los parámetros posibles, siempre teniendo en cuenta que solo son necesarios los que se requieran para cada estilo:
let line = new M.style.Generic({
line: {
// Relleno de la línea
fill: {
// Color de relleno. Hexadecimal, nominal
color: '#F54700' || 'yellow',
// Grosor de la linea
width: 3,
// Transparencia. 0(transparente)|1(opaca)
opacity: 0.5,
// Patrones para la línea
pattern: {
// Nombre del patrón. hatch(sombreado)|cross(cruz)|dot(punto)|circle(círculo)|square(cuadrado)|tile(mosaico)
// woven(tejido)|crosses(cruces)|caps(tapas)|nylon(nylon)|hexagon(hexágono)|cemetry(cementerio)|sand(arena)|conglomerate(conglomerado)|gravel(grava)
// brick(ladrillo)|dolomite(donomita)|coal(carbón)|breccia(brecha)|clay(arcilla)|flooded(inundado)|chaos(caos)|grass(hierba)|swamp(pantano)|wave(ola)
// vine(vid)|forest(bosque)|scrub(matorral)|tree(árbol)|pine(pino)|pines(pinos)|rock(rock)|rocks(rocks)|Image(Imagen)
name: 'hatch',
// Tamaño del patrón
size: 1,
// Escalado del patrón
scale: 3,
// SOLO ICONO:
// Si name tiene valor 'ICON'
// Color del patrón.Hexadecimal, nominal
color: '#FF0000' || 'red',
// Ángulo de rotación
rotation: 0,
// Desplazamiento del patrón
offset: 5,
// Espacio
spacing: 2,
// Clase de la fuente
class: 'g-cartografia-save',
// Si name tiene valor 'Image'
// Url de la imagen para el patrón.
src: 'http://url_imagen',
}
},
// borde exterior de la línea
stroke: {
// Color del borde exterior. Hexadecimal, nominal
color: 'red' || '#C8FE2E',
// Grosor del borde, superior al de fill para su correcta visualización ya que si no quedaría por debajo del relleno
width: 5,
// Patrón de distancias
linedash: [5, 5, 20],
// Offset de fase
linedashoffset: 1,
// Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
linecap: 'square',
// Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
linejoin: 'miter',
// Tamaño máximo segmento de conexión
miterlimit: 15,
// Opacidad
opacity: 1,
},
// etiquetado de la línea
label: {
// Texto o función de etiquetado
text: function(feature) {
return feature.getAttribute('nombre');
},
// Fuente de etiquetado
font: 'bold 10px Comic Sans MS',
// Escalado a aplicar
scale: 0.9,
// Desplazamiento de etiquetado en píxeles
offset: [10, 20],
// Color de la etiqueta. Hexadecimal, nominal
color: 'red' || '#2EFEC8',
// Halo de la etiqueta
stroke: {
// Color del halo. Hexadecimal, nominal
color: '#C8FE2E',
// Grosor del halo
width: 3,
// Patrón de distancias
linedash: [5, 5, 20],
// Offset de fase
linedashoffset: 1,
// Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
linecap: 'square',
// Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
linejoin: 'miter',
// Tamaño máximo segmento de conexión
miterlimit: 15,
},
// Rotación con dispositivo
rotate: false,
// Ángulo de rotación
rotation: 0.5,
// Alineación. RIGHT|LEFT|CENTER
align: M.style.align.LEFT,
// Altura de la etiqueta. TOP|BOTTOM|MIDDLE|
// ALPHABETIC | HANGING | IDEOGRAPHIC
baseline: M.style.baseline.TOP,
// Efecto listo
smooth: true,
// Desbordamiento de texto ellipsis|hidden|visible
textoverflow: 'hidden',
// Ancho mínimo
minwidth: 60,
// Seguimiento de la geometría. IMPORTANTE: puede afectar seriamente al rendimiento si está activado
path: true,
}
}
});Permite cargar estilos de la librería base.
new M.style.Generic(undefined, new ol.style.Style({
fill: new ol.style.Fill({
color: '#F5470088'
}),
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 10,
lineDash: [5, 5, 20],
lineDashOffset: 5,
lineCap: 'butt'
}),
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: '#F5470088',
width: 20
}),
stroke: new ol.style.Stroke({
color: '#0000ff88',
width: 5,
lineDash: [5, 5, 20],
lineDashOffset: 5,
lineCap: 'butt'
})
})
});
);
Un estilo poligonal puede ser tan simple o complejo como queramos. En base a la simbología que queramos definir, habrá que usar unos u otros parámetros de entre todos los existentes. Ejemplos:
// Polígono verde
let estilo1 = new M.style.Generic({
polygon: {
fill: {
color: 'green'
}
}
});
// Polígono rosa semitransparente con borde rojo de grosor dos
let estilo2 = new M.style.Generic({
polygon: {
fill: {
color: 'pink',
opacity: 0.5,
},
stroke: {
color: '#FF0000',
width: 2
}
}
});A continuación se presenta una lista de todos los parámetros posibles:
let stylePol = new M.style.Generic({
polygon: {
//Relleno del polígono
fill: {
// Color del borde. Hexadecimal, nominal
color: '#6A0888' || 'green',
// Opacidad del relleno
opacity: 0.5,
// Patrón de relleno
pattern: {
// Nombre del patrón. // hatch(sombreado)|cross(cruz)|dot(punto)|circle(círculo)|square(cuadrado)|tile(mosaico)|
// woven(tejido)|crosses(cruces)|caps(tapas)|nylon(nylon)|hexagon(hexágono)|cemetry(cementerio)|sand(arena)|
// conglomerate(conglomerado)|gravel(grava)|brick(ladrillo)|dolomite(donomita)|coal(carbón)|breccia(brecha)|
// clay(arcilla)|flooded(inundado)|chaos(caos)|grass(hierba)|swamp(pantano)|wave(ola)| // vine(vid)|forest(bosque)|scrub(matorral)|tree(árbol)|pine(pino)|pines(pinos)|rock(rock)|rocks(rocks)|IMAGE(Imagen)
name: 'square',
// Escala del patrón
scale: 1.3,
// SOLO ICONO:
// Si name tiene valor 'ICON'
// Tamaño del patrón
size: 5,
// Separación del patrón
spacing: 80,
// Rotación del patrón
rotation: 20,
// Desplazamiento en pixeles
offset: 21,
// Color del patrón
color: '#fff',
// Clase fuente
class: 'g-cartografia-save',
// si name tiene valor 'IMAGE'
src: 'http://url_imagen',
}
},
//borde del polígono
stroke: {
// Color del borde. Hexadecimal, nominal
color: '#C8FE2E' || 'green',
// Ancho de la línea
width: 4,
// Patrón de distancias
linedash: [5, 5, 20],
// Offset de fase
linedashoffset: 1,
// Estilo de final de línea. round|square|butt
linecap: 'square',
// Estilo de conexión de segmentos. miter|round|bevel
linejoin: 'miter',
// Tamaño máximo segmento de conexión
miterlimit: 15,
// Transparencia. 0(transparente)|1(opaco)
opacity: 1,
// Patrón de línea
pattern: {
// Nombre del patrón. hatch|cross|dot|circle
// square|tile|woven|crosses|caps|nylon|hexagon|cemetry
// sand|conglomerate|gravel|brick|dolomite|coal|breccia
// clay|flooded|chaos|grass|swamp|wave|vine|forest|scrub
// tree|pine|pines|rock|rocks|IMAGE
name: 'breccia',
size: 1, // Tamaño del patrón
scale: 3, // Escalado del patrón
// SOLO ICONO:
// Si name tiene valor ICON
// Color del patrón. Hexadecimal, nominal
color: '#FF0000' || 'red',
// Ángulo de rotación
rotation: 0,
// Desplazamiento del patrón
offset: 5,
// Espacio
spacing: 2,
// Clase fuente
class: 'g-cartografia-save',
// Si name tiene valor 'Image'
// Url de la imagen para el patrón.
src: 'http://url_imagen',
}
},
//etiqueta del polígono
label: {
// Texto etiqueta. fijo|función|atributo
text: '{{distrito}}',
// Fuente de la etiqueta
font: 'bold 16px Courier New',
// Escala de la etiqueta
scale: 0.9,
// Desplazamiento en píxeles
offset: [10, 0],
// Color del texto
color: '#000',
// Halo del texto
stroke: {
// Color de la fuente. Hexadecimal, nominal
color: '#FF0000' || 'red',
// Grosor del halo
width: 5,
// Patrón de distancias
linedash: [5, 5, 20],
// Offset de fase
linedashoffset: 1,
// Estilo de final de línea. round|square|butt
linecap: 'square',
// Estilo de conexión de segmentos. miter|round|bevel
linejoin: 'miter',
// Tamaño máximo segmento de conexión
miterlimit: 15,
},
// Rotación con dispositivo
rotate: false,
// Rotación de la etiqueta
rotation: 0.3,
// Alineación horizontal. CENTER|LEFT|RIGHT
align: M.style.align.RIGHT,
// Altura de la etiqueta. TOP|BOTTOM|MIDDLE|
// ALPHABETIC|HANGING|IDEOGRAPHIC
baseline: M.style.baseline.TOP,
}
}
});Permite cargar estilos de la librería base.
new M.style.Generic(undefined, new ol.style.Style({
fill: new ol.style.Fill({
color: '#F5470088'
}),
stroke: new ol.style.Stroke({
color: '#0000ff',
width: 10,
lineDash: [5, 5, 20],
lineDashOffset: 5,
lineCap: 'butt'
}),
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: '#F5470088',
width: 20
}),
stroke: new ol.style.Stroke({
color: '#0000ff88',
width: 5,
lineDash: [5, 5, 20],
lineDashOffset: 5,
lineCap: 'butt'
})
})
});
);