[Test] Cluster printer

by Francisco

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea-5.0.0.ol.min.js"></script>
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration-5.0.0.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.0.0.ol.min.css">
<script src="https://mapea4-sigc.juntadeandalucia.es/plugins/printer/printer-2.0.0.ol.min.js"></script>
<link rel="stylesheet" href="https://mapea4-sigc.juntadeandalucia.es/plugins/printer/printer-2.0.0.min.css">

<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);


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



    let estiloPunto = new M.style.Point({
  radius: 5,
  /*label: {
    text: function(feature) {
      return feature.getAttribute('nombre')
    },
    font: '10px Comic Sans MS',
    color: '#0000EE',
    rotate: false,
    scale: 1,
    offset: [0, 10],
    stroke: {
      color: 'yellow',
      width: 1
      //linedash: [1, 20],
      //linedashoffset: 60,
      //linecap:...