[Style] - Eventos de estilos

Test en mapea42_dev

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/configuration.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearchbylocation/geosearchbylocation.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/wfstcontrols/wfstcontrols.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearch/geosearch.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.min.css">
<div id="mapjs">
  <button id="b1">
Set style layer
</button>
  <button id="b2">
Set style feature
</button>
  <button id="b3">
style set property
</button>
</div>

CSS

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

JavaScript

let map = M.map({
    container: 'mapjs',
  });

  let ayuntamientos = new M.layer.WFS({
    name: "assda_sv10_ayuntamiento_point_indicadores",
    url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
    namespace: "mapea",
    name: "assda_sv10_ayuntamiento_point_indicadores",
    legend: "Prestaciones - Ámbito municipal",
    getfeatureinfo: "plain",
    geometry: 'POINT',
  });

  map.addLayers(ayuntamientos);

  ayuntamientos.on(M.evt.CHANGE_STYLE, () => {
    alert("La capa ayuntamientos cambia de estilo");
  })

  ayuntamientos.on(M.evt.LOAD, () => {
    let feature = ayuntamientos.getFeatures()[0];
    feature.on(M.evt.CHANGE_STYLE, () => {
      alert("El feature cambia de estilo");
    });
  });




  let button = document.querySelector("#b1");
  button.addEventListener("click", () => {
    let feature = ayuntamientos.getFeatures()[0];
    let style = M.utils.generateRandomStyle(feature);
    ayuntamientos.setStyle(style);
  });

  let button2 = document.querySelector("#b2");
  button2.addEventListener("click", () => {
    let feature = ayuntamientos.getFeatures()[0];
    let style = M.utils.generateRandomStyle(feature);
    feature.setStyle(style, true);
  });

  let button3 = document.querySelector("#b3");
button3.addEventListener("click", ()=>{
	let style = ayuntamientos.getStyle();
  style.on(M.evt.CHANGE, ()=>{
  	alert("El estilo de ayuntamientos ha cambiado")
  });
  style.set("fill.color",'red');
});