Skip to content

M.style.Polygon

fbma edited this page Apr 14, 2021 · 4 revisions

polygon
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.Polygon({
   fill: {
     color: 'green'
   }
});

// Polígono rosa semitransparente con borde rojo de grosor dos
let estilo2 = new M.style.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.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        
   }
});

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

Ejemplo funcional

Clone this wiki locally