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

Mapea 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",
  controls: ['layerswitcher', 'overviewmap'],
});

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);

Ejemplo funcional

Igualmente, se puede definir una función personalizada para su uso como generadora de los niveles proporcionales, a 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);