0

I want to use multiple layers from one WMTS-source. I started from the WMTS Layer from capabilities example. I would like to collect the WMTS-layers in a layer-group baselayers, that I'm adding later to the map together with other overlay-layers. What I've tryed so far is the following code, but I always get an error (TypeError: a is undefined), pointing to the code: var map = new ol.Map({ ... I cannot find the error in my script, but maybe there is a cleaner way to code, what I intend to do?

Html-file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple WMTS Layers from Capabilities</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.3.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.3.1/build/ol.js"></script>
    <script src="./js/jquery.js" type="text/javascript" ></script>
    <script src="./js/test.js" type="text/javascript" ></script> 
    <link href="./css/layerswitchercontrol.css" rel="stylesheet">           
    <script src="./js/layerswitchercontrol.js" type="text/javascript"></script>

  </head>
  <body onload = "initialize()">
    <div id="map" class="map"></div>
  </body>
</html>

The javascript code:

    function initialize() {
      var parser = new ol.format.WMTSCapabilities();
      var baselayers;

    var toplayers = new ol.layer.Group({
        title: 'Regions',
        layers: []
    });

      fetch('http://wmts1.geoportail.lu/opendata/wmts/1.0.0/WMTSCapabilities.xml').then(function(response) {
        return response.text();
      }).then(function(text) {
        var result = parser.read(text);

        var hybrid_s = ol.source.WMTS.optionsFromCapabilities(result, {
          layer: 'hybrid',
          matrixSet: 'EPSG:3857'
        });
        var ortho_2016_s = ol.source.WMTS.optionsFromCapabilities(result, {
          layer: 'ortho_2016',
          matrixSet: 'EPSG:3857'
        });


    baselayers = new ol.layer.Group({
        title: 'Background-Layers',
        layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM(),
              opacity: 1.0,
              title: 'OpenStreetMap',
              baseLayer: true,
              visible: false,
            }),
            new ol.layer.Tile({
              opacity: 1.0,
              title: 'Hybrid',
              baseLayer: true,
              visible: true,
              source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (hybrid_s))
            }),
            new ol.layer.Tile({
              opacity: 1.0,
              title: 'Ortho 2016',
              baseLayer: true,
              visible: false,
              source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (ortho_2016_s))
            })  
          ]        
        });
      });

    var map = new ol.Map({
        target: 'map',
        view: new ol.View({
            center: [685000,6380000],
            zoom: 11
        }),
        controls: ol.control.defaults().extend([
            new ol.control.LayerSwitcher() // http://viglino.github.io/ol3-ext/examples/map.switcher.html
        ]),
        layers: [baselayers, toplayers],
        interactions: ol.interaction.defaults().extend([
            new ol.interaction.Select({
                layers: [baselayers, toplayers]
            })
        ])
    });
};
Improve this question

1 Answer 1

Reset to default
1

I did a few changes to my code to get it to work. First I declared var baselayers as new ol.layer.Group at the beginning. Added empty baselayers to the map and then I defined the layers one after the other and added them to the baselayer. Beside this I wrapped my code in 

function init() {
    document.removeEventListener('DOMContentLoaded', init);

and removed the body onload = "initialize()"-function instead. here how the js-code looks like:

function init() {
document.removeEventListener('DOMContentLoaded', init);

var parser = new ol.format.WMTSCapabilities();

var baselayers= new ol.layer.Group({
    title: 'Background-Layers',
    layers: []
});

var toplayers = new ol.layer.Group({
    title: 'Regions',
    layers: []
});

  fetch('http://wmts1.geoportail.lu/opendata/wmts/1.0.0/WMTSCapabilities.xml').then(function(response) {
    return response.text();
  }).then(function(text) {
    var result = parser.read(text);

    var hybrid_s = ol.source.WMTS.optionsFromCapabilities(result, {
      layer: 'hybrid',
      matrixSet: 'EPSG:3857'
    });
    var ortho_2016_s = ol.source.WMTS.optionsFromCapabilities(result, {
      layer: 'ortho_2016',
      matrixSet: 'EPSG:3857'
    });

        var osm = new ol.layer.Tile({
          source: new ol.source.OSM(),
          opacity: 1.0,
          title: 'OpenStreetMap',
          baseLayer: true,
          visible: false,
        });

        var hybrid = new ol.layer.Tile({
          opacity: 1.0,
          title: 'Hybrid',
          baseLayer: true,
          visible: true,
          source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (hybrid_s))
        });

        var ortho_2016 = new ol.layer.Tile({
          opacity: 1.0,
          title: 'Ortho 2016',
          baseLayer: true,
          visible: false,
          source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (ortho_2016_s))
        });
        baselayers.setLayers(new ol.Collection([osm, hybrid, ortho_2016]));
  });

var map = new ol.Map({
    target: 'map',
    view: new ol.View({
        center: [685000,6380000],
        zoom: 11
    }),
    controls: ol.control.defaults().extend([
        new ol.control.LayerSwitcher() // http://viglino.github.io/ol3-ext/examples/map.switcher.html
    ]),
    layers: [baselayers, toplayers],
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.Select({
            layers: [baselayers, toplayers]
        })
    ]);
}

document.addEventListener('DOMContentLoaded', init);
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.