CP03-AttributeTable_Filtros_EstiloSimple

Base para crear fiddles de mapea

by solcursomapea

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>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.ol.min.js"></script>
<div id="map"></div>

<button id="btnEstiloPol" onclick="estiloPol();">
  Estilo Polígono
</button>

<button id="btnEstiloPol" onclick="estiloPunto();">
  Estilo Punto
</button>

CSS

<style rel="stylesheet">
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

JavaScript

// Mapea - Documentación clases
// http://mapea4-sigc.juntadeandalucia.es/doc/index.html

// Mapea - Primeros Pasos
// https://github.com/sigcorporativo-ja/Mapea4/wiki/Primeros-pasos


// EJ01. Cargar Mapa

var map = M.map({
  wmcfiles: ["callejero"],
  container: "map",
 	controls: ['layerswitcher'],
	extract: true
});


// EJ02. Añadir Plugin AttributeTable 
/*

AttributteTable
https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.min.css
https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.ol.min.js
*/

map.addPlugin(new M.plugin.AttributeTable());


// EJ03. Cargar Capa Polígono WFS
//  name: "da_municipio_pol",
//    url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
//    namespace: "mapea",
// geometry: 'MPOLYGON',
    
let capaPol = new M.layer.WFS({
    name: "da_municipio_pol",
    url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
    namespace: "mapea",
    geometry: 'MPOLYGON',
  });

map.addWFS(capaPol);




// EJ04. Cargar Capa Punto WFS
//   name: "Centros ASSDA",
//      url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
//      namespace: "mapea",
//      name: "centrosassda",
//      getfeatureinfo: "plain",
//      geometry: 'POINT',

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

 
 


// EJ05. Crear estilo simple para la capa poligonal
// colo borde = white
// color relleno = blue con transparencia
function estiloPol(){
stlyePolimple =  new M.style.Polygon({
	fill: {
		color : 'blue',
		opacity: 0.3
	},
	stroke:{
		color: 'white',
		width: 2
	}
} );

capaPol.setStyle(stlyePolimple);
}


// EJ06. Crear estilo simple para la capa puntual
// radio = 10
// color =...