OpenLayers: Utility getSource().on to wait one second to load or reload TileLayer

Question

I am using OpenLayers5.

I'm working with Tile Layers in my project, but I need that when I move to the map, the layer will load with one second delay to no call many times to server.

My code is

app.controller("MainController", [
  function () {
    const map = new ol.Map({
      target: "map",
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
        }),
        new ol.layer.Tile({
          id: "positions",
          visible: true,
          source: new ol.source.TileWMS({
            refresh: {
              force: true,
            },
            visible: true,
            projections: ["EPSG:4326"],
            url: "http://localhost:9000/getMap",
          }),
        }),
      ],
      view: new ol.View({
        center: [0, 0],
        zoom: 0,
      }),
    });
  },
]);

I saw in OpenLayers the following three functions:

getSource().on("tileloadstart", function () {
   // While loading the layer
   console.log("tileloadstart");
});

getSource().on("tileloadend", function () {
   // At the end of the layer loading
   console.log("tileloadend");
});
      
getSource().on("tileloaderror", function () {
   //If throw error while loading
   console.log("tileloaderror");
});

I need to wait a second while I move the map or zoom so as not to overload the server calls

score 0 · Answer 1 · answered Feb 25 '21 at 11:17

Your problem is more likely related to the TileWMS not being correctly specified. It must have a params option specifying the WMS LAYERS, and projection should be singular.

A simple one second delay could be included in a tile load function

  tileLoadFunction: function (imageTile, src) {
    setTimeout(function() {
      imageTile.getImage().src = src;
    }, 1000);
  }

but that will NOT reduce totals calls to the server, it will simply delay all calls by the same interval, giving a very poor user experience, then you will get the same server problem one second later.

To reduce simultaneous calls to the server you should experiment with the map's maxTilesLoading option and if using TileWMS try using a larger tile size - a single call for a 512px tile is four calls when using 256px tiles.

OpenLayers: Utility getSource().on to wait one second to load or reload TileLayer

1 Answers1