Guía Digital [OSM, carga de rutas y botones base cartográfica]

Prueba de botones para cambiar entre base cartográficas (OSM, ortofoto,...) junto al servicio web con todas las capas de tipo puntual y las rutas a la vez.

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>
<div id="map"></div>

CSS

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

JavaScript

// Creamos la capa OSM
let layerOSM = new M.layer.OSM();

// Creamos el mapa con la capa que queramos se muestre
var mapajs = M.map({
  container: "map",
  layers: [new M.layer.OSM()],
  bbox: [96388, 3959795, 621889, 4299792],
  controls: ["layerswitcher", "mouse"],
  zoom: 3.8,
});


var rutas = new M.layer.WFS({
  url: "https://www.iaph.es/ide/rutas/wfs?",
  name: "rutas:rutas",
  legend: "Rutas Culturales",
  geometry: 'MLINE',
  extract: true
});


let estiloLinea = new M.style.Line({
  // borde de la linea
  'stroke': {
    // color del borde
    color: '#ff8000',
    // grosor del borde en pixeles
    width: 3,

  },
  // Relleno de la linea
  'fill': {
    color: '#ff8000',
    width: 3,
    opacity: 0,
  },
});



//capaGeoJSON.setStyle(new M.style.Cluster({}));
//mapajs.addLayers(capaGeoJSON);

rutas.setStyle(estiloLinea);
mapajs.addLayers(rutas);

var capaGeoJSON = new M.layer.GeoJSON({
  name: "Entidades",
  url: "https://www.iaph.es/ide/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=paisaje:PICA_2018,localizador:localizador,inmaterial:inmaterial,pmu:pmu&outputFormat=application/json"
});

capaGeoJSON.setStyle(new M.style.Cluster({}));
mapajs.addLayers(capaGeoJSON);