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

问题描述

我使用的是 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,},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");
});

移动地图或缩放时我需要等待一秒钟，以免服务器调用过载

解决方法

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

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

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

但这将不会减少对服务器的调用总数，它只会将所有调用延迟相同的时间间隔，从而提供非常差的用户体验，然后一秒钟后您将遇到相同的服务器问题.

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

openlayers openlayers openlayers-5