Descripción

Carga en el mapa una capa de datos tanto vectoriales (puntos, líneas y polígonos) como ráster (mapas de calor, imágenes).

Invocación

createLayer(
	data,
	featureType,
	geometryType,
	symbologyType,
	symbologyProperties,
	layerVisibility,
	allowPicking,
	allowPopup,
	allowClustering,
	clusteringProperties
)

Parámetros de entrada

data

Son los datos a representar en el mapa. En el caso de datos vectoriales, recogerá un objeto JSON en formato FeatureCollection, y en el caso de datos ráster tomará una imagen.

featureType

Define el tipo de elemento que conformará la capa. Una capa sólo puede estar formada por un mismo tipo de elemento. Este parámetro se indicará como una cadena de texto, aceptando las siguientes opciones:

entity: para crear entidades vectoriales haciendo uso del Entity API de Cesium.
primitive: para crear entidades vectoriales haciendo uso del Primitive API de Cesium.
tile3D: para cargar conjuntos masivos de datos geoespaciales en 3D.
raster: para cargar imágenes, ya sean mapas de calor o imágenes a georreferenciar.

Si estás interesado en saber las diferencias entre el API de entidades y el API de primitivos, en este post del grupo de Google de Cesium se explica un poco.

geometryType

Se indica el tipo de geometría o clase de ráster de la capa a crear. Se define también como una cadena de texto, pudiendo ser una de estas cinco opciones:

point: para capas de puntos, ya sean entidades o primitivos.
lineString: para capas de líneas, ya sean entidades o primitivos.
polygon: para capas de polígonos, ya sean entidades o primitivos.
heatmap: para capas de mapas de calor (generados a partir de un FeatureCollection de tipo punto).
imagery: para capas de una imagen.

symbologyType

Define el tipo de simbología con la que se representará el elemento en el mapa. Se recoge como una cadena de texto, la cual será una entre las siguientes opciones (no todas las opciones son válidas para todos los tipos de elementos):

billboard: válido sólo para entidades de tipo punto; la simbología será mediante una imagen en formato PNG, JPG o SVG (preferente).
billboardField: válido sólo para entidades de tipo punto; la simbología será mediante una imagen en formato PNG, JPG o SVG (preferente), extraída de una propiedad del objeto 'properties' de la FeatureCollection.
color: válido para todos los elementos vectoriales; la simbología será mediante un color plano.
colorField: válido para todos los elementos vectoriales; la simbología será mediante color plano, extraída su configuración de una propiedad del objeto 'properties' de la FeatureCollection.
model: válido sólo para primitivos de tipo punto, y 3D Tiles; la simbología será un elemento 3D, o un tileset.json.
modelField: válido sólo para primitivos de tipo punto, y 3D Tiles; la simbología será un elemento 3D, o un tileset.json, extraída su configuración de una propiedad del objecto 'properties' de la FeatureCollection.
heatmap: válido sólo para entidades de tipo punto como mapa de calor; a partir de la capa de puntos se representará mediante interpolación un mapa de calor.
heatmapField: válido sólo para entidades de tipo punto como mapa de calor; a partir de la capa de puntos se representará mediante interpolación, extraída su configuración de una propiedad del objecto 'properties' de la FeatureCollection.
degrees: sólo para imagery; la imagen se añadirá como capa en el mapa a partir de un rectángulo definido por las coordenadas de su extensión.

symbologyProperties

Lista con las propiedades de simbología de la capa, cuyo contenido dependerá del tipo de simbología escogido. Dependiendo del caso, dichas propiedades serán:

