Clic con capa clusterizada

Al clicar sobre una capa, para mostrar un popup por ejemplo, borra la feature del mapa sobre la que se ha clicado cuando hay capa clusterizada

by Francisco

HTML

<script src="http://sigc.desarrollo.guadaltel.es/mapea5/js/mapea-5.0.1.ol.min.js"></script>
<script src="http://sigc.desarrollo.guadaltel.es/mapea5/js/configuration-5.0.1.js"></script>
<link rel="stylesheet" href="http://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea-5.0.1.ol.min.css">
<button id="categoria" onclick="setStyleCat()">
  Categoría
</button>
<button id="cluster" onclick="setStyleCluster()">
  Cluster
</button>
<div id="map"></div>

CSS

html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
 }

JavaScript

var mapajs = M.map({
      'container': 'map',
      "controls": ["layerswitcher"]
    });

    var campamentos = new M.layer.WFS({
      name: "Campamentos",
      url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/wfs",
      namespace: "sepim",
      name: "campamentos",
      geometry: 'POINT',
      extract: true
    });
    mapajs.addLayers(campamentos);

    let reserva_st = new M.style.Polygon({
      fill: {
        color: 'rgb(223, 115, 255)'
      }
    });
    var reservas = new M.layer.WFS({
      name: "reservas_biosfera",
      namespace: "reservas_biosfera",
      legend: "Reservas biosferas",
      geometry: "POLYGON",
      url: "https://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_WFS_Patrimonio_Natural?",
      version: "1.1.0"
    }, {
      getFeatureOutputFormat: 'geojson',
      describeFeatureTypeOutputFormat: 'geojson'
    });
    reservas.setStyle(reserva_st);
    mapajs.addLayers(reservas);

    mapajs.getFeatureHandler().removeLayer(reservas);

    campamentos.on(M.evt.SELECT_FEATURES, function(features, evt) {
      if (features[0] instanceof M.ClusteredFeature) {
        console.log('Es un cluster:', features[0].getAttribute('features'));
      } else {
        console.log('NO es un cluster:', features);
      }
    });

    //Estilos para categorización
    let primera = new M.style.Point({
      icon: {
        src: 'https://image.flaticon.com/icons/svg/34/34697.svg',
        scale: 0.1
      },
    });
    let segunda = new M.style.Point({
      icon: {
        src: 'https://image.flaticon.com/icons/svg/34/34651.svg',
        scale: 0.1
      },
    });
    let tercera = new M.style.Point({
      icon: {
        src: 'https://image.flaticon.com/icons/svg/34/34654.svg',
        scale: 0.1
      },
    });
    let categoryStyle = new M.style.Category("categoria", {
      "Primera": primera,
      "Segunda": segunda,
      "Tercera": tercera
    });

    //Estilo para cluster
    let clusterOptions = {
     ...