Skip to content

2.1.2.2. Básica

Jump to bottom
yaizavalidador edited this page Jul 6, 2023 · 2 revisions

Permite definir las características de la simbología que quiera establecer, según el tipo de geometría de la capa:

// Ejemplo estilo punto
const estiloPunto = new M.style.Point({
   radius: 8, 
   fill: {  
     color: 'blue',
   }
});
capaPuntos.setStyle(estiloPuntos);

// Ejemplo estilo linea
const estiloLinea = new M.style.Line({
    fill: {
       color: 'green',
       width: 3
    }
});
capaLineas.setStyle(estiloLinea);

// Ejemplo estilo polígono
const estiloPoligono = new M.style.Polygon({
   fill: {
     color: 'green'
   }
});
capaPoligonos.setStyle(estiloPoligono);

Point

mind_map_point

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}}'
  }
});

// Asignamos uno de los estilos a la capa
capaVector.setStyle(estilo1);

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({
  // 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,
    // Opacidad
    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
    // Punto de referencia para el corte. bottom-left/right|top-left/right
    offsetorigin: 'top-left',
    // 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
    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
    offset: [0, 0],
    // Hexadecimal, nominal
    color: '006CFF' || 'blue',
    // 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,
  },
});

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

Ejemplo funcional

Line

mind_map_line_v1 Al igual que con el resto de simbología básica, 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.Line({
    fill: {
       color: 'yellow',
       width: 2
    }
});

// linea roja semitransparente con borde negro y etiqueta
let estilo2 = new M.style.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.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 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',
    // Propiedad que define el ancho minimo de un elemento
    minwidth: 60,
    // Seguimiento de la geometría. IMPORTANTE: puede afectar seriamente al rendimiento si está activado
    path: true,
  }
});

💡 Para las capas lineales, el API aplica el estilo por defecto M.style.Line.DEFAULT. Para cambiarlo, basta con redefinir dicha constante y asignarle el estilo deseado.

Polygon

mind_map_polygon_v1 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 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. Hexadecimal, nominal
      color: '#FF0000' || 'red',
      // 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 (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,
    // 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',
      // Tamaño del patrón
      size: 1,
      // Escalado del patrón
      scale: 3,
      // SOLO ICONO:
      // Si name tiene valor 'ICON'
      // Color del patrón
      color: '#FF0000',
      // Á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',
    }
  },
  //etiqueta del polígono
  label: {
    // Texto etiqueta. fijo (texto fijo)|función(función JS que devuelve el valor)|atributo(atributo de la capa)
    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,
  }
});

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

1.INICIO
   1.1. Componentes de la API-CNIG
   1.2. Documentación y Puntos de acceso
   1.3. Primeros pasos
   1.4. Diagrama API CNIG

2. MAPA
2.1. Capas

 ■ 2.1.1. Fuentes
   • 2.1.1.1. Capas vectoriales
     + Vector
     + WFS
     + GeoJSON
     + KML
     + MVT
     + OGCAPIFeatures
     + MBTilesVector
     + GenericVector
   • 2.1.1.2. Capas ráster
     + WMS
     + WMTS
     + TMS
     + XYZ
     + OSM
     + MBTiles
     + GenericRaster
   • 2.1.1.3. Capas rápidas

 ■ 2.1.2. Simbolización
   • 2.1.2.1. Genérica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.2. Básica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.3. Avanzada
     + Coropletas
     + Proporcional
     + Categorías
     + Estadísticos
     + Mapas de Calor
     + Cluster
     + Línea de flujo
     + Composición

 ■ 2.1.3. Filtros

    2.3. Plugins

2.4. Paneles

  ■ Creación de panel desde cero sin controles

  ■ Tutorial Panel de un único control

  ■ Tutorial Panel de un único control con más de un botón

  ■ Tutorial Panel con más de un control

2.5. Eventos

  ■ Gestión de eventos
  ■ Gestión de eventos en controles personalizados

    2.6. Internacionalización

    2.7. Configuración

    2.8. Acceso librerías base

3. UTILIDADES

4. PROXY

5. API REST
 5.1. Parametrización API-REST
 5.2. Base de Datos API-REST
 5.3. API REST Actions
 5.4. Servicio de correos electrónicos
 5.5. Capas rápidas

6. PARAMETRIZACIÓN VISUALIZADORES

7. SOLUCIÓN DE PROBLEMAS

8. PROCESO DE VERSIONADO

9. GUÍA DE DESARROLLO
  > Guía de desarrollo de plugins
  > Guía de desarrollo de visualizadores con React
  > Guía de desarrollo de componentes
  > Guía para el desarrollo de API-CNIG
  > Compilación proyecto API-CNIG

Clone this wiki locally