Los controles en OpenLayers son elementos de la interfaz de usuario que permiten a los usuarios interactuar con el mapa. Estos pueden incluir botones, barras de escala, brújulas y otros componentes que mejoran la experiencia de navegación y manipulación del mapa.
Controles Predeterminados
Controles predeterminados que se agregan automáticamente al mapa, algunos de los controles más usados son:
Zoom (ol.control.Zoom): Proporciona botones para acercar y alejar el mapa.
📘 Documentación 🚀 CodePen
// Ejemplo control Zoom
const zoomControl = new ol.control.Zoom({
className: 'mi-control-zoom', // Clase CSS personalizada
zoomInLabel: '+', // Etiqueta del botón de acercar
zoomOutLabel: '-', // Etiqueta del botón de alejar
zoomInTipLabel: 'Acercar', // Texto de ayuda para acercar
zoomOutTipLabel: 'Alejar' // Texto de ayuda para alejar
});
Rotate (ol.control.Rotate): Permite rotar el mapa si la vista está inclinada.
📘 Documentación 🚀 CodePen
// Ejemplo control Rotate
const rotateControl = new ol.control.Rotate({
className: 'mi-control-rotate', // Clase CSS personalizada
label: '⟳', // Etiqueta del botón de rotar
tipLabel: 'Restablecer Rotación', // Texto de ayuda para el botón
}),
Attribution (ol.control.Attribution): Muestra información de atribución sobre las capas y fuentes de datos.
📘 Documentación 🚀 CodePen
const attributionControl = new ol.control.Attribution({
collapsible: true, // Permitir colapsar el control
collapsed: false, // Mostrarlo expandido por defecto
tipLabel: 'Mostrar Atribuciones', // Texto de ayuda
}),
ScaleLine (ol.control.ScaleLine): Muestra una barra de escala que indica la relación de distancia en el mapa.
📘 Documentación 🚀 CodePen
const scaleLineControl = new ol.control.ScaleLine({
units: 'metric', // Unidades (metric o imperial)
minWidth: 100, // Ancho mínimo en píxeles
}),
Controles Personalizados
Se pueden crear controles personalizados extendiendo de la clase ol.control.Control.
🚀 CodePen