M.style.Generic
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 lineas
}
});Solo son necesarias las definiciones que apliquen a la capa. Es decir, si la capa contiene únicamente elementos de tipo puto, 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 tamaño 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 su nombre
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:
M.style.Generic({
point: {
radius: 8, // Radio del punto. Numérico
// Relleno
fill: {
color: 'red', // Color de relleno. Hexadecimal, nominal
opacity: 0.5 // Transparencia. 0(transparente)|1(opaco)
},
// Borde exterior
stroke: {
color: '#C8FE2E', // Color del borde. Hexadecimal, nominal
width: 2, // Grosor en pixeles
linedash: [5,5,20], // Patrón de distancias
linedashoffset: 1, // Offset de fase
linecap: 'square', // Estilo de final de linea. round|square|butt
linejoin: 'miter', // Estilo de conexión de segmentos. miter|round|bevel
miterlimit: 15 // Tamaño máximo segmento de conexión
},
// Etiquetado
label: {
text: 'Etiqueta', // Texto a escribir
font: 'bold 19px Comic Sans MS', // Fuente y caracteristicas
color: '#FF0000', // Color de la fuente
rotate: false, // Debe o no rotar con la pantalla
scale: 0.9, // Factor de escala de la fuente
offset: [10, 20],
// Halo de la fuente
stroke: {
color: 'yellow', // Color de relleno del halo
width: 2, // Grosor en pixeles del halo
linedash: [5,5,20], // Patrón de distancias de la linea
linedashoffset: 1, // Offset de fase
linecap: 'square', // Estilo de final de linea. round|square|butt
linejoin: 'miter', // Estilo de conexión de segmentos. miter|round|bevel
miterlimit: 15 // Tamaño máximo segmento de conexión
},
rotation: 0.5, // Rotacion de la etiqueta
align: M.style.align.RIGHT, // Alineacion. RIGHT|LEFT|CENTER|JUSTIFY
baseline: M.style.baseline.TOP // Altura de la etiqueta. TOP|BOTTOM|MIDDLE
},
// Icono tipo imagen
icon: {
src: 'http://url_imagen', // Url de la imagen
rotation: 0.5, // Rotacion de la imagen
scale: 0.5, // Factor de escala
opacity: 0.8, // Transparencia del icono. 0(transparente)|1(opaco)
anchor: [0.5, 1.9], // Desplazamiento respecto al punto
anchororigin: 'top-left', // Ubicacion inicial de la coordenada respecto al icono
anchorxunits: 'fraction', // Unidades de desplazamiento de anchor. fraction | pixel
anchoryunits: 'fraction',
rotate: false, // Rotacion con dispositivo
// Offset permite recortar la imagen
offsetorigin: 'top-left', // Punto de referencia para el corte. bottom-left/right|top-left/right
offset: [10, 0], // Pixeles a mover el punto de referencia en cada eje
size:[5, 15], // Pixeles a recortar desde el offset en cada eje
crossorigin: null,
snaptopixel: true, // Renderizado. true(nítido)|false(desenfoque)
},
// Icono tipo FontSymbol
icon: {
form: M.style.form.LOZENGE, // Forma del fontsymbol.
// BAN|BLAZON|BUBBLE|CIRCLE|LOZENGE|MARKER
// NONE|SHIELD|SIGN|SQUARE|TRIANGLE
class: "g-cartografia-alerta",
fontsize: 0.5,
radius: 8, // Tamaño
rotation: 0, // Giro del icono en radianes
rotate: false, // Activar rotacion con dispositivo
offset: [0, 0], // Desplazamiento en pixeles en los ejes x,y
fill: '#8A0829', // Color de relleno
color: '#088A85', // Color del borde
gradient: true, // Si degradado entre color de borde e interior o no
opacity: 0.5 // Transparencia. 0(transparente)|1(opaco)
}
}
});
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 dos
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 funcion 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 linea
fill: {
color: 'yellow', // Color de relleno
width: 3, // Grosor de la linea
opacity: 0.5, // Transparencia. 0(transparente)|1(opaca)
},
// borde exterior de la linea
stroke: {
color: '#C8FE2E', // Color del borde exterior
width: 5, // Grosor del borde, superior al de fill
linedash: [5,5,20], // Patrón de distancias
linedashoffset: 1, // Offset de fase
linecap: 'square', // Estilo de final de linea. round|square|butt
linejoin: 'miter', // Estilo de conexión de segmentos. miter|round|bevel
miterlimit: 15 // Tamaño máximo segmento de conexión
},
// etiquetado de la linea
label: {
text: function(feature) { // Texto o funcion de etiquetado
return feature.getAttribute('nombre');
},
font: 'bold 10px Comic Sans MS', // Fuente de etiquetado
rotate: false, // Fotacion con dispositivo
scale: 0.9, // Escalado a aplicar
offset: [10, 20], // Desplazamiento de etiquetado en pixeles
color: '#2EFEC8', // Color de la etiqueta
// Halo de la etiqueta
stroke: {
color: '#C8FE2E', // Color del halo
width: 3, // Grosor del halo
linedash: [5,5,20], // Patrón de distancias
linedashoffset: 1, // Offset de fase
linecap: 'square', // Estilo de final de linea. round|square|butt
linejoin: 'miter', // Estilo de conexión de segmentos. miter|round|bevel
miterlimit: 15 // Tamaño máximo segmento de conexión
},
rotate: false, // Rotacion con dispositivo
rotation: 0.5, // Ángulo de rotación
align: M.style.align.LEFT, // Alineación horizontal. CENTER|LEFT|RIGHT
baseline: M.style.baseline.TOP, // Alineación vertical. TOP|BOTTOM|MIDDLE
textoverflow: 'hidden',
minwidth: 60,
// IMPORTANTE: puede afectar seriamente al rendimiento
path: true // Seguimiento de la geometría
}
}
});
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: '#6A0888', // Color de relleno
opacity: 0.5, // Opacidad del relleno
// Patrón de relleno
pattern: {
name: M.style.pattern.SQUARE, // Nombre del patron
size: 5, // Tamaño del patrón
scale: 1.3, // Escala del patrón
spacing: 80,
rotation: 20 // Rotación del patrón
// SOLO ICONO:
// Si name = ICON
class: 'g-cartografia-save',
// si name = IMAGE
src: 'http://www.juntadeandalucia.es/prueba/icon.png',
offset: [21, 21],
fill: {
color: '#fff',
opacity: 0.5
}
}
},
//borde del polígono
stroke: {
color: '#ff5588', // Color de la lína
width: 4, // Ancho de la línea
linedash: [5,5,20], // Patrón de distancias
linedashoffset: 1, // Offset de fase
linecap: 'square', // Estilo de final de linea. round|square|butt
linejoin: 'miter', // Estilo de conexión de segmentos. miter|round|bevel
miterlimit: 15 // Tamaño máximo segmento de conexión
},
//etiqueta del polígono
label: {
text: '{{distrito}}', // Texto etiqueta. fijo|función|atributo
font: 'bold 16px Courier New', // Fuente de la etiqueta
scale: 0.9, // Escala de la etiqueta
offset: [10, 0], // Desplazamiento en píxeles
color: '#000', // Color del texto
// Halo del texto
stroke: {
color: '#FFF', // Color del halo
width: 5, // Grosor del halo
linedash: [5,5,20], // Patrón de distancias
linedashoffset: 1, // Offset de fase
linecap: 'square', // Estilo de final de linea. round|square|butt
linejoin: 'miter', // Estilo de conexión de segmentos. miter|round|bevel
miterlimit: 15 // Tamaño máximo segmento de conexión
},
rotate: false, // Rotación con dispositivo
rotation: 0.3, // Rotación de la etiqueta
align: M.style.align.RIGHT, // Alineación horizontal. CENTER|LEFT|RIGHT
baseline: M.style.baseline.TOP, // Alineación vertical. TOP|BOTTOM|MIDDLE
overflow: true // Mapea v6.4.0+, permite etiquetado exceda el polígono
}
}
});