OpenLayers：实用程序 getSource().on 等待一秒钟以加载或重新加载 TileLayer答案

【问题标题】：OpenLayers: Utility getSource().on to wait one second to load or reload TileLayerOpenLayers：实用程序 getSource().on 等待一秒钟以加载或重新加载 TileLayer
【发布时间】：2021-02-25 23:03:01
【问题描述】：

我正在使用 OpenLayers5。

我在我的项目中使用 Tile Layers，但我需要当我移动到地图时，图层会延迟一秒加载，从而不会多次调用服务器。

我的代码是

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,
      }),
    });
  },
]);

我在 OpenLayers 中看到了以下三个函数：

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");
});

移动地图或缩放时我需要稍等片刻，以免服务器调用超载

【问题讨论】：

标签： openlayers openlayers-5

【解决方案1】：

您的问题很可能与未正确指定 TileWMS 有关。它必须有一个params 选项指定WMS LAYERS，并且projection 应该是单数。

一个简单的一秒延迟可以包含在一个瓦片加载函数中

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

但这会不会减少对服务器的调用总数，它只会将所有调用延迟相同的时间间隔，给用户体验很差，然后一秒钟后你会遇到同样的服务器问题.

为了减少对服务器的同时调用，您应该尝试使用地图的 maxTilesLoading 选项，如果使用 TileWMS，请尝试使用更大的图块 - 使用 256 像素图块时，一次调用 512 像素图块是四个调用。

【讨论】：