[Cluster] - Remove y Add Features

Mapea

by SIGC GUADALTEL

HTML

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

  </div>
  <div>
    <span>Número de features</span>
    <input type="number" id="numAddFeatures">
    <button onclick="addFeatures()">
  Add Features
  </button>
  </div>

  
  <button onclick="remove()">
  Remove Features
  </button>
  <button onclick="layer.clear()">
  Clear
  </button>
  <button onclick="layer.setStyle(new M.style.Cluster())">
  Set cluster
  </button>
</div>

CSS

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

JavaScript

// Definimos el mapa
let mapajs = M.map({
  container: "map",
  controls: ['mouse', 'layerswitcher', 'panzoombar'],
  projection: 'EPSG:4326*d',
  center: [-0, 20],
  zoom: 3
})






let layer = new M.layer.GeoJSON({
  crs: 4326,
  name: "uruguay",
});
mapajs.addLayers(layer);

const generateCoordinate = function(options) {
  let coordinateX = options.xCoord - Math.random() * options.xError;
  let coordinateY = options.yCoord - Math.random() * options.yError;
  return [coordinateX, coordinateY];
};

const generateFeature = function(options) {
  let feature = {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": generateCoordinate(options)
    },
    "properties": {}
  };
  return feature;
}

const addFeatures = () => {
  let inputNumAddFeatures = document.querySelector("#numAddFeatures");
  let numAddFeatures = parseInt(inputNumAddFeatures.value);
  numAddFeatures = isNaN(numAddFeatures) ? 500 : numAddFeatures;

  let features2 = []
  for (let i = 0; i < numAddFeatures; i++) {
    let source = (generateFeature({
      xCoord: 0,
      yCoord: 43,
      xError: 7.3,
      yError: 7.3
    }));
    features2.push(new M.Feature(`${layer.getFeatures().length + i}`, source));
  }
  layer.addFeatures(features2);
}

const remove = ()=> {
	layer.removeFeatures(layer.getFeatures(true));
}