M.style.Point

⚠️ : 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)
   }
 });

💡 Para las capas puntuales, Mapea aplica el estilo por defecto M.style.Point.DEFAULT. Para cambiarlo, basta con redefinir dicha constante.

Ejemplo funcional