ASSDA PRUEBA - CLUSTER + FILTER

Mapea produccion

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea/js/configuration.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea/plugins/attributetable/attributetable.min.css">
<button id="categoria" onclick="setStyleCat()">
  Categoría
</button>
<button id="cluster" onclick="setStyleCluster()">
  Cluster
</button>
<button onclick="setCC()">
  Filtrado CQL
</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);


    function setCC() {
      campamentos.setCQL("provincia = 'CÓRDOBA'");
    }


    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 = {
      ranges: [{
        min: 2,
        max: 4,
        style: new M.style.Point({
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#99ccff',
          },
          radius: 20
        })
      }, {
        min: 5,
        max: 9,
        style: new M.style.Point({
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#3399ff',
          },
          radius: 30
        })
      }, {
        min: 10,
        max: 15,
        style: new M.style.Point({
       ...