Guía Digital [OSM y carga de rutas]

Prueba de base cartográfica OSM 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>
<div id="map"></div>

CSS

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

JavaScript

//var mapajs = M.map({
//  container: "map",
//  wmcfiles: ["callejero"],
//  controls: ["layerswitcher"]
//});

var mapajs = M.map({
  container: "map",
  layers: [new M.layer.OSM()],
  getFeaturesExtent
  bbox: [-776714, 4336091, -200909, 4619579],
  resolutions: [611.50,305.75,152.87,76.437,38.219,19.109,9.5546,4.7773,2.3887,1.1943,0.5972],
  controls: ["layerswitcher", "mouse", "location", "scale"],
  projection: "EPSG:3857*m",
});

//var capaGeoJSON = new M.layer.GeoJSON({
//  name: "Rutas Culturales",
//  url: "https://www.iaph.es/ide/rutas/wms?service=WFS&version=1.1.0&request=GetFeature&typeName=rutas:rutas&outputFormat=application/json"
//});

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,
    //linedash: [5,5,15],
    //linedashoffset: 20,
    //linecap: 'round',
    //linejoin: 'miter',
    //miterlimit: 15
  },
  // Relleno de la linea
  'fill': {
    color: '#ff8000',
    width: 3,
    opacity: 0,
  },
  //'label': {
//    text: function(feature) {
//      return stringDivider(feature.getAttribute('nombre'), 16, '\n');
//    },
//    font: 'bold italic 12px Comic Sans MS',
//    rotate: false,
//    scale: 1,
//    offset: [0, 0],
//    color: '#ffffff',
//    stroke: {
//      color: '#ff8000',
//      width: 5,
       //linedash: [1, 5],
       //linedashoffset: 5,
       //linecap: 'square',
       //linejoin: 'miter',
       //miterlimit: 15
   // },
    //rotate: false,
    //rotation: 0.7,
    //align: M.style.align.LEFT,
    //baseline: M.style.baseline.TOP,
    //textoverflow: 'hidden',
    //minwidth: 10,
    //path: true
  //}
});



//capaGeoJSON.setStyle(new...