OpenLayers Load KML Layer in the background

Question

I would like to show a polygon in OpenLayers. The polygon was defined in 3 KML files with difference level of detail, ie:

1. Low Resolution KML (with 100 points)
2. Medium Resolution KML (with 1000 points)
3. High Resolution KML (with 10000 points)

First, I created 3 vector layers for each KML file with difference max and min resolution, ie:

1. minRosolution: 0.0001716, maxResolution: 0.0004000
2. minRosolution: 0.0000429, maxResolution: 0.0001716
3. minRosolution: 0.0000000, maxResolution: 0.0000429

Then added those vector layers into openlayer list. It works but OpenLayers is not usable until the whole KML is being loaded. Hence, I would like to improve it by making the loading process for Medium and High resolution KML in the background. Is it possible?

Answer 1

If you specify a url in the source it isn't loaded until required for display. As long as the data is static you can load it by xhr/fetch and add it to the source immediately, such as in this alternative approach to one of the OpenLayers examples:

  var projection = ol.proj.get('EPSG:3857');

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var vector = new ol.layer.Vector({
    source: new ol.source.Vector()
  });

  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    vector.getSource().addFeatures(new ol.format.KML().readFeatures(xhr.responseText, {featureProjection: projection}));
  }
  xhr.open("GET", 'https://openlayers.org/en/v4.6.5/examples/data/kml/2012-02-10.kml', true);
  xhr.send();

  var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View({
      center: [876970.8463461736, 5859807.853963373],
      projection: projection,
      zoom: 10
    })
  });