Skip to content

Controles básicos

fbma edited this page Nov 10, 2022 · 6 revisions

Mapea dispone de una serie de controles básicos, que se especifican mediante el parámetro 'controls' en el constructor del mapa, o llamando al método .addControls del mismo. En ambos casos pueden especificarse como cadenas o como objetos:

mapajs = M.map({
     container:"map",
     controls:['scale','location','layerswitcher','mouse']
});
// Añadir controles
mapajs.addControls(['scale','location','layerswitcher']);

mapajs.addControls([
    new M.control.Mouse(),
    new M.control.OverviewMap()]);

// Obtener array de controles del mapa
var controles = mapajs.getControls();
// Filtrar controles por nombre
var controlTOC = mapajs.getControls({name:'layerswitcher'})[0];

Estos son los controles básicos que incluye Mapea:

  • Panzoombar: Añade una barra de desplazamiento para acercarse/alejarse del mapa.
  • LayerSwitcher: Incluye un árbol de contenidos (TOC) replegable al mapa. En ese árbol se mostrarán las capas según el nombre público que se les haya dado en su construcción. Para las capas WMS, mostrará además la leyenda que la operación GetLegendGraphic.
    v6.3.0+: El parámetro de mapa layerswitcher: 'emptylayer' permite añadir el control al mapa inicializado con una capa base vacía, además de las que se añadan al mapa.

💡 En los WMC, la presencia o no de una capa en el TOC viene establecida por el tag displayInLayerSwitcher, así como su leyenda por LegendURL.

  • OverviewMap: añade un mapa de ubicación, donde se representa la capa base a una escala menor.
  • Scale, ScaleLine: añade escalas numérica y gráfica respectivamente.
  • Mouse: muestra las coordenadas de la posición donde se encuentre el puntero del ratón.
    A partir de la v5.1.0, es posible especificar los siguientes paŕametros opcionales:
mapajs.addControls(new M.control.Mouse({
  srs: 'EPSG:4326', // Sistema de referencia en el que mostrar las coordenadas.
  label: 'EPSG:4326', // Etiqueta
  precision: 2 // Número de decimales a mostrar en las coordenadas
}));

💡 Las coordenadas no aparecen en dispositivo móviles, ya que se manejan con eventos táctiles, no con ratón.

  • Location: Añade un botón de centrado en la posición del usuario. Se le puede indicar si se desea posicionamiento continuo (tracking, por defecto a true) y alta precisión (highAccuracy, por defecto a false)
  • GetFeatureInfo: Añade la herramienta de consulta de información sobre capas WMS a través de su servicio getFeatureInfo. Por defecto, espera Html como formato de respuesta. Otros formatos soportados son 'gml' y 'plain'. Admite también un buffer en pixeles opcional:
mapajs.addControls(new M.control.GetFeatureInfo(
 'gml', 
 {buffer: 1000}));
  • rotate (v5.1.0+): Añade una brújula que permite rotar el mapa, y reestablecer el norte pinchando en la misma.

Los controles también pueden activarse o desactivarse por código:

var ctrlLocation = mapajs.getControls({name:'location'})[0];
ctrlLocation.activate(); //para activarlo
ctrlLocation.deactivate(); //para desactivarlo

doc API: M.Control

Clone this wiki locally