2.1.2.1. Genérica

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

// Punto de radio 5 con relleno verde semitransparente y borde rojo
let estilo2 = new IDEE.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 IDEE.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 = IDEE.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], // No disponible en implementación Cesium
      // Offset de fase
      linedashoffset: 1, // No disponible en implementación Cesium
      // Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
      linecap: 'square', // No disponible en implementación Cesium
      // Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
      linejoin: 'miter', // No disponible en implementación Cesium
      // Tamaño máximo segmento de conexión
      miterlimit: 15, // No disponible en implementación Cesium
      // 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, // No disponible en implementación Cesium
      // 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], // No disponible en implementación Cesium
        // Offset de fase
        linedashoffset: 1, // No disponible en implementación Cesium
        // Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
        linecap: 'square', // No disponible en implementación Cesium
        // Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
        linejoin: 'miter', // No disponible en implementación Cesium
        // Tamaño máximo segmento de conexión
        miterlimit: 15, // No disponible en implementación Cesium
      },
      // Rotación de la etiqueta
      rotation: 0.5, // No disponible en implementación Cesium
      // Alineación. RIGHT|LEFT|CENTER
      align: IDEE.style.align.RIGHT,
      // Altura de la etiqueta. TOP|BOTTOM|MIDDLE|
      // ALPHABETIC|HANGING|IDEOGRAPHIC
      baseline: IDEE.style.baseline.TOP,
    },
    // Icono tipo imagen
    icon: {
      // Url de la imagen (para las extensiones .glb y .gltf no están disponibles las propiedades anchor, anchororigin, anchorxunits,
      anchoryunits, rotate, offsetorigin, offset, size, crossorigin y snaptopixel)
      src: 'http://url_imagen',
      // Especifica el tamaño de píxel mínimo aproximado del modelo independientemente del zoom (solo disponible para imágenes con extensión .glb o .gltf) 
      minimumPixelSize: 50,
      // 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, // No disponible en implementación Cesium
      // 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: IDEE.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,  // No disponible en implementación Cesium
      // 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,
    },
    // Posición relativa al terreno
    // NONE|CLAMP_TO_GROUND|RELATIVE_TO_GROUND|CLAMP_TO_TERRAIN|RELATIVE_TO_TERRAIN|CLAMP_TO_3D_TILE|RELATIVE_TO_3D_TILE
    heightReference: IDEE.style.heightReference.NONE, // Solo disponible para Cesium.
  }
});

vendorOptions

Permite cargar estilos de la librería base.

new IDEE.style.Generic(undefined, new ol.style.Style({
    fill: new ol.style.Fill({
        color: '#F5470088'
    }),
    stroke: new ol.style.Stroke({
        color: '#0000ff',
        width: 10,
        lineDash: [5, 5, 20],
        lineDashOffset: 5,
        lineCap: 'butt'
    }),
    image: new ol.style.Circle({
        radius: 15,
        fill: new ol.style.Fill({
            color: '#F5470088',
            width: 20
        }),
        stroke: new ol.style.Stroke({
            color: '#0000ff88',
            width: 5,
            lineDash: [5, 5, 20],
            lineDashOffset: 5,
            lineCap: 'butt'
        })
    })
});
);

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 IDEE.style.Generic({
  line: {
    fill: {
      color: 'yellow',
      width: 2
    }
  }
});

// linea roja semitransparente con borde negro y etiqueta
let estilo2 = new IDEE.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 IDEE.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: { // En caso de indicar patrón en línea no se visualizará el stroke definido
        // 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, // (No disponible para implementación Cesium)
        // 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', // (No disponible para implementación Cesium)
        // Si name tiene valor 'Image'
        // Url de la imagen para el patrón.
        src: 'http://url_imagen',
        // Número de veces que se quiera repetir la imagen en horizontal y vertical
        repeat: [2, 5], // (Solo disponible para implementación Cesium)
      }
    },
    // 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],// No disponible en implementación Cesium
      // Offset de fase
      linedashoffset: 1,// No disponible en implementación Cesium
      // Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
      linecap: 'square',// No disponible en implementación Cesium
      // Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
      linejoin: 'miter',// No disponible en implementación Cesium
      // Tamaño máximo segmento de conexión
      miterlimit: 15,// No disponible en implementación Cesium
      // 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],// No disponible en implementación Cesium
        // Offset de fase
        linedashoffset: 1,// No disponible en implementación Cesium
        // Estilo de final de línea. round (borde redondeado)|square(borde cuadrado ligeramente alargado)|butt(borde cuadrado afilado)
        linecap: 'square',// No disponible en implementación Cesium
        // Estilo de conexión de segmentos. miter(inglete)|round(redondo)|bevel(bisel)
        linejoin: 'miter',// No disponible en implementación Cesium
        // Tamaño máximo segmento de conexión   
        miterlimit: 15,// No disponible en implementación Cesium
      },
      // Rotación con dispositivo
      rotate: false,// No disponible en implementación Cesium
      // Ángulo de rotación
      rotation: 0.5,// No disponible en implementación Cesium
      // Alineación. RIGHT|LEFT|CENTER
      align: IDEE.style.align.LEFT,
      // Altura de la etiqueta. TOP|BOTTOM|MIDDLE| 					         
      // ALPHABETIC | HANGING | IDEOGRAPHIC
      baseline: IDEE.style.baseline.TOP,
      // Efecto listo
      smooth: true,// No disponible en implementación Cesium
      // Desbordamiento de texto ellipsis|hidden|visible
      textoverflow: 'hidden',// No disponible en implementación Cesium
      // Ancho mínimo
      minwidth: 60,// No disponible en implementación Cesium
      // Seguimiento de la geometría. IMPORTANTE: puede afectar seriamente al rendimiento si está activado
      path: true,// No disponible en implementación Cesium
    }
    // Posición relativa al terreno
    // NONE|CLAMP_TO_GROUND|RELATIVE_TO_GROUND|CLAMP_TO_TERRAIN|RELATIVE_TO_TERRAIN|CLAMP_TO_3D_TILE|RELATIVE_TO_3D_TILE
    heightReference: IDEE.style.heightReference.NONE, // Solo disponible para Cesium.
  }
});

