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

WFS (Web Feature Service) es un estándar OGC para la descarga y transferencia de información geográfica, donde los elementos geográficos o features se transmiten en su totalidad al cliente.

Para visualizar la fuente de datos WFS en la API, se pueden:

1.- Añadir en el constructor del mapa, tanto en modo cadena como objeto:

// Ejemplo de capas WFS en modo cadena 
const mapajs = IDEE.map({
  container: "map",
  center: { x: -965497.2717184591, y: 4166095.580546307 },
  zoom: 5,
  controls: ['backgroundlayers'],
  layers: ["WFST*Campamentos*http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows?*sepim:campamentos*MPOINT"]
});

2.- O añadiéndolas con el método correspondiente:

//modo objeto
const layer = new IDEE.layer.WFS({
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?",
  namespace: "tematicos",
  name: "Provincias",
  legend: "Provincias",
  geometry: 'MPOLYGON',
  ids:"3,4"
});
mapajs.addWFS(layer);

//modo cadena
mapajs.addWFS('WFST*Campamentos*http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows?*sepim:campamentos*MPOINT');

Donde:

  • url: url del servicio WFS.
  • namespace: workspace asociado a la capa.
  • name: nombre de la capa en el servidor.
  • 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.
    • No disponible para la implementación de CesiumJS.
  • geometry: Tipo de geometría: POINT, MPOINT, LINE, MLINE, POLYGON o MPOLYGON.
  • ids: Opcional - identificadores por los que queremos filtrar los features.
  • cql: Opcional - Sentencia CQL para filtrar los features. El método setCQL(cadena_cql) refresca la capa aplicando el nuevo predicado CQL que reciba.
  • 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.
  • maxExtent: Restringe la visibilidad de la capa a una extensión.
    • No disponible para la implementación de CesiumJS.
  • version: Opcional - Versión del estandar a usar. Por defecto es 1.0.0.
  • 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 WFS 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 WFS 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: Estas opciones se mandarán a la implementación de la capa.
    • 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.
    • getFeatureOutputFormat: Formato de los objetos geográficos, por defecto 'application/json'.
      • Para la implementación de CesiumJS, sólo se permite formato JSON/GeoJSON.
    • describeFeatureTypeOutputFormat: Describe el formato de salida de los objetos geográficos.
      • Para la implementación de CesiumJS, sólo se permite formato JSON/GeoJSON.
    • vendor: Proveedor.
    • 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.
    • visibility: Define si la capa es visible o no. Verdadero por defecto.
    • 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.
  • vendorOpts: 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.WFS(
  {},
  {
    minZoom:. 5,
  },
  {
    source: new ol.source.Vector({
      url: 'https://geostematicos-sigc.juntadeandalucia.es/geoserver/wfs?service=WFS&version=1.0.0&request=GetFeature&typename=tematicos:comarcas&outputFormat=application%2Fjson&srsname=EPSG%3A3857',
      format: new ol.format.GeoJSON(),
    }),
  },
);

Ejemplo completo de creación de capa WFS:

const layer = new IDEE.layer.WFS({
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?", 
  namespace: "tematicos",
  name: "Provincias",
  legend: "Provincias",
  geometry: 'MPOLYGON',
  ids: "3,4"
}, {
  // aplica un estilo a la capa
 style: new IDEE.style.Generic({polygon: {
    fill: {
      color: 'red'
    }
  }}),
  visibility: false // capa no visible en el mapa
}, {
  opacity: 0.5 // aplica opacidad a la capa
});

Formato de salida
La API pide las capas WFS al servidor OGC en formato geojson usando por defecto como outputFormat 'application/json'. Sin embargo, en función del tipo de servidor OGC que esté atendiendo las peticiones (Geoserver, Mapserver, etc.), puede que tenga asignando un nombre diferente. En ese caso, se puede establecer el valor del outputFormat para las peticiones getFeature y describeFeature, usando las opciones de usuario 'getFeatureOutputFormat' y 'describeFeatureTypeOutputFormat':

lAguasSupRediam = new IDEE.layer.WFS({
  url: 'http://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_WFS_RN_Aguas?bbox=508887.12101065,4131323.42844933,509462.159552335,4131744.12235486',
  legend: 'Cursos de Agua Rediam',
  name: 'a_red_hidrografica',
  geometry: 'MLINE'
}, {
  getFeatureOutputFormat: 'geojson',
  describeFeatureTypeOutputFormat: 'geojson'
});

Parámetros vendor
Algunos servidores de mapas son capaces de procesar en las peticiones OGC parámetros adicionales propios, conocidos como vendor parameters. En las capas WFS podemos especificar cualquier parámetro de este tipo si lo incluimos dentro de la estructura correspondiente en el segundo parámetro del constructor: 'vendor -> request OGC asociado -> parametro:valor', por ejemplo:

const lAguasSupRediam = new IDEE.layer.WFS({
  url: 'http://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_WFS_RN_Aguas?bbox=508887.12101065,4131323.42844933,509462.159552335,4131744.12235486',
  legend: 'Cursos de Agua Rediam',
  name: 'a_red_hidrografica',
  geometry: 'MLINE'
 },{
  vendor:{
    getFeature: {
       'parametro1': 'valor1',
       'parametro2': 'valor2'
    }
 }
});

El ejemplo anterior crearía peticiones getFeatures que incluirían los parámetros vendor especificados:

http://...?request=getFeature&....&parametro1=valor1&parametro2=valor2

Ejemplo completo de vendor:

        const provincia = new IDEE.layer.WFS({
            url: "https://sig.asturias.es/servicios/services/UnidadesAdministrativas/MapServer/WFSServer",
            namespace: "UnidadesAdministrativas",
            name: "Asturias",
            legend: "Provincia",
            geometry: 'POLYGON',
            version:'2.0.0'
        }, {
            vendor: {
                getFeature: {
                    'outputFormat': 'GEOJSON' // añadirá a la petición getFeature el parámetro outputFormat con valor GEOJSON
                }
            }
        });

Ejemplos funcionales

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