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 de M.style.Point:

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
stylePoint	{M.style.Point} - objeto M.style.Point que define el estilo

💡 Puesto que se hace uso de M.style.Point 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: "Centros ASSDA - Subtipos",
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
  namespace: "mapea",
  name: "centrosassda_subtipo",
  legend: "centrosassda_subtipo",
  geometry: 'POINT',
});

mapajs.addLayers(layer);

//definimos un estilo proporcional 
let styleProp = new M.style.Proportional('nregin', 5, 20, 
   new M.style.Point({ //estilo del punto
     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('nregin', 5, 20);

Ejemplo funcional