[TEST] Cluster impresion relleno

by SIGC

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<div id="map">
</div>

CSS

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

JavaScript

M.config('PROXY_POST_URL', 'http://publicacion.i-administracion.junta-andalucia.es/mapea/proxyPost');

    let layerWFS = new M.layer.WFS({
      url: "http://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
      namespace: "callejero",
      name: "prueba_pol_wfst",
      legend: "Edicion",
      geometry: 'MPOLYGON'
    });

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

    var map = M.map({
      'container': 'map',
      "controls": ["layerswitcher"],
      wmcfiles: ['cdau'],
      layers: [layerWFS, centros]
    });


    centros.on(M.evt.LOAD, function() {
      console.log('aplicamos estilo inicial...');

      // estilo 2
      // Punto de tamaño 5 con relleno verde semitransparente y borde rojo
      var estilo2 = new M.style.Point({
        radius: 5,
        fill: {
          color: 'green',
          opacity: 0.5
        },
        stroke: {
          color: '#FF0000'
        }
      });

      // estilo 3
      var estilo3 = new M.style.Cluster({});

      // composite1
      var composite1 = estilo3.add([estilo2]);

      centros.setStyle(estilo3);
    });

    layerWFS.on(M.evt.LOAD, function() {
      console.log('LayerWFS cargada');
      let estilo5 = new M.style.Polygon({
        fill: {
          color: 'orange',
          opacity: 0.5,
        },
        stroke: {
          color: '#FF0000',
          width: 2
        }
      });

      layerWFS.setStyle(estilo5);
    });