Skip to content

2.1.2.1. Genérica

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

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 líneas
  }
});

// Asignamos el estilo a la capa
capaVectorial.setStyle(estilo1);

Solo son necesarias las definiciones que apliquen a la capa. Es decir, si la capa contiene únicamente elementos de tipo punto, 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:

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.Generic({
  point: {
    fill: {  
      color: 'red',
    }
  }
});

// Punto de radio 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 que lee el valor del atributo nombre del objeto geográfico
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:

const point = M.style.Generic({
  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,
      // Transparencia
      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
      offsetorigin: 'top-left', // Punto de referencia para el corte. bottom-left/right|top-left/right
      // 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 del radio
      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
      color: '006CFF' || 'blue', // Hexadecimal, nominal
      // Desplazamiento
      offset: [0, 0],
      // 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,
    },
  }
});

Line

mind_map_line_v1

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 de tamaño 2
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 función 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 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 de la 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',
      // Ancho mínimo
      minwidth: 60,
      // Seguimiento de la geometría. IMPORTANTE: puede afectar seriamente al rendimiento si está activado
      path: true,
    }
  }
});

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.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 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
        color: '#fff',
        // 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|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,
      // Transparencia. 0(transparente)|1(opaco) 
      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',
        size: 1, // Tamaño del patrón
        scale: 3, // Escalado del patrón
        // 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',
      }
    },
    //etiqueta del polígono
    label: {
      // Texto etiqueta. fijo|función|atributo
      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,
    }
  }
});

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