-
Notifications
You must be signed in to change notification settings - Fork 0
3. Utilidades
API-IDEE permite crear cuadros de diálogo modales que aparecen superpuestos a toda la página actual y que se cierran cuando el usuario pincha en el botón de aceptar. Existen tres tipos de diálogos: informativos, de error o de éxito de operación.
Cada diálogo tiene asociado un color diferente (info: azul, error: rojo, success: verde), y permite utilizar los siguientes parámetros:
- message: Mensaje que se mostrará en el diálogo.
- title: Título del diálogo. Por defecto, su valor será INFORMACIÓN/ERROR/ÉXITO dependiendo del tipo del diálogo.
- order: Indica el orden (para acceder mediante la tabulación) de accesibilidad del diálogo creado.
- configuration: Configuración para el diálogo. Permite activar la inteligencia transformando el contenido en texto inteligente. Cuando hablamos de texto inteligente nos referimos a que es capaz de transformar un enlace de una imagen en una etiqueta HTML IMG permitiendo la visualización de la misma, para un video añadir la etiqueta HTML VIDEO, enlace PDF en etiqueta HTML IFRAME... (*)
// Diálogo de tipo info de color azul con el mensaje "Mensaje informativo".
IDEE.dialog.info('Mensaje informativo');
// Diálogo de tipo error de color rojo con el mensaje "Mensaje de error".
IDEE.dialog.error('Mensaje de error');
// Diálogo de tipo success de color verde con el mensaje "Mensaje de éxito".
IDEE.dialog.success('Mensaje de éxito');
// Diálogo de tipo info con el mensaje "Mensaje informativo" y título "Diálogo informativo".
IDEE.dialog.info('Mensaje informativo', 'Diálogo informativo');
// Diálogo de tipo error con el mensaje "Mensaje de error", título "Diálogo de error" y orden 1.
IDEE.dialog.info('Mensaje de error', 'Diálogo de error', 1);Ejemplo de uso:
// Al hacer click sobre el mapa se mostrará un diálogo de tipo info
// con el mensaje 'Se ha pulsado en el mapa'.
mapa.on(IDEE.evt.CLICK, (m) => {
IDEE.dialog.info('Se ha pulsado en el mapa');
});Activando la inteligencia:
IDEE.dialog.info( 'Texto https://www.google.es texto', 'Título', 1, {
intelligence: true
});API-IDEE también permite crear notificaciones que solo se muestran durante un determinado tiempo cuando se realiza una operación. También pueden cerrarse cuando el usuario pulsa en el botón de cerrar. Existen cuatro tipos de toasts: informativos, de error, de éxito o de aviso de operación.
Cada toast tiene asociado un color y un icono diferente (info: azul, error: rojo, success: verde, warning: amarillo), y permite utilizar los siguientes parámetros:
- message: Mensaje que se mostrará en el toast.
- order: Indica el orden (para acceder mediante la tabulación) de accesibilidad del toast creado. Por defecto, 300.
- time: Tiempo de aparición del toast. Por defecto, 4000 (4 segundos).
// Toast de tipo info de color azul con el mensaje "Notificación informativa".
IDEE.toast.info('Notificación informativa');
// Toast de tipo error de color rojo con el mensaje "Notificación de error".
IDEE.toast.error('Notificación de error');
// Toast de tipo warning de color amarillo con el mensaje "Notificación de aviso".
IDEE.toast.warning('Notificación de aviso');
// Toast de tipo success de color verde con el mensaje "Notificación de éxito".
IDEE.toast.success('Notificación de éxito');
// Toast de tipo info con el mensaje "Notificación informativa", orden 1 y duración de 6 segundos.
IDEE.toast.info('Notificación informativa', 1, 6000);
// Toast de tipo error con el mensaje "Notificación de error" y duración de 8 segundos.
IDEE.toast.error('Notificación de error', null, 8000);Ejemplo de uso:
// Al hacer click sobre el mapa se mostrará una notificación durante 4 segundos de tipo info
// con el mensaje 'Se ha pulsado en el mapa'.
mapa.on(IDEE.evt.CLICK, (m) => {
IDEE.toast.info('Se ha pulsado en el mapa');
});API-IDEE incluye en el módulo IDEE/utils el método draggabillyPlugin para el desplazamiento de cualquier plugin sobre el mapa. Este método utiliza la librería de javascript Draggabilly que añade la clase '.is-pointer-down' cuando el usuario presiona el cursor sobre el elemento y '.is-dragging' cuando el elemento empieza a arrastrarse.
draggabillyPlugin consta de los siguientes parámetros:
- panel: Panel del plugin.
- handleEl: Elemento o selector en el que comienza la interacción del arrastre (Identificador).
💡 Se recomienda utilizar el título del panel como elemento o selector de arrastre puesto que el plugin puede contener botones y eventos e interferir en su funcionamiento.
En el siguiente ejemplo, creamos un plugin cerrado de entrada y llamamos al método draggabillyPlugin, pero el desplazamiento del plugin no se activará hasta que se abra.
// Creamos el plugin
const infocoord = new IDEE.plugin.Infocoordinates({
collapsed: true
});
// Añadimos el plugin al mapa
map.addPlugin(infocoord);
// Activamos el desplazamiento del plugin
IDEE.utils.draggabillyPlugin(infocoord.panel_, '#titleInfo');En este caso, al estar abierto de entrada podemos arrastrar directamente el plugin.
// Creamos el plugin
const infocoord = new IDEE.plugin.Infocoordinates({
collapsed: false
});
// Añadimos el plugin al mapa
map.addPlugin(infocoord);
// Activamos el desplazamiento del plugin
IDEE.utils.draggabillyPlugin(infocoord.panel_, '#titleInfo');En los ejemplos anteriores, el plugin es colapsable por lo que al cerrarlo volverá a su posición inicial.
En este ejemplo, creamos un plugin no colapsable y llamamos a draggabillyPlugin pudiendo mover el plugin directamente, pero este no volverá a su posición inicial automáticamente.
// Creamos el plugin
const infocoord = new IDEE.plugin.Infocoordinates({
collapsible: false
});
// Añadimos el plugin al mapa
map.addPlugin(infocoord);
// Activamos el desplazamiento del plugin
IDEE.utils.draggabillyPlugin(infocoord.panel_, '#titleInfo');Los popups representan bocadillos, asociados a unas coordenadas, que ofrecen información al usuario, por ejemplo cuando se pincha en un punto del mapa donde existe información vectorial. Pueden existir múltiples Popups simultáneos.
Este objeto puede gestionarse de la siguiente manera:
// Obtenemos objeto Popup añadido al mapa
const popup = mapa.getPopup();
// Eliminamos popup del mapa
mapa.removePopup();Para construir un popup, necesitamos una pestaña con el contenido y unas coordenadas para añadirlo al mapa.
// Creamos un objeto Tab (pestaña)
const featureTabOpts = {
'icon': 'g-cartografia-pin', // icono para mostrar en la pestaña
'title': 'Título de la pestaña', // título de la pestaña
'content': 'Código html que se quiere mostrar en la pestaña', // contenido para mostrar
'intelligence': true // activa la inteligencia para transformar el contenido en texto inteligente
// Cuando hablamos de texto inteligente nos referimos a que es capaz de transformar un enlace de una imagen en una etiqueta HTML IMG
// permitiendo la visualización de la misma, para un video añadir la etiqueta HTML VIDEO, enlace PDF en etiqueta HTML IFRAME... (*)
};
// Creamos el Popup
popup = new IDEE.Popup();
// Añadimos la pestaña al popup
popup.addTab(featureTabOpts);
// Finalmente se añade al mapa, especificando las coordenadas
mapa.addPopup(popup, [240829,4143088]);El anterior ejemplo, mostrará un popup en las coordenadas indicadas con el contenido indicado.
Pueden añadirse varios popups a la vez.
// Un booleano indica si borrar antes las que ya existan
mapa.addPopup(popup1, [235007, 4141876], true);
mapa.addPopup([popup2, popup3], [
[314528.6120, 4089539.2733],
[315628.6120, 4099639.2733],
], false);
// En los casos que se quiera obtener todos los popups se debe usar el método getPopups
mapa.getPopups();
// getPopup obtendrá el primer popup añadido al mapaUn popup puede tener tantas pestañas como se desee. En el siguiente ejemplo, vamos a añadir una pestaña más al popup anterior:
// Creamos una nueva pestaña
const featureTabOpts2 = {
'icon': 'g-cartografia-pin', // icono para mostrar en la pestaña
'title': 'Título de la pestaña 2', // título de la pestaña
'content': 'Código html que se quiere mostrar en la pestaña 2' // contenido para mostrar
};
// Añadimos la nueva pestaña al popup anterior
popup.addTab(featureTabOpts2);Al tener más de una pestaña se muestran tantas como tenga el popup añadiéndolas con sus iconos, títulos y contenidos correspondientes en cada una de ellas.
Ejemplo de uso:
// Al hacer click sobre el mapa se mostrará un popup con el
// contenido 'Se ha hecho click en las coordenadas...' indicando
// las coordenadas devueltas por el evento click.
mapa.on(IDEE.evt.CLICK, (m) => {
// Creamos la pestaña
const featureTabOpts = {
'icon': 'g-cartografia-pin', // icono para mostrar en la pestaña
'title': 'Título de la pestaña', // título de la pestaña
'content': `Se ha hecho click en las coordenadas ${m.coord}` // contenido para mostrar
};
// Creamos el popup
popup = new IDEE.Popup();
// Añadimos la pestaña al popup
popup.addTab(featureTabOpts);
// Añadimos el popup en las coordenadas devueltas por el evento click
mapa.addPopup(popup, m.coord);
});Se puede además configurar API-IDEE para que los popups muestren un enlace "llévame allí" que abra la navegación google maps a las coordenadas seleccionadas. Para activar dicha acción:
IDEE.Popup.options.takeMeThere = true;También se puede configurar otras opciones para personalizar el enlace "llevame allí". Estas opciones son:
IDEE.Popup.options.textMode = true; // false para mostrar icono
IDEE.Popup.options.msg = 'Google Maps'; // por defecto, "Llévame allí"En la implementación de CesiumJS podemos crear un popup con una altura determinada al añadirle coordenadas 3D. Ejemplo:
popup = new M.Popup();
const featureTabOpts = {
'icon': 'g-cartografia-pin',
'title': 'Título de la pestaña',
'content': 'Código html que se quiere mostrar en la pestaña'
};
popup.addTab(featureTabOpts);
mapa.addPopup(popup, [-2.7492, 39.4637, 300000.0]);Además, existe la posibilidad de poder habilitar o deshabilitar el movimiento del mapa cuando se crea un popup, ya sea mediante el parámetro "extract" en capas vectoriales, "queryable" para servicios ráster, o mediante la creación explicada con anterioridad de un popup a través de new IDEE.Popup(), a través de la configuración de la API-IDEE:
IDEE.config("MOVE_MAP_EXTRACT",false)Permite añadir al mapa etiquetas con una información dada por el usuario y referenciado en unas coordenadas.
A continuación se especifica las diferentes formas de añadir etiquetas a un mapa.
// Etiqueta especificando las coordenadas como array, en este caso elimina por defecto los labels anteriores
mapa.addLabel('Label 1', [-926172.1357121626, 2862617.991389773]);
// Etiqueta especificando las coordenadas como objeto e indicando que no se eliminen los labels anteriores
mapa.addLabel('Label2', { x: -726172.1357121626, y: 5862617.991389773 }, false);
// Etiqueta especificando las coordenadas como cadenas de texto, en este caso elimina por defecto los labels anteriores
mapa.addLabel('Label 3', '-626172.1357121626,4862617.991389773');
// Etiqueta creada como objeto, coordenadas como cadenas de texto, elimina las anteriores
const label1 = new Label('Label 4', ['-626172.1357121626,4862617.991389773']);
mapa.addLabel(label1);
// Etiqueta creada como objeto, coordenadas como array, mantiene las anteriores.
const label2 = new Label('Label 5', [-726172.1357121626, 5862617.991389773]);
mapa.addLabel(label2, [], false);
// Etiqueta creada como objeto, coordenadas como objeto.
const label3 = new Label('Label 6', { x: -526172.1357121626, y: 6862617.991389773 });
mapa.addLabel(label3, [], false);Si un label es añadido sin coordenadas, este aparecerá en el dentro del mapa. Si un label es creado como objeto, este ignora las coordenadas que le de den en addLabel.
// Se muestra en el centro del mapa
mapa.addLabel('Label 1');
// Añadir varias labels sin coordenadas
mapa.addLabel(['Label 1', 'Label 2'], [], false);
// Añadir label como objeto sin coordenadas. Se muestra en el centro del mapa, no tiene en cuenta las coordenadas pasadas por el método addLabel.
const label1 = new Label('Label 1');
mapa.addLabel(label1, ['-826172.1357121626,2862617.991389773']);API-IDEE incluye un mecanismo para realizar peticiones AJAX tanto GET como POST, haciendo uso de un proxy si este está configurado, evitando de esta forma tener que escribir todo el código para hacer la petición o tener que hacer uso de más librerías que faciliten esta tarea.
En el siguiente ejemplo se mostrará un diálogo de tipo informativo al realizar una petición GET a catastro cuando se hace click en el mapa en las coordenadas devueltas por el evento click.
mapa.on(IDEE.evt.CLICK, (e) => {
// Hacemos una petición get con IDEE.remote indicando la URL de catastro y los parámetros a enviar
IDEE.remote.get("http://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_RCCOOR",
{
'SRS': mapa.getProjection().code,
'Coordenada_X': e.coord[0],
'Coordenada_Y': e.coord[1]
}
).then(function (res) {
// Muestra un diálogo informativo con el resultado de la petición get
IDEE.dialog.info(res.text);
});
});La API incluye un formateador WKT para pasar de features a WKT y viceversa.
Para transformar un objeto geográfico (Feature) a WKT utilizamos el método write que cuenta con los siguientes parámetros:
- feature: Objeto geográfico a transformar en formato WKT.
-
options: Opciones de la transformación (opcional). Realizar la reproyección no es obligatorio, es decir, si no se le pasa el objeto de opciones el WKT será devuelto en la proyección original.
- dataProjection: Proyección de destino.
- featureProjection: Proyección de origen.
// Creamos el constructor del formateador
const formatter = new IDEE.format.WKT();
// Creamos el Feature (objeto geográfico) a transformar
const f1 = new IDEE.Feature('id1', {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-4.5703125,
37.16031654673677
]
}
});
// Pasamos de IDEE.Feature a WKT
// Si queremos realizar la reproyección tanto dataProjection como featureProjection son obligatorios
const wkt1 = formatter.write(f1, { dataProjection: 'EPSG:3857', featureProjection: 'EPSG:4326' });Para realizar la transformación de WKT a un objeto geográfico (Feature) se utiliza el método read. Incluye los siguientes parámetros:
- wkt: WKT a transformar en objeto geográfico.
-
options: Opciones de la transformación (opcional). Si no se pasa como parámetro el objeto de opciones, el feature será devuelto en la proyección original, por lo tanto no se realizará la reproyección.
- dataProjection: Proyección de destino.
- featureProjection: Proyección de origen.
Una vez realizada la transformación se puede añadir el/los feature/s a una capa.
// Creamos el constructor
const formatter = new IDEE.format.WKT();
// WKT de ejemplo
const wktEj = "POLYGON ((35 10, 45 45, 15 40, 10 20, 35 10),(20 30, 35 35, 30 20, 20 30))";
// Pasamos de WKT a Feature
// En caso de querer reproyectar tanto dataProjection como featureProjection son obligatorios.
const feature = formatter.read(wktEj, { dataProjection: 'EPSG:3857', featureProjection: 'EPSG:4326' });En caso de querer pasar una lista de Features (objetos geográficos) a WKTCollection utilizamos el método writeCollection con los siguientes parámetros:
- Array<IDEE.Feature>: Lista de objetos geográficos a transformar en WKTCollection.
-
options: Opciones de la transformación (opcional). Al igual que en los métodos anteriores si no se le pasa el objeto de opciones el WKTCollection será devuelto en la proyección original.
- dataProjection: Proyección de destino.
- featureProjection: Proyección de origen.
// Creamos el constructor
const formatter = new IDEE.format.WKT();
// Creamos primer feature (objeto geográfico) a transformar
const feature1 = new IDEE.Feature('id1', {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-4.5703125,
37.16031654673677
]
}
});
// Creamos segundo feature (objeto geográfico) a transformar
const feature2 = new IDEE.Feature('id2', {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-2.3421134,
40.33453245521455
]
}
});
// Pasamos una lista de features a WKTCollection
// En caso de querer reproyectar tanto dataProjection como featureProjection son obligatorios
const wktCollection = formatter.writeCollection([feature1, feature2], {
dataProjection: 'EPSG:3857',
featureProjection: 'EPSG:4326'
});Para pasar de WKTCollection a una lista de features se utiliza el método readCollection con los siguientes parámetros:
- WKTCollection: WKTCollection a transformar en una lista de objetos geográficos.
-
options: Opciones de la transformación (opcional). Si no se le pasa el objeto de opciones el Array<IDEE.Feature> será devuelto en la proyección original.
- dataProjection: Proyección de destino.
- featureProjection: Proyección de origen.
// Creamos el constructor
const formatter = new IDEE.format.WKT();
// WKTCollection de ejemplo
const wktEj2 = "GEOMETRYCOLLECTION (POINT (40 10),LINESTRING(10 10, 20 20, 10 40),POLYGON((40 40, 20 45, 45 30, 40 40)))";
// Pasamos de WKTCollection a IDEE.Feature
// En caso de querer reproyectar tanto dataProjection como featureProjection son obligatorios
const feature = formatter.readCollection(wktEj2, {
dataProjection: 'EPSG:3857',
featureProjection: 'EPSG:4326'
});La API dispone de un método en utilidades que permite codificar un objeto JSON en Base64.
IDEE.utils.encodeBase64(contenido);y de otro método que permite la decodificación:
IDEE.utils.decodeBase64(contenido)Este método se suele usar en los plugins para codificar las opciones que se le manda al constructor para generar la sintaxis para añadir el plugin por API-REST. Ejemplo:
getAPIRestBase64() {
return `${this.name}=base64=${IDEE.utils.encodeBase64(this.options)}`;
}O para visualizar una capa GeoJSON por API-REST: Ejemplo:
// Codificamos la fuente
IDEE.utils.encodeBase64({"type":"FeatureCollection","totalFeatures":8,"features":[{"type":"Feature","id":"provincias_pob.7","geometry":{"type":"Point","coordinates":[558168.25229024,4116978.43564967]},"geometry_name":"the_geom","properties":{"u_cod_prov":"04","nombre":"Almería","es_0_15":104194,"es_16_45":219575,"es_45_65":155307,"es_65":89821,"es_total":568897,"ex_0_15":24124,"ex_16_45":73969,"ex_45_65":27666,"ex_65":10811,"ex_total":136570,"to_0_15":128318,"to_16_45":293544,"to_45_65":182973,"to_65":100632,"to_total":705467}}],"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::25830"}}})Podemos decodificar el contenido usando el método decodeBase64. Ejemplo
IDEE.utils.decodeBase64('eyJ0eXBlIjoiRmVhdHVyZUNvbGxlY3Rpb24iLCJmZWF0dXJlcyI6W3sidHlwZSI6IkZlYXR1cmUiLCJwcm9wZXJ0aWVzIjp7Ikh1c28iOjMwfSwiZ2VvbWV0cnkiOnsiY29vcmRpbmF0ZXMiOltbWy02LDUwXSxbMCw1MF0sWzAsMjBdLFstNiwyMF0sWy02LDUwXV1dLCJ0eXBlIjoiUG9seWdvbiJ9fSx7InR5cGUiOiJGZWF0dXJlIiwicHJvcGVydGllcyI6eyJIdXNvIjozMX0sImdlb21ldHJ5Ijp7ImNvb3JkaW5hdGVzIjpbW1swLDUwXSxbNiw1MF0sWzYsMjBdLFswLDIwXSxbMCw1MF1dXSwidHlwZSI6IlBvbHlnb24ifX0seyJ0eXBlIjoiRmVhdHVyZSIsInByb3BlcnRpZXMiOnsiSHVzbyI6Mjl9LCJnZW9tZXRyeSI6eyJjb29yZGluYXRlcyI6W1tbLTEyLDUwXSxbLTYsNTBdLFstNiwyMF0sWy0xMiwyMF0sWy0xMiw1MF1dXSwidHlwZSI6IlBvbHlnb24ifX0seyJ0eXBlIjoiRmVhdHVyZSIsInByb3BlcnRpZXMiOnsiSHVzbyI6Mjd9LCJnZW9tZXRyeSI6eyJjb29yZGluYXRlcyI6W1tbLTE4LDUwXSxbLTEyLDUwXSxbLTEyLDIwXSxbLTE4LDIwXSxbLTE4LDUwXV1dLCJ0eXBlIjoiUG9seWdvbiJ9fV19')Se puede activar de los siguientes modos:
- Indicando valor booleano: {... intelligence: true ... }
- Objeto:
intelligence: {
activate: true,
}- Objeto con características sobre las etiquetas HTML, permite especificar los tamaños de los contenedores:
intelligence: {
activate: true,
sizes: {
images: ['20px', '20px'],
documents: ['50px', '50px'],
videos: ['100px', '100px'],
audios: ['200px', '20px'],
}
}IDEE.utils.getImageMap(map, type, canva, isPromise);Parámetros:
- map: Mapa.
- type: Formato de la imagen, por defecto "image/jpeg".
- canva: Si no está, por defecto cogerá el del mapa, no se usa si isPromise está puesto a true.
- isPromise: Por defecto es false, si es true la función devolverá promesa.
Ejemplo:
IDEE.utils.getImageMap(map);
IDEE.utils.getImageMap(map, undefined, undefined, true);A continuación se describen todas las funciones de utilidades disponibles en API-IDEE. El formato de uso es IDEE.utils.
| Nombre de la Utilidad | Descripción | Ejemplo de Uso |
|---|---|---|
| getFeaturesExtent | Obtiene las extensiones de los objetos geográficos especificados. Parámetro 1: Array de objetos geográficos. Parámetro 2: Código de proyección. |
IDEE.utils.getFeaturesExtent([features], 'EPSG:4326') |
| isUndefined | Verifica si un valor es indefinido. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isUndefined(variable) |
| isBoolean | Verifica si un valor es de tipo boolean. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isBoolean(true) |
| isNull | Verifica si un valor es nulo. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isNull(null) |
| isArray | Verifica si un valor es un array. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isArray([1, 2, 3]) |
| isNullOrEmpty | Verifica si un valor es nulo o está vacío. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isNullOrEmpty('') |
| isFunction | Verifica si un valor es una función. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isFunction(() => {}) |
| isObject | Verifica si un valor es un objeto. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isObject({}) |
| isString | Verifica si un valor es una cadena. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isString('texto') |
| isUrl | Verifica si un valor es una URL válida. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isUrl('https://example.com') |
| isNumber | Verifica si un valor es un número. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isNumber(123) |
| isPositiveNumber | Verifica si un valor es un número positivo. Parámetro 1: Valor que se quiere comprobar. |
IDEE.utils.isPositiveNumber(5) |
| normalize | Normaliza un texto. Si en el segundo parámetro se le pasa true devuelve el texto en mayúsculas y false lo devuelve en minúsculas. Parámetro 1: Valor que se quiere normalizar. Parámetro 2: Indicador de si se quiere pasar a mayusculas o minusculas. |
IDEE.utils.normalize(' Texto ', true) |
| getParameterValue | Obtiene el valor de un parámetro de una URL. Parámetro 1: Nombre del parámetro a devolver. Parámetro 2: URL. |
IDEE.utils.getParameterValue('id', 'https://example.com?id=123') |
| addParameters | Añade parámetros a una URL. Parámetro1 : URL. Parámetro 2: Parámetros a añadir en formato objeto. |
IDEE.utils.addParameters('https://example.com', {id: 123, name: 'test'}) |
| generateRandom | Genera un valor aleatorio con prefijo y sufijo opcionales. Parámetro 1: Prefijo. Parámetro 2: Sufijo. |
IDEE.utils.generateRandom('prefix_', '_suffix') |
| getWMSGetCapabilitiesUrl | Genera URL para obtener metadatos de capa WMS. Parámetro 1: URL. Parámetro 2: Versión del servicio. Parámetro 3: Ticket. |
IDEE.utils.getWMSGetCapabilitiesUrl('https://example.com/wms', '1.3.0', 'ticket123') |
| getWMTSGetCapabilitiesUrl | Genera URL para obtener metadatos de capa WMTS. Parámetro1: URL. Parámetro 2: Versión del servicio. |
IDEE.utils.getWMTSGetCapabilitiesUrl('https://example.com/wmts', '1.0.0') |
| fillResolutions | Genera una resolución máxima y mínima. Parámetro 1: Resolución mínima. Parámetro 2: Resolución máxima. Parámetro 3: Niveles de zoom. |
IDEE.utils.fillResolutions(0.1, 1000, 10) |
| getResolutionFromScale | Calcula la resolución de una escala. Parámetro 1: Escala. Parámetro 2: Unidades. |
IDEE.utils.getResolutionFromScale(1000, 'Meter') |
| generateResolutionsFromScales | Genera resoluciones desde escalas. Parámetro 1: Escala máxima. Parámetro 2: Escala mínima. Parámetro 3: Niveles de zoom. Parámetro 4: Unidades. |
IDEE.utils.generateResolutionsFromScales(1000, 100000, 10, 'Meter') |
| generateResolutionsFromExtent | Genera resoluciones desde una extensión. Parámetro 1: Extensión. Parámetro 2: Tamaño. Parámetro 3: Niveles de zoom. |
IDEE.utils.generateResolutionsFromExtent([0,0,100,100], [800,600], 10) |
| getScaleFromResolution | Calcula la escala partiendo de una resolución. Parámetro 1: Resolución. Parámetro 2: Unidades. Parámetro 3: Numero de decimales a redondear. |
IDEE.utils.getScaleFromResolution(0.1, 'Meter', 2) |
| stringToHtml | Transforma una cadena de texto a código HTML. Parámetro 1: Cadena de texto. |
IDEE.utils.stringToHtml(' Hola ') |
| htmlToString | Transforma código HTML a cadena de texto. Parámetro 1: Contenido HTML. |
IDEE.utils.htmlToString(htmlElement) |
| beautifyString | Formatea una cadena de texto (elimina espacios extras, elimina "_", cambia la primera letra de cada palabra a mayúsculas con algunas excepciones...). Parámetro 1: Texto para dar formato a la cadena. |
IDEE.utils.beautifyString('texto_sin_formato') |
| beautifyAttribute | Formatea los atributos. Parámetro 1: Valor:Atributo. |
IDEE.utils.beautifyAttribute('namespace:attribute') |
| beautifyAttributeName | Formatea el nombre de los atributos. Parámetro 1: Nombre del atributo. |
IDEE.utils.beautifyAttributeName('raw_attribute_name') |
| concatUrlPaths | Concatena rutas a una URL. Parámetro 1: Array con url más rutas a concatenar. |
IDEE.utils.concatUrlPaths(['https://example.com', 'api', 'v1']) |
| includes | Comprueba si un array contiene un elemento. Parámetro 1: Array. Parámetro 2: Elemento que se quiere buscar. Parámetro 3: Indice a partir del que se quiere buscar. |
IDEE.utils.includes([1,2,3], 2) |
| extend | Extiende los prototipos de un objeto. Parámetro 1: Objeto. Parámetro 2: Prototipo del objeto. Parámetro 3: Sobreescribir o no el prototipo. |
IDEE.utils.extend({nombre: 'Juan'}, {apellidos: 'Martín Fernández'}, false) |
| escapeXSS | Reemplaza caracteres de tipo XSS. Parámetro 1: Valor XSS. |
IDEE.utils.escapeXSS('<script>alert("xss")</script>') |
| escapeJSCode | Elimina código de JavaScript. Parámetro 1: Código de JavaScript. |
IDEE.utils.escapeJSCode('eval(maliciousCode)') |
| enableTouchScroll | Permite el desplazamiento con modo táctil. Parámetro 1: Elemento HTML. |
IDEE.utils.enableTouchScroll(element) |
| rgbToHex | Transforma color RGB a hexadecimal. Parámetro 1: Color RGB. |
IDEE.utils.rgbToHex('rgb(255,0,0)') |
| rgbaToHex | Transforma color RGBA a hexadecimal. Parámetro 1: Color RGBA. |
IDEE.utils.rgbaToHex('rgba(255,0,0,0.5)') |
| getOpacityFromRgba | Obtiene la opacidad de un color RGBA. Parámetro 1: Color RGBA. |
IDEE.utils.getOpacityFromRgba('rgba(255,0,0,0.5)') |
| sameUrl | Comprueba si dos URLs son iguales. Parámetro 1: URL. Parámetro 2: URL2. |
IDEE.utils.sameUrl('https://example.com/', 'https://example.com') |
| isGeometryType | Verifica si existe el tipo de geometría. Parámetro 1: Tipo de geometría. |
IDEE.utils.isGeometryType('Point') |
| decodeHtml | Decodifica HTML y devuelve su contenido. Parámetro 1: Texto codificado con entidades HTML. |
IDEE.utils.decodeHtml('<div>Hola</div>') |
| getTextFromHtml | Obtiene el contenido de texto de HTML. Parámetro 1: Cadena o elemento con etiquetas HTML. |
IDEE.utils.getTextFromHtml(' Hola mundo
') |
| inverseColor | Obtiene el color inverso. Parámetro 1: Color. |
IDEE.utils.inverseColor('#FF0000') |
| getRgba | Obtiene color RGBA. Parámetro 1: Color. Parámetro 2: Opacidad. |
IDEE.utils.getRgba('#FF0000', 0.5) |
| setEquals | Compara si dos arrays contienen los mismos elementos independientemente del orden. Parámetro 1: Array. Parámetro 2: Array. |
IDEE.utils.setEquals([1,2,3], [3,1,2]) |
| extendsObj | Extiende un objeto. Parámetro 1: Objeto para extender. Parámetro 2: objeto con atributos a extender. |
IDEE.utils.extendsObj({a: 1}, {b: 2}) |
| generateIntervals | Genera valores intermedios de una matriz. Parámetro 1: Matriz. Parámetro 2: Numero de elementos. |
IDEE.utils.generateIntervals([0, 100], 5) |
| styleComparator | Compara la propiedad order de los estilos. Parámetro 1: Estilo. Parámetro 2: Estilo. |
IDEE.utils.styleComparator(style1, style2) |
| getImageSize | Obtiene una imagen para comparar su tamaño. Parámetro 1: URL de la imagen. |
IDEE.utils.getImageSize('https://example.com/image.jpg') |
| stringifyFunctions | Convierte funciones a cadenas. Parámetro 1: Función. |
IDEE.utils.stringifyFunctions( () => {}) |
| defineFunctionFromString | Crea funciones desde cadenas. Parámetro 1: Cadena con la función. |
IDEE.utils.defineFunctionFromString('{{f}}function() { return 1; }') |
| removeHTML | Elimina elemento HTML del padre. Parámetro 1: Elemento html a eliminar. |
IDEE.utils.removeHTML(element) |
| classToggle | Añade o elimina clase de elemento HTML. Parámetro 1: Elemento html para añadir/eliminar la clase. Parámetro 2: Clase a añadir/eliminar. |
IDEE.utils.classToggle(element, 'active') |
| replaceNode | Reemplaza un nodo HTML por otro. Parámetro 1: Nuevo nodo HTML. Parámetro 2: Antiguo nodo HTML. |
IDEE.utils.replaceNode(newNode, oldNode) |
| isDynamic | Verifica si un objeto contiene funciones. Parámetro 1: Objeto con los valores. Parámetro 2: Nombres de atributos omitir. |
IDEE.utils.isDynamic(( new IDEE.style.Generic({ point: { radius: 10, fill: { color: () => { return 'red' } } } })).getOptions()) |
| setDynamicLegend | Establece la leyenda dinámica. Parámetro 1: URL. |
IDEE.utils.setDynamicLegend('https://example.com/legend.png') |
| drawDynamicStyle | Devuelve la leyenda dinámica establecida. | IDEE.utils.drawDynamicStyle() |
| getEnvolvedExtent | Calcula extensión envolvente. Parámetro 1: Array de arrays de extensiones. |
IDEE.utils.getEnvolvedExtent(0,0,10,10], [5,5,15,15) |
| bytesToBase64 | Transforma bytes a Base64. Parámetro 1: Matriz con "bytes". Parámetro 2: Formato de salida. |
IDEE.utils.bytesToBase64([72, 111, 108, 97], 'text/plain') |
| getUint8ArrayFromData | Transforma datos a Uint8Array. Parámetro 1: Datos que se quieren transformar. |
IDEE.utils.getUint8ArrayFromData(file) |
| readJSON | Lee un archivo JSON. Parámetro 1: Archivo JSON. |
IDEE.utils.readJSON(file) |
| generateColorScale | Genera escala de colores en formato hexadecimal. Parámetro 1: Colores. Parámetro 2: Número de colores. |
IDEE.utils.generateColorScale(['red', 'blue'], 5) |
| modifySVG | Modifica archivo SVG de colores. Parámetro 1: URL. Parámetro 2: Opciones. |
IDEE.utils.modifySVG('https://example.com/icon.svg', {icon: {fill: {color: 'red'}}}) |
| dragElement | Proporciona movimiento a contenedor HTML. Parámetro 1: Identificador del elemento que se quiere mover. Parámetro 2 Identificador del botón. |
IDEE.utils.dragElement('elementId', 'buttonId') |
| encodeBase64 | Codifica objeto JSON en base64. Parámetro 1: JSON. |
IDEE.utils.encodeBase64({data: 'value'}) |
| decodeBase64 | Decodifica base64 a objeto JSON. Parámetro 1: base64. |
IDEE.utils.decodeBase64('eyJkYXRhIjoidmFsdWUifQ==') |
| draggabillyPlugin | Proporciona movimiento a plugin. Parámetro 1: Panel del "plugin". Parámetro 2: Elemento o selector en el que comienza la interacción del arrastre. |
IDEE.utils.draggabillyPlugin(panel, '.handle') |
| draggabillyElement | Proporciona movimiento a elemento. Parámetro 1: Selector del elemento a mover. Parámetro 2: Selemento del elemento iniciador del movimiento. Parámetro 3: Selector del elemento contenedor. |
IDEE.utils.draggabillyElement('#element', '.handle', '.container') |
| returnPositionHtmlElement | Obtiene coordenadas de elemento HTML en mapa. Parámetro 1: Clase del elemento HTML. Parámetro 2: Elemento Mapa donde buscar el element. |
IDEE.utils.returnPositionHtmlElement('elementClass', map) |
| joinCanvas | Fusiona todos los canvas del mapa. Parámetro 1: Objeto mapa. Parámetro 2: Formato de imagen resultante. |
IDEE.utils.joinCanvas(map, 'image/jpeg') |
| getImageMap | Obtiene captura de pantalla del mapa. Parámetro 1: Mapa del que se obtiene el canvas. Parámetro 2: Formato de la imagen resultante. Parámetro 3: Elemento canvas. Parámetro 4: Si tiene que devolver una promesa. |
IDEE.utils.getImageMap(map, 'image/jpeg') |
| copyImageClipBoard | Copia imagen al portapapeles. Parámetro 1: Mapa del que se obtiene el canvas. Parámetro 2: Elemento canvas. |
IDEE.utils.copyImageClipBoard(map, canvas) |
| findUrls | Detecta los enlaces en un texto. Parámetro 1: Texto donde se detectará los enlaces. |
IDEE.utils.findUrls('Visita https://example.com para más info') |
| transfomContent | Transforma enlaces a etiquetas HTML. Parámetro 1: Texto para realizar la transformación. Parámetro 2: Objeto con los tamaños definidos para cada tipo de contenido. |
IDEE.utils.transfomContent('Texto con https://example.com/image.jpg', { images: ['20px', '20px']}) |
| ObjectToArrayExtent | Ordena bbox según sistema de referencia. Parámetro 1: Bbox. Parámetro 2: EPSG del bbox. |
IDEE.utils.ObjectToArrayExtent({x: {min: 0, max: 10}, y: {min: 0, max: 10}}, 'EPSG:4326') |
| getSystem | Detecta sistema operativo móvil | IDEE.utils.getSystem() |
| getWMTSCapabilities | Obtiene capacidades de servicio WMTS. Parámetro 1: URL del servicio WMTS. |
IDEE.utils.getWMTSCapabilities('https://example.com/wmts?service=WMTS&request=GetCapabilities') |
| reproject | Reprojecta coordenadas entre sistemas. Parámetro 1: Coordenadas a reproyectar. Parámetro 2: EPSG del sistema de referencia de origen. Parámetro 3: EPSG del sistema de referencia de destino. |
IDEE.utils.reproject([-3.7, 40.4], 'EPSG:4326', 'EPSG:3857') |
| parseCRSWKTtoJSON | Convierte WKT CRS a JSON. Parámetro 1: Cadena WKT que representa un sistema de referencia de coordenadas. |
IDEE.utils.parseCRSWKTtoJSON('GEOGCS["WGS 84",DATUM["WGS_1984",...]]') |
| filterList | Filtra lista HTLM en base a el valor de un imput. Parámetro 1: ID del input que contiene el filtro. Parámetro 2: ID de la lista que se va a filtrar. |
IDEE.utils.filterList('searchInput', 'itemList') |
1.INICIO
1.1. Componentes de la API-IDEE
1.2. Documentación y Puntos de acceso
1.3. Primeros pasos
1.4. Diagrama API IDEE
2.1. Capas
■ 2.1.1. Fuentes
• 2.1.1.1. Capas vectoriales
+ Vector
+ WFS
+ GeoJSON
+ KML
+ MVT
+ OGCAPIFeatures
+ MBTilesVector
+ GenericVector
+ MapLibre
• 2.1.1.2. Capas ráster
+ WMS
+ WMC
+ WMTS
+ TMS
+ XYZ
+ OSM
+ MBTiles
+ GenericRaster
+ GeoTIFF
+ GeoPackageTile
• 2.1.1.3. Capas 3D
+ Terreno
+ 3DTiles
+ info 3DTiles
• 2.1.1.4. Capas rápidas
• 2.1.1.5. Grupo de capas
• 2.1.1.6. Secciones
• 2.1.1.7. GeoPackage
• 2.1.1.8. Capas externas
■ 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.4. Paneles
» Creación de panel desde cero sin controles
» Tutorial Panel de un único control
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
5.6. Parametrización API-REST plugins externos
6. PARAMETRIZACIÓN VISUALIZADORES
9. GUÍA DE DESARROLLO
> Guía para colaborar en el repositorio
> Guía para el desarrollo de API-IDEE
> Guía de test de API-IDEE
» Tutorial desarrollo del núcleo de API-IDEE - (Cliente)
> Guía de desarrollo de componentes
» Tutorial desarrollo del núcleo de API-IDEE - (Servidor)
> Guía de desarrollo de plugins
» Tutorial desarrollo de plugins ya creados
» Tutorial desarrollo de nuevos plugins
> Guía de desarrollo de visualizadores con React