Para billboard: tomará tres parámetros:
1. billboardDefault: con la imagen del icono a utilizar.
2. billboardSelected: con la imagen del icono a utilizar cuando el elemento se seleccione en el mapa, y se encuentre habilitada la selección. Existe la opción de generar automáticamente este icono a partir del icono por defecto. Para ello, se introducirá en este parámetro la cadena de texto 'fromDefaultBillboard'. Esta opción sólo es válida si se usa el esquema de simbología SVG de Onesait.
3. billboardScale: valor numérico con la escala del icono a utilizar.
Para billboardField: recogerá tres parámetros:
1. billboardDefaultField: nombre de la propiedad del objeto 'properties' con la imagen del icono a utilizar. Por ejemplo, 'billboardDefault' haría referencia a 'properties.billboardDefault'.
2. billboardSelectedField: nombre de la propiedad del objeto 'properties' con la imagen del icono a utilizar cuando el elemento se seleccione en el mapa, y se encuentre habilitada la selección. Por ejemplo, 'billboardSelected' haría referencia a 'properties.billboardSelected'. Existe la opción de generar automáticamente este icono a partir del icono por defecto. Para ello, se introducirá en este parámetro la cadena de texto 'fromDefaultBillboard'. Esta opción sólo es válida si se usa el esquema de simbología SVG de Onesait.
3. billboardScaleField: nombre de la propiedad del objeto 'properties' con el valor numérico con la escala del icono a utilizar. Por ejemplo, 'billboardScale' haría referencia a 'properties.billboardScale'.
Para color y geometría tipo punto: utilizará seis parámetros:
1. pixelSize: valor numérico con el tamaño del radio del punto.
2. color: cadena de texto con el valor del color hexadecimal, o nombre del color en formato CSS, del punto. Por ejemplo, '#FF0000' o 'red'.
3. colorAlpha: valor numérico de transparencia del color del punto, entre 0.0 y 1.0.
4. outlineWidth: parámetro opcional; de no incluirse, usará el valor de 0. Es el valor numérico con el grueso de la línea perimetral del punto.
5. outlineColor: parámetro opcional; cadena de texto con el valor del color hexadecimal, o nombre del color en formato CSS, de la línea perimetral del punto. Por ejemplo, '#00FF00' o 'green'.
6. outlineColorAlpha: parámetro opcional; valor numérico de transparencia de la línea perimetral del punto, entre 0.0 y 1.0.
Para color y geometría tipo línea: tomará tres parámetros:
1. width: valor numérico con el grosor de la línea.
2. color: cadena de texto con el valor del color hexadecimal, o nombre del color en formato CSS, de la línea. Por ejemplo, '#FF0000' o 'red'.
3. colorAlpha: valor numérico de transparencia del color de la línea, entre 0.0 y 1.0.
Para color y geometría tipo polígono: tomará cuatro parámetros:
1. color: cadena de texto con el valor del color hexadecimal, o nombre del color en formato CSS, del polígono. Por ejemplo, '#000000' o 'white'.
2. colorAlpha: valor numérico de transparencia del color del polígono, entre 0.0 y 1.0.
3. outlineColor: parámetro opcional; cadena de texto con el valor del color hexadecimal, o nombre del color en formato CSS, de la línea perimetral del polígono. Por ejemplo, '#00FF00' o 'green'.
4. outlineColorAlpha: parámetro opcional; valor numérico de transparencia de la línea perimetral del polígono, entre 0.0 y 1.0.
  
  En los polígonos no se define el grosor de la línea exterior debido a que dicho grosor depende del motor de renderizado del navegador con el que se visualice el visor. A excepción de Safari, que si procesa correctamente el grosor de la línea exterior, el resto de navegadores lo renderizan siempre con un tamaño de 1 píxel, por lo que se omite la opción de definir el grosor de dicha línea.
Para colorField: pendiente de revisión.
Para model: contendría una única propiedad, con la URL del modelo 3D o del tileset.json a utilizar.
Para modelField: contendría una única propiedad, con el nombre de la propiedad del objeto 'properties' que contendría la URL del modelo 3D (no es aplicable para el tileset.json a utilizar).
Para heatmap: tendrá ocho parámetros de configuración:
1. weightValue: nombre de la propiedad del objeto 'properties' con el valor numérico que servirá de peso a la hora de la interpolación de valores. Por ejemplo, 'weightValue' haría referencia a 'properties.weightValue'.
2. minIterationValue: valor numérico mínimo de peso a considerar en la interpolación.
3. maxIterationValue: valor numérico máximo de peso a considerar en la interpolación.
4. searchRadius: valor numérico con el radio de búsqueda del mapa de calor. A puntos más separados, mayor tendrá que ser el rango, y a puntos más cercanos, menor.
5. minOpacity: valor numérico de la opacidad mínima de los colores del mapa de calor, entre 0.0 y 1.0.
6. maxOpacity: valor numérico de la opacidad máxima de los colores del mapa de calor, entre 0.0 y 1.0.
7. blur: valor numérico del efecto de desenfoque de los colores del mapa de calor, entre 0.0 y 1.0.
8. gradientProperties: Objecto con el gradiente de colores del mapa de calor, entre 0.0 y 1.0.
Para heatmapField: definiría el nombre de la propiedad del objeto 'properties' que contendría la lista de propiedades del mapa de calor previamente definidas. Por ejemplo, 'heatmapProperties' haría referencia a 'properties.heatmapProperties'.
Para imagery: lista con las coordenadas del rectángulo contenedor de la imagen. El orden de las coordenadas sería el siguiente: sur, oeste, norte, este.

layerVisibility

Parámetro opcional; de no incluirse, tomará el valor de 'showLayer'. Parámetro que define si la capa será visible de inicio, o si por el contrario estará oculta. Recibe una cadena de texto, que puede ser una de estas dos:

showLayer: para mostrar la capa.
hideLayer: para ocultar la capa.

allowPicking

Parámetro opcional; de no incluirse, tomará el valor de 'enablePicking'. Parámetro que define si la capa será seleccionable o no cuando se pinche sobre ella. Recibe una cadena de texto, pudiendo ser una de estas dos opciones:

enablePicking: para permitir la selección de elementos.
disablePicking: para impedir la selección de elementos.

allowPopup