vendorOptions

Permite cargar estilos de la librería base.

new IDEE.style.Generic(undefined, new ol.style.Style({
    fill: new ol.style.Fill({
        color: '#F5470088'
    }),
    stroke: new ol.style.Stroke({
        color: '#0000ff',
        width: 10,
        lineDash: [5, 5, 20],
        lineDashOffset: 5,
        lineCap: 'butt'
    }),
    image: new ol.style.Circle({
        radius: 15,
        fill: new ol.style.Fill({
            color: '#F5470088',
            width: 20
        }),
        stroke: new ol.style.Stroke({
            color: '#0000ff88',
            width: 5,
            lineDash: [5, 5, 20],
            lineDashOffset: 5,
            lineCap: 'butt'
        })
    })
});
);

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

// Polígono rosa semitransparente con borde rojo de grosor dos
let estilo2 = new IDEE.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 IDEE.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: {// No disponible en implementación Cesium
        // 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, // (No disponible para implementación Cesium)
        // 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', // (No disponible para implementación Cesium)
        // si name tiene valor 'IMAGE'
        src: 'http://url_imagen',
        // Número de veces que se quiera repetir la imagen en horizontal y vertical
        repeat: [2, 5], // (Solo disponible para implementación Cesium) 
      }
    },
    //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],// No disponible en implementación Cesium
      // Offset de fase
      linedashoffset: 1,// No disponible en implementación Cesium
      // Estilo de final de línea. round|square|butt
      linecap: 'square',// No disponible en implementación Cesium
      // Estilo de conexión de segmentos. miter|round|bevel
      linejoin: 'miter',// No disponible en implementación Cesium
      // Tamaño máximo segmento de conexión
      miterlimit: 15,
      // Transparencia. 0(transparente)|1(opaco)
      opacity: 1,
      // Patrón de línea
      pattern: {// No disponible en implementación Cesium
        // 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}}',
      // Permite ocultar el texto cuando sobrepasa las dimensiones del feature.
      overflow: true|false,
      // 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],// No disponible en implementación Cesium
        // Offset de fase
        linedashoffset: 1,
        // Estilo de final de línea. round|square|butt// No disponible en implementación Cesium
        linecap: 'square',// No disponible en implementación Cesium
        // Estilo de conexión de segmentos. miter|round|bevel
        linejoin: 'miter',// No disponible en implementación Cesium
        // Tamaño máximo segmento de conexión
        miterlimit: 15,// No disponible en implementación Cesium
      },
      // Rotación con dispositivo
      rotate: false,// No disponible en implementación Cesium
      // Rotación de la etiqueta
      rotation: 0.3,// No disponible en implementación Cesium
      // Alineación horizontal. CENTER|LEFT|RIGHT
      align: IDEE.style.align.RIGHT,
      // Altura de la etiqueta. TOP|BOTTOM|MIDDLE| 					         
      // ALPHABETIC|HANGING|IDEOGRAPHIC  
      baseline: IDEE.style.baseline.TOP,
    },
    // Posición relativa al terreno
    // NONE|CLAMP_TO_GROUND|RELATIVE_TO_GROUND|CLAMP_TO_TERRAIN|RELATIVE_TO_TERRAIN|CLAMP_TO_3D_TILE|RELATIVE_TO_3D_TILE
    heightReference: IDEE.style.heightReference.CLAMP_TO_GROUND, // Solo disponible para Cesium.
    // Indica si se utiliza o no la altura de las coordenadas del polígono.
    perPositionHeight: false, // Solo disponible para Cesium.
    // Extrusión del polígono
    extrudedHeight: (feature) => { feature.getAttribute('n_plantas') * 5 }, // Solo disponible para Cesium.
    // Posición relativa al terreno de la extrusión del polígono.
    // NONE|CLAMP_TO_GROUND|RELATIVE_TO_GROUND|CLAMP_TO_TERRAIN|RELATIVE_TO_TERRAIN|CLAMP_TO_3D_TILE|RELATIVE_TO_3D_TILE
    extrudedHeightReference: IDEE.style.heightReference.RELATIVE_TO_GROUND, // Solo disponible para Cesium.
  }
});