2.1.2.2. Básica
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 IDEE.style.Point({
radius: 8,
fill: {
color: 'blue',
}
});
capaPuntos.setStyle(estiloPuntos);
// Ejemplo estilo linea
const estiloLinea = new IDEE.style.Line({
fill: {
color: 'green',
width: 3
}
});
capaLineas.setStyle(estiloLinea);
// Ejemplo estilo polígono
const estiloPoligono = new IDEE.style.Polygon({
fill: {
color: 'green'
}
});
capaPoligonos.setStyle(estiloPoligono);
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.Point({
fill: {
color: 'red',
}
});
// Punto de tamaño 5 con relleno verde semitransparente y borde rojo
let estilo2 = new IDEE.style.Point({
radius: 5,
fill: {
color: 'green',
opacity: 0.5
},
stroke: {
color: '#FF0000'
}
});
// Punto con icono y etiqueta con su nombre
let estilo3 = new IDEE.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:
```javascript
IDEE.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],// 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
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
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',// No disponible en implementación Cesium
anchoryunits: 'fraction',// No disponible en implementación Cesium
// Rotación con dispositivo
rotate: false,// No disponible en implementación Cesium
// Offset permite recortar la imagen
// Punto de referencia para el corte. bottom-left/right|top-left/right
offsetorigin: 'top-left',// No disponible en implementación Cesium
// 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,// No disponible en implementación Cesium
// Renderizado. true(nítido)|false(desenfoque)
snaptopixel: true,// No disponible en implementación Cesium
// 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
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
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,
},
// 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.
});💡 Para las capas puntuales, el API aplica el estilo por defecto IDEE.style.Point.DEFAULT. Para cambiarlo, basta con redefinir dicha constante.
Ejemplo funcional
Permite cargar estilos de la librería base.
new IDEE.style.Point(undefined,
new ol.style.Style({
image: new ol.style.Circle({
radius: 25,
fill: new ol.style.Fill({ color: '#0000ff88' }),
stroke: new ol.style.Stroke({ color: '#F54700',
width: 5, lineDash: [10, 10],
lineDashOffset: 5,
lineCap: 'butt'
})
})
}));
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 IDEE.style.Line({
fill: {
color: 'yellow',
width: 2
}
});
// linea roja semitransparente con borde negro y etiqueta
let estilo2 = new IDEE.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:
```javascript
let line = new IDEE.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: {// 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: '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],// 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
// Propiedad que define el ancho minimo de un elemento
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
}
});💡 Para las capas lineales, el API aplica el estilo por defecto IDEE.style.Line.DEFAULT. Para cambiarlo, basta con redefinir dicha constante y asignarle el estilo deseado.
Permite cargar estilos de la librería base.
new IDEE.style.Line(
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'
})
})
);
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.Polygon({
fill: {
color: 'green'
}
});
// Polígono rosa semitransparente con borde rojo de grosor dos
let estilo2 = new IDEE.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 IDEE.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: {// 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,
// 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],// 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,
// 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',
// 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],// 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,// 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.
});