2.1.1.8. Capas externas

Guía para Implementar Capas Externas en API-IDEE

Introducción

Las capas externas son extensiones que permiten a API-IDEE trabajar con formatos de capa no nativos.

API-IDEE proporciona un sistema de integración basado en funciones externas que permite que las capas personalizadas se comporten exactamente igual que las capas nativas. Esto significa que operaciones como map.getLayers() o map.removeLayers() incluirán automáticamente tus capas externas.

---

Sistema de Funciones Externas

API-IDEE usa tres arrays internos para gestionar capas externas:

IDEE.impl.Map.GET_EXTERNAL_LAYER_FUNCTIONS     // Para getLayers()
IDEE.impl.Map.REMOVE_EXTERNAL_LAYER_FUNCTIONS  // Para removeLayers()
IDEE.impl.Map.ADD_EXTERNAL_LAYER_FUNCTIONS     // Para addLayers()

Al registrar una función:

IDEE.impl.Map.registerExternalFunction('getMiCapa', 'getLayers');

API-IDEE la añade al array correspondiente. Cuando el usuario llama a map.getLayers(), se ejecutan todas las funciones registradas, incluyendo tus capas personalizadas.

---

Estructura de Directorios

src/
├── facade/js/
│   ├── index.js                 # Punto de entrada
│   ├── MiCapa.js                # Clase facade
│   └── prototype-extend/
│       ├── index.js             # Orquestador
│       ├── Map.js               # Métodos IDEE.Map
│       ├── LayerType.js         # Registro de tipos
│       └── eventtype.js         # Eventos
└── impl/ol/js/
    ├── MiCapa.js                # Implementación OL
    └── prototype-extend/
        ├── index.js
        └── Map.js               # Métodos IDEE.impl.Map + registerExternalFunction

---

Implementación Paso a Paso

1. Registrar Tipo de Capa

// src/facade/js/prototype-extend/LayerType.js
const extendLayerType = () => {
  IDEE.layer.type.MiCapa = 'MiCapa';
  IDEE.layer.type.MiOtraCapa = 'MiOtraCapa';
};
export default extendLayerType;

2. Crear Clase Facade

// src/facade/js/MiCapa.js
import MiCapaImpl from 'impl/MiCapa.js';

class MiCapa extends IDEE.Layer {
  constructor(userParameters, options = {}, vendorOptions = {}) {
    IDEE.layer.type.registerLayerType(IDEE.layer.type.MiCapa);
    const impl = new MiCapaImpl(userParameters, options, vendorOptions);
    super(userParameters, impl);
    this.name = userParameters.name;
    this.legend = userParameters.legend;
  }

  get type() { return IDEE.layer.type.MiCapa; }
}
export default MiCapa;

3. Crear Implementación OpenLayers

// src/impl/ol/js/MiCapa.js
class MiCapa extends IDEE.impl.Layer {
  constructor(userParameters, options = {}, vendorOptions = {}) {
    super(options, vendorOptions);
    this.userParameters_ = userParameters;
  }

  addTo(map) {
    this.map = map;
    this.ol3Layer = new ol.layer.Tile({ /* ... */ });
    this.map.getMapImpl().addLayer(this.ol3Layer);
  }

  destroy() {
    if (this.map && this.ol3Layer) {
      this.map.getMapImpl().removeLayer(this.ol3Layer);
    }
    this.ol3Layer = null;
  }
}
export default MiCapa;

4. Extender IDEE.Map (Facade)

// src/facade/js/prototype-extend/Map.js
const extendMap = () => {
  IDEE.Map.prototype.getMiCapa = function(filters) {
    return this.getImpl().getMiCapa(filters || []).sort(IDEE.Map.LAYER_SORT);
  };

  IDEE.Map.prototype.addMiCapa = function(layers) {
    if (!IDEE.utils.isNullOrEmpty(layers)) {
      const arr = IDEE.utils.isArray(layers) ? layers : [layers];
      arr.forEach(l => l.setMap(this));
      this.getImpl().addMiCapa(arr);
      this.fire(IDEE.evt.ADDED_LAYER, [arr]);
    }
    return this;
  };

  IDEE.Map.prototype.removeMiCapa = function(layers) {
    const found = this.getMiCapa(layers);
    if (found.length > 0) this.getImpl().removeMiCapa(found);
    return this;
  };
};
export default extendMap;

5. Extender IDEE.impl.Map + Registrar Funciones Externas

// src/impl/ol/js/prototype-extend/Map.js
const extendMap = () => {
  // Z-Index
  IDEE.impl.Map.Z_INDEX[IDEE.layer.type.MiCapa] = 2000;

  IDEE.impl.Map.prototype.getMiCapa = function(filters) {
    return this.layers_.filter(l => l.type === IDEE.layer.type.MiCapa);
  };

  IDEE.impl.Map.prototype.addMiCapa = function(layers) {
    layers.forEach(layer => {
      if (!IDEE.utils.includes(this.layers_, layer)) {
        layer.getImpl().addTo(this.facadeMap_);
        this.layers_.push(layer);
      }
    });
    return this;
  };

  IDEE.impl.Map.prototype.removeMiCapa = function(layers) {
    this.getMiCapa(layers).forEach(layer => {
      this.layers_ = this.layers_.filter(l => !l.equals(layer));
      layer.getImpl().destroy();
      layer.fire(IDEE.evt.REMOVED_FROM_MAP, [layer]);
    });
    return this;
  };

  // ⚠️ IMPORTANTE: Registrar funciones externas
  IDEE.impl.Map.registerExternalFunction('addMiCapa', 'addLayers');
  IDEE.impl.Map.registerExternalFunction('getMiCapa', 'getLayers');
  IDEE.impl.Map.registerExternalFunction('removeMiCapa', 'removeLayers');
};
export default extendMap;

6. Eventos Personalizados (Opcional)

// src/facade/js/prototype-extend/eventtype.js
const extendEventType = () => {
  IDEE.evt.ADDED_MICAPA = 'added:micapa';
};
export default extendEventType;

7. Orquestar Extensiones

// src/facade/js/prototype-extend/index.js
import 'configuration';
import extendImpl from 'impl/prototype-extend';
import extendMap from './Map.js';
import extendLayerType from './LayerType.js';
import extendEventType from './eventtype.js';

const extend = () => {
  extendMap();
  extendLayerType();
  extendEventType();
  extendImpl();
};
extend();

Ejemplo de Uso

// Crear capa MiCapa
const layer = new IDEE.layer.MiCapa({
  source: archivoMiCapa,  // File, Response o Uint8Array
  name: 'mapa-offline',
  transparent: false
});

map.addMiCapa(layer);

// Obtener capas
const capas = map.getMiCapa();

// Eliminar
map.removeMiCapa(layer);