Proporcional

La simbología proporcional suele utilizarse para mostrar un atributo de los elementos de una capa con un símbolo de tamaño proporcional al valor del mismo en el contexto global del capa.

proporcional

Por tanto, para construir un mapa con simbología proporcional, necesitaremos lo siguiente:

Atributo que contiene el dato
Tamaño menor
Tamaño mayor
Estilo del símbolo

API-IDEE ofrece una manera simple de establecer la simbología proporcional, haciendo uso del estilo Generic de tipo Point IDEE.style.Generic:

let styleProp = new IDEE.style.Proportional(valueField, 
                                         sizeMin,
                                         sizeMax,
                                         stylePoint);

Donde:

Parámetro	Descripción
valueField	{string} - atributo que contiene el dato
sizeMin	{number} - tamaño mínimo del símbolo
sizeMax	{number} - tamaño máximo del símbolo
styleGeneric	{IDEE.style.Generic} - objeto IDEE.style.Generic que tenga definida la simbología Point

💡 Puesto que se hace uso de IDEE.style.Generic se podrá definir cualquier opción que acepte dicho estilo, como por ejemplo un icono o un símbolo vectorial. Para más información consultar la documentación asociada.

let mapajs = IDEE.map({
  container: "map"
});

let layer = new IDEE.layer.WFS({
  name: "Municipios Indicadores",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/wfs?",
  namespace: "tematicos",
  name: "ind_mun_simp",  
  geometry: 'POLYGON',
});

mapajs.addLayers(layer);

// definimos un estilo proporcional 
let styleProp = new IDEE.style.Proportional('tot_ibi', 5, 20, 
  new IDEE.style.Generic({ //estilo del punto
    point: {
      fill: {
        color: '#000000'
      },
      stroke: {
        color: '#FFFFFF',
        width: 2
      }
    }
  })
);

// lo establecemos a la capa
layer.setStyle(styleProp);

💡 En el caso de utilizar un estilo en base a una imagen, hay que tener en cuenta que se aplicarán tamaños proporcionales en vez del real de la imagen, ya que es imposible a priori conocerlo. Dicha proporción está establecida por defecto a 20, pero puede ser modificada: IDEE.style.Proportional.SCALE_PROPORTION = 20.

También es posible no definir un estilo, en cuyo caso se representará el símbolo proporcional con el estilo por defecto:

let styleProp = new IDEE.style.Proportional('tot_ibi', 5, 20);

Igualmente, se puede definir una función personalizada o utilizar las ya definidas ('Absoluto' y 'Flannery') para su uso como generadora de los niveles proporcionales.

En el caso de definir una función personalizada se realiza través del método .setProportionalFunction, o añadiéndola como parámetro al constructor del estilo proporcional después del parámetro de estilo.

La función a usar para el cálculo del radio proporcional asociado a un valor de entrada sigue la interfaz:

parámetros de entrada: value, minValue, maxValue, minRadius, maxRadius.
parámetro de salida: valor del radio proporcional calculado.

function miFuncionProporcional(value, minValue, maxValue, minRadius, maxRadius){
  // Hace el cálculo del radio asociado al value recibido...
  return...;
}

let sizeMin = 5;
let sizeMax = 15;

let estiloPunto = new IDEE.style.Generic({
  point: {
    fill: {
      color: 'black'
    },
    stroke: {
      color: 'white',
      width: 2
    }
  }
});

let proportionalStyle = new IDEE.style.Proportional('tot_ibi', sizeMin, sizeMax, 
                                                 estiloPunto,miFuncionProporcional);

Para utilizar el escalado de Flannery se añade como parámetro al constructor del estilo proporcional después del parámetro de función personalizada. En el caso de añadir una función personalizada y a la vez el escalado de Flannery se utilizará la función personalizada. Este parámetro será un objeto con la siguiente estructura {flannery: true}.

let sizeMin = 5;
let sizeMax = 15;

let estiloPunto = new IDEE.style.Generic({
  point: {
    fill: {
      color: 'black'
    },
    stroke: {
      color: 'white',
      width: 2
    }
  }
});

let proportionalStyle = new IDEE.style.Proportional('tot_ibi', 
                                                 sizeMin, 
                                                 sizeMax, 
                                                 estiloPunto,
                                                 null, 
                                                {flannery: true});

En el caso de que no se defina ninguna función personalizada y el escalado de flannery tenga el valor false o no se añada como parámetro al constructor se utilizará el escalado absoluto.

let proportionalStyle = new IDEE.style.Proportional('tot_ibi', 
                                                 sizeMin, 
                                                 sizeMax,
                                                 estiloPunto, 
                                                 null, 
                                                 {flannery: false});

let proportionalStyle = new IDEE.style.Proportional('tot_ibi', sizeMin, sizeMax);

vendorOptions

Permite cargar estilos de la librería base.

new IDEE.style.Proportional('total_to', 10, 50, 
  new IDEE.style.Point(undefined, new ol.style.Style(
  {
    image: new ol.style.Circle(
      {
        radius: 15,
        fill: new ol.style.Fill({ color: '#F5470088' }),
        stroke: new ol.style.Stroke({
          color: '#0000ff88', width: 5, lineDash: [5, 5, 20],
          lineDashOffset: 5, lineCap: 'butt',
        }),
      },
    ),
    geometry: (feature) => { //Solo es necesario si la capa no es de puntos para obtener el centro
      const extent = feature.getGeometry().getExtent();
      const coords = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
      return new OLPoint(coords);
    },
  },
)));