[Ej] Mapea 4 - OSM

OSM en proyección nativa 3857 y con ortofoto

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
</button>
<button id="sateliteButton" onclick="verSatelite()">
Satélite
</button>
<button id="terrenoButton" onclick="verTerreno()">
Terreno
</button>
<div id="map"></div>

CSS

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

JavaScript

let layerKML = new M.layer.KML({
  url: "https://www.iaph.es/web/rutasc/23_rc_la_cal_andalucia_marruecos.kml",
  name: "capaKML",
  extract: true
});
let layerOSM = new M.layer.OSM();

// Creamos el mapa con la capa que queramos se muestre
let mapajs = new M.map({
  container: "map",
  layers: [layerOSM, layerKML],
  //zoom: 4,
  //bbox: [-6.9776, 36.0113, -1.7957, 38.5625],
  bbox: [-776714, 4336091, -200909, 4619579],
  resolutions: [400,270.8356988374411,135.41784941872055,67.70892470936028,33.85446235468014,16.92723117734007,8.463615588670034,4.231807794335017,2.1159038971675086],
  controls: ["layerswitcher", "mouse"],
  projection: "EPSG:3857*m"
});

// elimina todas las capas del mapa
const removeLayers = () => mapajs.removeLayers(mapajs.getLayers());

// Añade wmc satelite y kml
function verSatelite() {
  removeLayers();
  let sateliteWmc = new M.layer.WMC({
    url: 'http://mapea4-sigc.juntadeandalucia.es/files/wmc/satelite.xml',
    name: 'Satélite'
  });
  mapajs.addLayers(new M.layer.KML({
    url: "https://www.iaph.es/web/rutasc/23_rc_la_cal_andalucia_marruecos.kml",
    name: "capaKML",
    extract: true
  }));
  mapajs.addWMC(sateliteWmc);

}

function verTerreno() {
  removeLayers();
  let terrenoWmc = new M.layer.WMC({
    url: 'http://www.juntadeandalucia.es/sandetel/publicacion/planromero2015/context_plan_romero_2015.xml',
    name: 'Terreno'
  });
  mapajs.addLayers(new M.layer.KML({
    url: "https://www.iaph.es/web/rutasc/23_rc_la_cal_andalucia_marruecos.kml",
    name: "capaKML",
    extract: true
  }));
  mapajs.addWMC(terrenoWmc);

}

// Añade OSM y KML
function verOSM() {
  removeLayers();
  console.log(mapajs.getBbox());
  mapajs.addLayers([new M.layer.OSM(), new M.layer.KML({
    url: "https://www.iaph.es/web/rutasc/23_rc_la_cal_andalucia_marruecos.kml",
    name: "capaKML",
    extract: true
  })]);
}