[Demo] Serializar estilo GeoJSON

by Francisco

HTML

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

CSS

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

JavaScript

var mapajs = M.map({
	container:"map",
  wmcfiles:["mapa","satelite"],
  controls: ["layerswitcher"]
  });

//GeoJSON servido
let layerGeoJSON= new M.layer.GeoJSON({name: "Ayudas Concedidas", url: "https://www.consultateleco.andaluciaesdigital.es/documents/409796/2757836/Ayudas+concedidas/3d699cd8-0ef2-460b-a7c3-44da2336515f/Zonas_Concedidas-3.geojson"});

//GeoJSON servido
let layerGeoJSON2= new M.layer.GeoJSON({name: "Ayudas Concedidas 2", url: "https://www.consultateleco.andaluciaesdigital.es/documents/409796/2757836/Ayudas+concedidas/3d699cd8-0ef2-460b-a7c3-44da2336515f/Zonas_Concedidas-3.geojson"});

// 1.- La url del geoJSON se le debe pasar a Mapea codificada, se puede hacer con "encode" desde:
// https://meyerweb.com/eric/tools/dencoder/

// Estilo: relleno rojo semitransparente y borde negro
let estilo = new M.style.Polygon({
   fill: {
     color: '#f00000',
     opacity: 0.7,
   },
   stroke: {
     color: '#000000',
     width: 1
   }
});

// Estilo: relleno rojo semitransparente y borde negro
let estilo2 = new M.style.Polygon({
   fill: {
     color: 'pink',
     opacity: 0.7,
   },
   stroke: {
     color: '#000000',
     width: 1
   }
});

layerGeoJSON.setStyle(estilo);
layerGeoJSON2.setStyle(estilo2);

mapajs.addLayers(layerGeoJSON);
mapajs.addLayers(layerGeoJSON2);

/*layerGeoJSON.on(M.evt.LOAD, function() {
    layerGeoJSON.getFeatures().forEach(function(f) {
      f.getStyle().set("fill.opacity", 0.5);
    });
    let estiloSerializado = layerGeoJSON.getStyle().serialize();
    console.log(estiloSerializado);
  });*/

// El estilo serializado 
let estiloSerializado = estilo.serialize();
console.log(estiloSerializado);
// Copiamos el resultado de la consola en la llamada al api rest, reemplazando...