M.style.Point - sigcorporativo-ja/Mapea4 GitHub Wiki
:warning: : A partir de la v6.1.0 de Mapea se desaconseja el uso de esta simbología Básica, y se recomienda el uso de la Simbología Genérica, que pasa a ser la oficial y cubre más escenarios respecto a la geometría de las capas. La migración de simbología Básica a Genérica es muy sencilla.
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.Point({
fill: {
color: 'red',
}
});
// Punto de tamaño 5 con relleno verde semitransparente y borde rojo
let estilo2 = new M.style.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.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.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, // Degradado entre color de borde e interior
opacity: 0.5 // Transparencia. 0(transparente)|1(opaco)
}
});
:bulb: Para las capas puntuales, Mapea aplica el estilo por defecto M.style.Point.DEFAULT. Para cambiarlo, basta con redefinir dicha constante.