0

此处的 OpenLayers 最新文档：https : //openlayers.org/en/latest/apidoc/module-ol_Tile.html 显示了如何使用 setTileLoadFunction() 的示例。这是提供的示例：

import TileState from 'ol/TileState';

source.setTileLoadFunction(function(tile, src) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.addEventListener('loadend', function (evt) {
    var data = this.response;
    if (data !== undefined) {
      tile.getImage().src = URL.createObjectURL(data);
    } else {
      tile.setState(TileState.ERROR);
    }
  });
  xhr.addEventListener('error', function () {
    tile.setState(TileState.ERROR);
  });
  xhr.open('GET', src);
  xhr.send();
});

URL.createObjectURL() 创建一个必须手动撤销的永久对象。此代码示例将泄漏内存。随着瓷砖被丢弃，我们创建的 URL 对象仍然存在。

请参阅我的答案以获取正确的示例代码。

4

1 回答 1

1

在这个例子中我做了两个改变。其中之一是为了与旧浏览器（如 IE）兼容，在这种情况下您无法立即设置 responseType，您必须等待 onloadstart，如下所示：

xhr.onloadstart = function (ev) {
    xhr.responseType = "blob";
}

并且您需要释放加载磁贴后创建的 URL 对象：

    tile.getImage().onload = function() {
        URL.revokeObjectURL(this.src);

因此，这是应该编写的完整示例。 

import TileState from 'ol/TileState';

source.setTileLoadFunction(function(tile, src) {
  var xhr = new XMLHttpRequest();
  xhr.onloadstart = function() {
      xhr.responseType = 'blob';
  }
  xhr.addEventListener('loadend', function (evt) {
    var data = this.response;
    if (data !== undefined) {
      tile.getImage().src = URL.createObjectURL(data);
      tile.getImage().onload = function() {
        URL.revokeObjectURL(this.src);
      }
    } else {
      tile.setState(TileState.ERROR);
    }
  });
  xhr.addEventListener('error', function () {
    tile.setState(TileState.ERROR);
  });
  xhr.open('GET', src);
  xhr.send();
});
于 2020-06-19T15:45:02.060 回答