[TEST] Cluster + Filtros centros

by SIGC GUADALTEL

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea/js/configuration.js"></script>
<button onclick="aplicaFiltro()">
  Aplicar filtro en memoria
</button>
<button onclick="limpiaFiltro()">
  LImpiar filtro en memoria
</button>
<button onclick="set(composite)">
  Aplicar Composite
</button>
<button onclick="set(composite2)">
  Aplicar Composite2
</button>
<button onclick="ayuntamientos.clearStyle()">
  Limpiar estilo
</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 ayuntamientos = new M.layer.WFS({
      name: "assda_sv10_ayuntamiento_point_indicadores",
      url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
      namespace: "mapea",
      name: "assda_sv10_ayuntamiento_point_indicadores",
      legend: "Prestaciones - Ámbito municipal",
      getfeatureinfo: "plain",
      geometry: 'POINT',
      extract: true,
    });

    mapajs.addLayers(ayuntamientos);


    let categoryStyle = new M.style.Category("nom_prov");


    //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: 500,
        style: new M.style.Point({
          stroke: {
            color: '#5789aa'
          },
          fill: {
            color: '#004c99',
          },
          radius: 40
        })
      }],
      animated: true,
      hoverInteraction: true,
      displayAmount: true,
      distance: 80,
      maxFeaturesToSelect: 7
    };
    let ClusterParameters = {
      distanceSelectFeatures: 25,
      convexHullStyle: {
        fill: {
          color: '#000000',
          opacity: 0.5
        },
        stroke: {
          color: '#000000',
          width: 1
        }
      }
    }


    let clusterStyle = new M.style.Cluster(ClusterOptions, ClusterParameters);

    function aplicaFiltro() {
      // eliminamos estilo
      // centros.setStyle(null);
      // creamos y asignamos el filtro
      let filter = M.filter.OR(
       ...