Mapea 4 - Diferentes bases cartográficas

Diferentes bases cartográficas en proyección 3857 con aumento de niveles de zoom (corregido por B).

by deivil79

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
<button id="osmButton" onclick="verOSM()">
<!--OSM-->
Mapa
</button>
<button id="sateliteButton1" onclick="verSatelite1()">
<!--worldImagery-->
Satélite
</button>
<!--<button id="sateliteButton2" onclick="verSatelite2()">
worldStreetMap
</button>
<button id="sateliteButton3" onclick="verSatelite3()">
ignRaster
</button>-->
<button id="sateliteButton4" onclick="verSatelite4()">
<!--worldTopoMap-->
Terreno
</button>
<div id="map"></div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

let capasBase = [];

// Creamos las diferentes bases cartográficas
var layerOSM = new M.layer.OSM();
capasBase.push(layerOSM);

var ignRaster = new M.layer.WMTS({
    url: "http://www.ign.es/wmts/mapa-raster?",
    name: "MTN",
    matrixSet: "EPSG:25830",
    legend: "IGN Raster"
  });
  capasBase.push(ignRaster);
  
var worldStreetMap = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/WMTS?",
    name: "World_Street_Map",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Street_Map"
  });
  capasBase.push(worldStreetMap);
  
var worldImagery = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS?",
    name: "World_Imagery",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Imagery"
  });
    capasBase.push(worldImagery);
    
var worldPhysicalMap = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer/WMTS?",
    name: "World_Physical_Map",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Physical_Map"
  });
    capasBase.push(worldPhysicalMap);
  
var worldTopoMap = new M.layer.WMTS({
    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS?",
    name: "World_Topo_Map",
    matrixSet: "GoogleMapsCompatible",
    legend: "World_Topo_Map"
  });
  capasBase.push(worldTopoMap);

// Creamos el mapa con la capa que queramos se muestre
var mapajs = new M.map({
  container: "map",
  layers: [layerOSM],
  //bbox: [-776714, 4336091, -200909, 4619579],
  resolutions: [1000,611.50,305.75,152.87,76.437,38.219,19.109,9.5546,4.7773,2.3887,1.1943,0.5972,0.2986,0.1493],
  controls: ["OverviewMap", "scaleLine", "location", "layerswitcher"],
  projection: "EPSG:3857*m"
});

// Cargamos la capa de rutas culturales
var rutas = new M.layer.WFS({
  url: "https://www.iaph.es/ide/rutas/wfs?",
  name: "rutas:rutas",
  legend: "Rutas...