Parámetro opcional; de no incluirse, tomará el valor de 'disablePopup'. Parámetro que define si la capa tendrá un popup o no. Si la opción de 'enablePicking' no se encuentra permitida, el popup tampoco se mostrará aunque se habilite esta opción. Recibe una cadena de texto, pudiendo ser una de estas dos posibilidades:

enablePopup: para activar el popup.
disablePopup: para desactivar el popup.

allowClustering

Parámetro opcional; de no incluirse, tomará el valor de 'disableClustering'. Sólo se aplica para las capas de puntos (ya sean entidades o primitivos), definiendo si la capa presentará agrupación o no. Recibe una cadena de texto con estas dos posibilidades:

enableClustering: para activar el agrupado.
disableClustering: para desactivar el agrupado.

clusteringProperties

Parámetro opcional, requerido únicamente si se activa la opción de allowClustering. Este parámetro es una lista con las opciones del clústering, recibiendo cinco en total:

clusterBillboard: imagen del icono a utilizar para la agrupación.
pixelRange: radio de generación del agrupamiento de puntos. A mayor el valor, menor será la distancia necesaria entre dos puntos para que se agrupen.
minimumClusterSize: número de puntos necesarios para que se active el agrupamiento.
clusterLabelLimit: número límite de recuento de entidades agrupadas. A partir de dicho valor, se mostrará 'n+', donde 'n' es el número límite definido.
colorFromPoint: parámetro opcional; si este parámetro es introducido como tal, el color del icono de la agrupación cambiará automáticamente al color de fondo del icono o punto de la capa que agrupa.

Ejemplos de uso

Cargar una capa de entidades de tipo punto, con imágenes como simbología, que se muestra de inicio, permitiendo seleccionar dichos puntos mostrando otra simbología, y con un popup que se abre mostrando la información del punto:

createLayer(
	route_01_01_points,
  	'entity',
  	'point',
  	'billboard',
  	['img/icon_cctv_gray.svg','img/icon_cctv_color.svg', 0.8],
  	'showLayer',
  	'enablePicking',
  	'enablePopup'
)

Cargar una capa de entidades de tipo punto, con imágenes como simbología, que se muestran de inicio, permitiendo seleccionar dichos puntos mostrando otra simbología generada de forma automática, sin popup habilitado, y con un clústering genérico de color gris:

createLayer(
  	route_01_01_points,
  	'entity',
  	'point',
  	'billboard',
  	['img/icon_bench.svg','fromDefaultBillboard',0.8],
  	'showLayer',
  	'enablePicking',
  	'disablePopup',
  	'enableClustering',
 	['img/icon_cluster_gray.svg', 12, 2, 20, 'colorFromBillboard']
)

Cargar una capa de entidades de tipo punto, con puntos de color como simbología, que se muestra de inicio, que permite seleccionar dichos puntos mostrando un cambio de color, con el popup habilitado, y con un clústering que toma automáticamente el color de fondo del punto.

createLayer(
  	route_01_01_points,
  	'entity',
  	'point',
  	'billboard',
  	['img/icon_bench.svg','fromDefaultBillboard',0.8],
  	'showLayer',
  	'enablePicking',
  	'enablePopup',
  	'enableClustering',
  	['img/icon_cluster_gray.svg', 12, 2, 20, 'colorFromBillboard']
)

Cargar una capa de entidades de tipo línea, de color rojo y un tamaño de 2 pixeles de ancho, visible desde el inicio pero que no sea seleccionable (y por lo tanto, sin popup).

createLayer(
  multiLineas,
  'entity',
  'lineString',
  'color',
  [2, 'red', 0.8],
  'showLayer',
  'disablePicking'
)

Cargar una capa de tipo polígono, de color azul al 50% de opacidad, que se muestre de inicio, sea seleccionable, pero no abra ningún popup.

createLayer(
  	oPolygon,
  	'entity',
  	'polygon',
  	'color',
  	['blue', 0.5],
  	'showLayer',
  	'enablePicking'
)

Cargar una capa de puntos como mapa de calor, usando como peso el valor del campo 'weightHeatMap', con un rango de interpolación de pesos entre 0 y 5, con un radio de búsqueda de 650 píxeles, con un rango de transparencia entre 0.2 y 0.6, efecto de desenfoque de 0.99, y con una rampa de color que empieza en rosa para los resultados de valor bajo, morado para los intermedios, y azul oscuro para los valores altos. De inicio la capa será visible:

createLayer(
  route_01_01_points_heatmap,
  'raster',
  'heatmap',
  'color',
  ['weightHeatMap',
    0,
    5,
    650,
	0.2,
	0.6,
	0.99,
	{
	  '.3': '#ff00ff',
	  '.6': '#6666ff',
	  '.9': '#000099'
	}
  ],
  'showLayer'
)

Cargar una capa de imagen a partir de un archivo JPG para unas coordenadas definidas:

createLayer(
  'img/imagen.jpg',
  'raster',
  'imagery',
  'degrees',
  ['-6.395277', '39.461247', '-6.360273', '39.488087'],
  'showLayer'
)

Browser not supported