CP-090-07 - COMBINACION COROPLETAS - PROPORTIONAL

Ejemplos aplicando clasificacion proporcional junto a coropletas.

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearchbylocation/geosearchbylocation.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/assets/css/mapea.ol.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/wfstcontrols/wfstcontrols.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearch/geosearch.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/printer/printer.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/measurebar/measurebar.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/streetview/streetview.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/printer/printer.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/measurebar/measurebar.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="map"></div>

<button id="aplicarProporcional"...

CSS

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

JavaScript

// Caso de pruebas
// 1. Cargar capa de municipios
// 2. Se aplica coropletas - incluido campo porcentaje que se añade a la capa y se generan campos aleatorios
// 3. Pulsar Aplicar Proporcional - aplica proporcional respetando la simbología anterior


let mapajs = M.map({
  'container': 'map',
  "controls": ["layerswitcher"],
  "layer": ["OSM"]
});

let layer = new M.layer.WFS({
  name: "Municipios",
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
  namespace: "mapea",
  name: "da_municipio_pol",
  legend: "Municipios - COROPLETAS",
  geometry: 'POLYGON',
});;

mapajs.addLayers(layer);
mapajs.addPlugin(new M.plugin.AttributeTable());

/**
 * attribute: Parametro por el cual se calcula la proporcion en los features
 * maxRadius: Parametro que define el radio maximo de la proporcion
 * minRadius: Parametro que define el radio minimo de la proporcion
 */
let options = {
  attribute: "area",
  maxRadius: 25,
  minRadius: 8
};


let choropleth = new M.style.Choropleth("porcentaje", ['#0edfd0', '#ee440d'], () => [50, 80, 100]);

layer.on(M.evt.LOAD, function() {
  // Crea sobre la capa una atributo de porcentaje aleatorio para aplicar clasificación inicial sobre este.
	layer.getFeatures().forEach(f => f.setAttribute('porcentaje', Math.round(Math.random() * 100)));
	// Aplica estilo coropleta
  layer.setStyle(choropleth);
	
});



function aplicarProporcional(){
// Aplica proporcional - En este caso se va a preservar el estilo anterior pero se aplican los atributos proporcionales para representación
	layer.setStyle( new M.style.Proportional(options.attribute, options.minRadius, options.maxRadius));
}