2.5. Eventos - Desarrollos-IDEE/API-IDEE GitHub Wiki

const capa = new IDEE.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});

capa.on(IDEE.evt.ADDED_TO_MAP, (facade) => {
  console.log(facade);
});

mapjs.addLayers([capa]);

capa.on(IDEE.evt.ADDED_TO_MAP, () => {
  mapajs.getMapImpl().on('rendercomplete', () =>  {
      mapajs.setBbox(capa.getMaxExtent())
  });
});

mapajs.addLayers(capa);

const toc = new IDEE.plugin.TOC({
  postition: 'TL',
  collapsible: true,
  collapsed: true,
});
mapjs.addPlugin(toc);
toc.control.on(IDEE.evt.ADDED_TO_PANEL, (control) => {
    IDEE.dialog.info(control.name)
});

const capa = new IDEE.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});
mapjs.on(IDEE.evt.ADDED_LAYER, (capas) => {
  IDEE.dialog.info(capas[0].name);
});
mapjs.addLayers([capa]);

const capa = new IDEE.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});
mapjs.on(IDEE.evt.ADDED_WMS, (capas) => {
  IDEE.dialog.info(capas[0].name);
});
mapjs.addLayers([capa]);

const capa = new IDEE.layer.WMS({
  url: 'http://www.ign.es/wms-inspire/unidades-administrativas?',
  name: 'AU.AdministrativeBoundary',
  legend: 'Límite administrativo',
});
mapjs.on(IDEE.evt.REMOVED_LAYER, (capas) => {
  IDEE.dialog.info(capas[0].name);
});
mapjs.addLayers([capa]);
mapjs.removeLayers([capa]);

const mvt = new IDEE.layer.MVT('MVT*https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf*vectortile');
mapjs.addLayers([mvt]);
mvt.on(IDEE.evt.REMOVED_FROM_MAP, (capas) => {
  IDEE.dialog.info(capas[0].name);
});
mapjs.removeLayers([mvt]);

const measurebar = new IDEE.plugin.MeasureBar({
  postition: 'TL',
  collapsible: true,
  collapsed: true,
});
mapjs.addPlugin(measurebar);
measurebar.controls_[0].on(IDEE.evt.ACTIVATED, () => {
  IDEE.dialog.info('Activado')  
})

const measurebar = new IDEE.plugin.MeasureBar({
  postition: 'TL',
  collapsible: true,
  collapsed: true,
});
mapjs.addPlugin(measurebar);
measurebar.panel_.on(IDEE.evt.SHOW, () => {
    IDEE.dialog.info('Panel abierto');
});
measurebar.panel_.on(IDEE.evt.HIDE, () => {
    IDEE.dialog.info('Panel cerrado');
})

const featureTabOpts = {
  'icon': 'g-cartografia-pin',
  'title': 'Título',
  'content': 'Información'
};
popup = new IDEE.Popup();
popup.addTab(featureTabOpts);
mapjs.addPopup(popup, [240829,4143088]);
popup.on(IDEE.evt.DESTROY, () => {
  IDEE.dialog.info('Popup eliminado');  
})
popup.destroy();

const capaKML = new IDEE.layer.KML("KML*Arboleda*http://mapea4-sigc.juntadeandalucia.es/files/kml/*arbda_sing_se.kml*true");
capaKML.on(IDEE.evt.SELECT_FEATURES, (features) => { 
  console.log("Se han seleccionado los objetos geográficos: ", features); 
});

capaWFS.on(IDEE.evt.LOAD, (features) => {
  console.log("se ha cargado la capa WFS en el mapa con los objetos geográficos:", features);
});

mapjs.on(IDEE.evt.COMPLETED, () => {
    IDEE.dialog.info('Mapa Cargado');
});

const estilo = new IDEE.style.Point({
  radius: 5,
  fill: {  
    color: 'red',
  },
});
estilo.on(IDEE.evt.CHANGE, () => {
  IDEE.dialog.info('Las propiedades del estilo han cambiado');
});
estilo.set('fill.color', 'blue')

mapjs.on(IDEE.evt.CHANGE_PROJ, () => {
  IDEE.dialog.info('La proyección ha cambiado');
});
mapjs.setProjection('EPSG:4326*d');

capa.on(IDEE.evt.CHANGE_STYLE, () => {
  IDEE.dialog.info('Nuevo estilo aplicado');
});
capa.setStyle(nuevoEstilo);

mapjs.on(IDEE.evt.CHANGE_ZOOM, (m) => {
  IDEE.dialog.info(`Zoom actual: ${m.getZoom()}`);
});
mapjs.setZoom(9);

mapjs.on(IDEE.evt.CLICK, (m) => {
  IDEE.dialog.info('Se ha pulsado en el mapa');
})

mapjs.on(IDEE.evt.MOVE, (m) => {
  console.log('Mapa en movimiento');
})

mapjs.on(IDEE.evt.MOVE_MOUSE, (m) => {
  console.log('Ratón en movimiento');
});

mapjs.on(IDEE.evt.POPUP_ADDED, () => {
  console.log('Se ha añadido un popup.');
});
const popup = new IDEE.Popup();
popup.on(IDEE.evt.POPUP_ADDED, () => {
  console.log('Se ha añadido un popup.');
});

// Array de objetos geográficos a seleccionar, capa que los contiene y evt opcional
mapajs.getFeatureHandler().selectFeatures([feature],layer,{});
// Array de objetos geográficos a deseleccionar, capa que los contiene y evt opcional
mapajs.getFeatureHandler().unselectFeatures([feature],layer,{});
// Eliminar una capa del gestor implica no poder usar los metodos
// anteriores sobre sus objetos geográficos
mapajs.getFeatureHandler().removeLayer(layer);

// Creamos capa GeoJSON
const geojson = new IDEE.layer.GeoJSON({
  name: "Provincias GeoJSON",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json"
});

let selectedFeature;

// Añadimos evento SELECT_FEATURE a la capa 
geojson.on(IDEE.evt.SELECT_FEATURES, function(features,evt) {
  console.log('click en el feature' + features[0].getId()); // mostrará el ID del objeto espacial
  console.log('Coordenadas: ' + evt.coord); // y las coordenadas
})

// Añadimos la capa al mapa
mapajs.addLayers([geojson]);

// creamos una función que será llamada desde un botón HTML en la que se hará uso de 
// getFeatureHandler().selectFeatures para seleccionar un objeto espacial
// como evento le mandará unas coordenadas
window.seleccionar = (evt) => {
  selectedFeature = geojson.getFeatures()[0];
  mapajs.getFeatureHandler().selectFeatures([selectedFeature], geojson, {coord: [-253056, 4461347]});
};


// Botón HTML 
<button onclick="seleccionar();" class="floatbtn">
Seleccionar
</button>