Skip to content
Jesús Guillen Encinas edited this page Feb 26, 2026 · 2 revisions

KML (Keyhole IDEEarkup Language). KML es un lenguaje de marcado basado en XML para representar datos geográficos en tres dimensiones. Fue desarrollado para ser manejado con Google Earth (originalmente Keyhole antes de ser adquirido por Google) y su gramática contiene muchas similitudes con la de GML.

Las fuentes de datos KML pueden ser estáticas o dinámicas

  • estática: fichero servido a través de un servidor de aplicaciones
  • dinámica: servicio que genera el KML al vuelo

Hay varias formas de añadir capas KML en el API:

1.- En el constructor del mapa:

const mapajs = IDEE.map({
	  container:"map",
          controls: ['backgroundlayers'],
          projection: 'EPSG:3857*m',
          layers: ['KML*Delegaciones IGN*https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml*false']
});

2.- Mediante los métodos addKML/addLayers:

//modo objeto
const kml = new IDEE.layer.KML({
                url: 'https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml',
                name: "capaKML",
                extract: true
}); 
mapajs.addKML(kml);

//modo cadena
mapajs.addKML('KML*Delegaciones IGN*https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml*false');

Los parametros indicados corresponden a:

  • url: url del fichero o servicio -> https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml
  • layers: permite filtrar el fichero KML por nombre de carpetas (las distintas capas que tiene configurado el archivo)
  • name: nombre de la capa que aparecerá en el selector de capa
  • maxExtent: Restringe la visibilidad de la capa a una extensión.
    • No disponible para la implementación de CesiumJS.
  • legend: Nombre asociado en el árbol de contenidos, si usamos uno.
  • isBase: 'true' si se quiere definir la capa como capa base, 'false' en caso contrario.
    • No disponible para la implementación de CesiumJS.
  • visibility: Define si la capa es visible o no.
  • label: Etiquetado.
  • removeFolderChildren: opcional Oculta las carpetas descendientes de las carpetas filtradas, por defecto false.
  • infoEventType: Opcional Parametriza el método de activación del popup para obtener la información de una feature ('click' / 'hover'), por defecto 'click'.
  • extract: Opcional Activa la consulta por clic en el objeto geográfico, por defecto verdadero.
    • Las capas KML cuentan con métodos get y set para modificar el extract.
capa.extract = true; // activa consulta
capa.extract = false; // desactiva consulta
console.log(capa.extract); // muestra el estado de la propiedad
  • template: Opcional Plantilla que se mostrará al consultar un objeto geográfico.
    • Las capas KML cuentan con métodos get y set para modificar el template.
capa.template = `<div>My custom popup</div>`; // especifica la plantilla
console.log(capa.template); // muestra el estado de la propiedad
  • 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).
  • options: Parámetros que se pasarán a la implementación.

    • scaleLabel: Tamaño del etiquetado.
    • style: Define el estilo de la capa.
    • predefinedStyles: Estilos predefinidos para la capa, aparecen en el selector de capas "LayerSwitcher" para cambiar el estilo de la capa.
    • minZoom: Zoom mínimo aplicable a la capa.
      • No disponible para la implementación de CesiumJS.
    • maxZoom: Zoom máximo aplicable a la capa.
      • No disponible para la implementación de CesiumJS.
    • displayInLayerSwitcher. Indica si la capa se muestra en el selector de capas.
    • opacity. Opacidad de capa, por defecto 1.
    • minScale: Escala mínima.
    • maxScale: Escala máxima.
    • extractStyles. Extrae estilos del KML.
    • height: Define la altura del objeto geográfico. Puede ser un número o una propiedad.
    • Si se define la altura será constante para todos los puntos de los objetos geográficos de la fuente de datos.
    • Sólo disponible para geometrías poligonales.
    • Sólo disponible para la implementación de CesiumJS.
    • clampToGround: Define si el objeto geográfico se debe ajustar al suelo, por defecto falso.
    • Si se indica este parámetro el parámetro height se obviará.
    • Sólo disponible para la implementación de CesiumJS.
  • 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.KML({}, {
  minZoom: 5,
}, {
  source: new olsource.Vector({
    format: new ol.format.KML(),
    url: 'https://www.ign.es/resources/CaminoDeSantiago_PRE/rutas/04/04-Via%20de%20la%20Plata%20-%20Camino%20Moz%C3%A1rabe%20a%20Santiago.kml',
  }),
});

Ejemplo completo de creación de capa KML:

const delegaciones = new IDEE.layer.KML({
  url: 'https://www.ign.es/web/resources/delegaciones/DelegacionesIGN-APICNIG.kml',
  name: "capaKML",
}, {
  visibility: true, // muestra la capa visible,
  maxZoom: 10, // zoom máximo aplicable a la capa
}, {
  opacity: 0.5   // aplica un opacidad a la capa
});

Los métodos de mapa getKML(layer) y removeKML(layer) permiten gestionar las capas KML existentes.

Simbologia

Algunas indicaciones respecto a la simbología de los KML:

  • Si la capa es puntual y dispone de simbología que usa imágenes externas, en el mapa se mostrarán las imágenes con su tamaño real. Puede reducirse o ampliarse definiendo un 'scale' en su estilo asociado.
  • Cada elemento de la capa KML se etiqueta por defecto con el valor de su atributo 'name'. Se puede modificar el estilo del etiquetado mediante un 'LabelStyle'. Para eliminarlo por completo, basta con especificar un scale 0.

Ejemplo de estilo que reduce a la mitad el tamaño del icono, y elimina el etiquetado.

<Style id="estilo1">
 <IconStyle>
  <scale>0.5</scale>
  <Icon>
    <href>url_imagen.png</href>
  </Icon>
 </IconStyle>
 <LabelStyle>
   <scale>0</scale>
 </LabelStyle>
</Style>

Ejemplo funcional

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