CP-090-06 - COMBINACION COROPLETAS - PROPORTIONAL - Caso alternativo

Ejemplos aplicando clasificacion proporcional junto a coropletas. Caso alternativo

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>

CSS

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

JavaScript

// Caso de pruebas
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 - CATEGORÍAS",
  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: "gid",
  maxRadius: 25,
  minRadius: 8
};

/**
 * Funcion que calcula el maximo y el minimo valor del atributo
 * por el cual se calcula la proporcion de los features de la cama
 */
const getMaxMinValues = function(features, attribute) {
  let [minValue, maxValue] = [undefined, undefined];
  let filteredFeatures = features.filter(feature =>
    !isNaN(feature.getAttribute(attribute))).map(f => parseInt(f.getAttribute(attribute)));
  let index = 1;
  if (!M.utils.isNullOrEmpty(filteredFeatures)) {
    minValue = filteredFeatures[0];
    maxValue = filteredFeatures[0];
    while (index < filteredFeatures.length - 1) {
      let posteriorValue = filteredFeatures[index + 1];
      minValue = (minValue < posteriorValue) ? minValue : posteriorValue;
      maxValue = (maxValue < posteriorValue) ? posteriorValue : maxValue;
      index++;
    }
  }
  return [minValue, maxValue];
}

/**
 * Funcion que en base al valor maximo, al valor minimo, al radio maximo,
 * al radio minimo y al valor del atributo del feature devuelve el radio
 * que le corresponde al realizar una representación proporcional
 */
const proportionalFunction = function(feature, options) {
  let value = parseFloat(feature.getAttribute(options.attribute));
  return calcProportion(value, options.minValue, options.maxValue, options.minRadius,...