Cluster + Composite

Añadimos un estilo clusterizado a una capa y realizar una composicion junto a otro estilo , en este caso proporcional.

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea-hcsigc/assets/css/mapea-5.1.0.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea-hcsigc/js/mapea-5.1.0.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea-hcsigc/js/configuration-5.1.0.js"></script>
<div id="map"></div>

CSS

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

JavaScript

const mapjs = new M.map({
  container: 'map',
  controls: ['layerswitcher'],
  layers: 'OSM',
});

const wfs = new M.layer.WFS({
  name: 'nucleo_de_poblacion_2e3ac742_e5c4_4c18_88e3_3d4a28fd5ca2',
  url: 'http://herramienta-centralizada-sigc.desarrollo.guadaltel.es/geoserver/Global/ows?',
  legend: 'capa wfs',
});
mapjs.addWFS(wfs);

const styleProp = new M.style.Proportional(
  'poblacion', 5, 20,
  new M.style.Point({ // estilo del punto
    fill: {
      color: 'yellow',
    },
    stroke: {
      color: 'white',
      width: 2,
    },
  }),
);

const valueField = 'poblacion';
const choropleth = new M.style.Choropleth(valueField);

const stylecluster = new M.style.Cluster();

// styleProp.add(stylecluster);

stylecluster.add(styleProp);

// choropleth.add(stylecluster);

wfs.setStyle(stylecluster);


wfs.on(M.evt.LOAD, () => {
  mapjs.setBbox(wfs.getFeaturesExtent());
});