Skip to content
isdefeG edited this page Jul 1, 2026 · 7 revisions

La API-IDEE permite visualizar la capa de Open Street Map, para esto se tiene que pasar "OSM" como valor del parámetro "layers". Al hacerlo, se añadirá automáticamente al mapa un mensaje de atribución, tal como requiere legalmente su uso:

const map = IDEE.map({
  container: 'mapjs',
  layers: ['OSM'],
});

Aunque se reproyecta automáticamente a cualquier otra proyección, se recomienda usar el sistema de referencia espacial EPSG:3857, usado por OSM.

Ejemplo cargando OSM:

// Se carga la capa en la creación del mapa.
const map = IDEE.map({
  container: 'mapjs',
  layers: ['OSM'],
  projection: "EPSG:3857*m"
});

Ejemplo cargando capa OSM como objeto:

const layer = new IDEE.layer.OSM({
    name: 'OSM',
    legend: 'OSM',
    isBase: false,
    url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
});
 
mapjs.addLayers(layer);

Donde:

  • name: Nombre de la capa en la leyenda.
  • legend: Indica el nombre que queremos que aparezca en el árbol de contenidos, si lo hay.
  • isBase: 'true' si se quiere definir la capa como capa base, 'false' en caso contrario.
  • type: Tipo de la capa.
  • url: Url genera la OSM.
  • minZoom: Zoom mínimo aplicable a la capa.
  • maxZoom: Zoom máximo aplicable a la capa.
  • maxExtent: La medida en que restringe la visualización a una región específica.
  • attribution: Atribución de la capa.
    • name. Nombre de la atribución
    • description. Descripción de la atribución.
    • url. URL de la atribución.
    • contentAttributions. Atribuciones por objetos geográficos, por defecto vacío.
    • contentType. Tipo de url de “contentAttributions” (KML o GeoJSON).
    • visibility: Define si la capa es visible o no.
    • displayInLayerSwitcher: Define si la capa se mostrará en el selector de capas.
    • opacity: Opacidad de capa, por defecto 1.
  • options: Estas opciones se mandarán a la implementación de la capa.
    • animated: Activa la animación para capas base o parámetros animados.
    • minScale: Escala mínima.
    • maxScale: Escala máxima.
  • vendorOptions: Opciones para la biblioteca base (el código se envía directamente a la librería base para ejecutar la funcionalidad).
    Ejemplo vendorOptions:
new IDEE.layer.OSM({}, {}, {
  source: new ol.source.OSM({
    url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
  }),
});

Ejemplo completo de creación de capa OSM:

const layer = new IDEE.layer.OSM({
   name: 'OSM',
   legend: 'OSM',
   isBase: false,
   url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
   displayInLayerSwitcher: false, // no muestra la capa en el TOC
},{
   animated: true // activa animación
},{
   opacity:0.5 // aplica opacidad a la capa
   tileLoadFunction: (imageTile, src) => {
      imageTile.getImage().src = src;
   }
});

Ejemplos:

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. MAPA
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.1.3. Filtros

2.3.-Plugins

  > Creación de plugin en cliente

  » Tutorial de creación de un plugin

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
 5.6. Parametrización API-REST plugins externos

6. PARAMETRIZACIÓN VISUALIZADORES

7. SOLUCIÓN DE PROBLEMAS

8. PROCESO DE VERSIONADO

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

  > Compilación proyecto API-IDEE

Clone this wiki locally