Uso de la extensión escala gráfica de las extensiones de la comunidad de OpenLayers
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="cnig" content="yes"> <title>Visor base</title> <!-- Estilo de la API --> <link type="text/css" rel="stylesheet" href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css"> <!-- Estilos de los plugins añadidos --> <link href="https://componentes.cnig.es/api-core/plugins/attributions/attributions.ol.min.css" rel="stylesheet" /> <!-- ol-ext - css --> <link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.css" /> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } </style> </head> <body> <!-- Contenedor principal del mapa --> <div id="mapjs" class="m-container"></div> <!-- Ficheros javascript de la API --> <script type="text/javascript" src="https://componentes.cnig.es/api-core/vendor/browser-polyfill.js"></script> <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script> <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script> <!-- ol-ext - js --> <script type="text/javascript" src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script> <script type="text/javascript"> // Configuración del mapa M.config.attributions.defaultAttribution = 'Instituto Geográfico Nacional'; M.config.attributions.defaultUrl = 'https://www.ign.es/' const mapjs = M.map({ container: 'mapjs', //id del contenedor del mapa controls: ['panzoom', 'scale*true', 'rotate', 'location'], zoom: 13, maxZoom: 18, minZoom: 4, center: ol.proj.fromLonLat([2.541450, 42.141769]), }); // acceso a librería base var mapaOL = mapjs.getMapImpl(); var scaleLineControl = new ol.control.CanvasScaleLine(); mapaOL.addControl(scaleLineControl); // Configuración de las capas TMS_PNOA = new M.layer.TMS({ url: 'https://tms-pnoa-ma.idee.es/1.0.0/pnoa-ma/{z}/{x}/{-y}.jpeg', name: 'PNOA_MA_IGN', }); mapjs.addTMS(TMS_PNOA); </script> </body> </html>