[Test] Prueba deseleccion

by Francisco

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
<div id="map"></div>
<button onclick="seleccionar();" class="floatbtn">
Seleccionar
</button>
<button onclick="deseleccionar();" class="floatbtn2">
Deseleccionar
</button>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.floatbtn {
  position: absolute;
  z-index: 9999;
  top: 10px;
  left: 50px;
}

.floatbtn2 {
  position: absolute;
  z-index: 9999;
  top: 10px;
  left: 200px;
}

JavaScript

// En el constructor
let mapajs = M.map({
  container: "map",
  controls: ["layerswitcher"],
  layers: ["OSM"],
  projection: "EPSG:3857*m",
  bbox: [-872530,4288402,-150872,4702896]
});

let geojson = new M.layer.GeoJSON({
  name: "Provincias GeoJSON",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json"
});

let selectedFeature;
let defaultStyle = geojson.getStyle();
let selectedStyle = new M.style.Polygon({
    fill: {
      color: 'pink',
      opacity: 0.5,
    },
    stroke: {
      color: '#FF0000',
      width: 2
    }
  });
  
  mapajs.getFeatureHandler().removeLayer(geojson);

geojson.on(M.evt.SELECT_FEATURES, function(features) {
  geojson.setStyle(defaultStyle,true);
  selectedFeature = features[0];
  selectedFeature.setStyle(selectedStyle);
  console.log('Seleccionado:', selectedFeature);
})

mapajs.addLayers([geojson]);

window.seleccionar = (evt) => {
// Tomamos un feature cualquiera
  selectedFeature = geojson.getFeatures()[0];
  if (selectedFeature) {
    mapajs.getFeatureHandler().selectFeatures([selectedFeature], geojson, {});
    selectedFeature.setStyle(selectedStyle);
  }
};

window.deseleccionar = (evt) => {
  if (selectedFeature) {
    mapajs.getFeatureHandler().unselectFeatures([selectedFeature], geojson, {});
    geojson.setStyle(defaultStyle,true);
  }
};