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.

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-CNIG ofrece una manera simple de establecer la simbología proporcional, haciendo uso del estilo Generic de tipo Point M.style.Generic:

let styleProp = new M.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	{M.style.Generic} - objeto M.style.Generic que tenga definida la simbología Point

💡 Puesto que se hace uso de M.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 = M.map({
  container: "map"
});

let layer = new M.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 M.style.Proportional('tot_ibi', 5, 20, 
  new M.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: M.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 M.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 M.style.Generic({
  point: {
    fill: {
      color: 'black'
    },
    stroke: {
      color: 'white',
      width: 2
    }
  }
});

let proportionalStyle = new M.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 M.style.Generic({
  point: {
    fill: {
      color: 'black'
    },
    stroke: {
      color: 'white',
      width: 2
    }
  }
});

let proportionalStyle = new M.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 M.style.Proportional('tot_ibi', 
                                                 sizeMin, 
                                                 sizeMax,
                                                 estiloPunto, 
                                                 null, 
                                                 {flannery: false});

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