[Test] Multi

by Francisco

HTML

<script src="https://mapea4-sigc.juntadeandalucia.es/js/mapea-5.1.0.ol.min.js"></script>
<link rel="stylesheet" href="https://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.1.0.ol.min.css">
<script src="https://mapea4-sigc.juntadeandalucia.es/js/configuration-5.1.0.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"]
});

// Estilo para puntos
let estiloPoint = new M.style.Point({
  radius: 5,
  fill: {
    color: 'green',
    opacity: 0.8
  },
  stroke: {
    color: '#FF0000'
  }
});

// Estilo para polígonos
let estiloPolygon = new M.style.Polygon({
  fill: {
    color: 'pink',
    opacity: 0.5,
  },
  stroke: {
    color: '#FF0000',
    width: 2
  }
});

// Capa de provincias, poligonal
let layer1 = new M.layer.GeoJSON({
  name: "Provincias",
  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"
});
//GeoJSON servido
mapajs.addLayers(layer1);

// Vasmos a meterle un feature puntual a la capa poligona.
layer1.on(M.evt.LOAD, () => {
  //Me creo un feature tipo punto
  let f2 = new M.Feature(2, {
    properties: {
      nombre: 'Feature-2'
    },
    type: "Feature",
    id: 2,
    geometry_name: "geometry",
    geometry: {
      type: "Point",
      coordinates: [303597, 4159135]
    }
  });
  // La capa tendra entonces dos tipos de geometrias
  layer1.addFeatures(f2);

	// El estilo de los elementos dependerá de su geometría
  layer1.getFeatures().forEach(function(f) {
    if (f.getGeometry().type == 'Point') {
      f.setStyle(estiloPoint);
    } else if (f.getGeometry().type == 'MultiPolygon') {
      f.setStyle(estiloPolygon);
    }
  })
})