利用瓦片加载策略的矢量源的瓦片加载进度

Question

我正在使用Tile策略将特性加载到Vector源中。我想实现一种进度条，类似于http://openlayers.org/en/master/examples/tile-load-events.html.但是，与VectorTile源不同，Vector源不会触发瓦片加载事件，这些事件可用于计算所需比率100*（瓦片加载/瓦片到负载）。

到目前为止，我可以检索要加载的瓦片的总数，但我无法计算已加载的瓦片。最有前途的是一个自定义加载程序，但我不清楚如何在不接触原始OL源代码的情况下修改它。

var vectorSource = new ol.source.Vector({
   loader: ol.featureloader.xhrX(url, format),
   strategy: ol.loadingstrategy.tile(tileGrid)
});
// forked method, but the inner 'loadFeaturesXhr' method seems to be private and cannot be used
ol.featureloader.xhrX = function(url, format) {
   /*
      return ol.featureloader.loadFeaturesXhr(url, format,
         function(features, dataProjection) {
            this.addFeatures(features);
            // when tile loading succeeds
            tilesLoaded++;
         },
         function() {
            // when tile loading fails
            tilesLoaded++;
         });
   */
   // just returning the original loader
   return ol.featureloader.xhr(url, format);
}
var url = function(extent, resolution) {
   tilesToLoad++; // when a new tile is needed, this counter is incremented
   var tileCoord = tileGrid.getTileCoordForCoordAndResolution(ol.extent.getCenter(extent), resolution);
   return 'tiles/' +
      tileCoord[0] + '/' +
      tileCoord[1] + '/' +
      (Math.pow(2, tileCoord[0]) + tileCoord[2]) + '.json';
}
var format = new ol.format.GeoJSON({
   defaultDataProjection: 'EPSG:3857'
});

知道如何从我的源代码中调用loadFeaturesXhr（）方法吗？

Answer 1

我没有分叉默认的OL3加载程序，而是创建了一个自定义加载程序。这并没有想象中那么难。现在我可以自由地将计数器添加到适当的位置（在下面的代码中，我实际上更新了进度组件本身）：

var vectorSource = new ol.source.Vector({
   loader: function(extent, resolution, projection) {
      var getUrl = function(extent, resolution) {
         progress.addLoading();
         ...
      };
      var xhr = new XMLHttpRequest();
      xhr.open('GET', getUrl(extent, resolution), true);
      xhr.onload = function(event) {
         ...
         progress.addLoaded();
      }.bind(this);
      xhr.onerror = function(event) {
         progress.addLoaded();
      }
      xhr.send();
   },
   strategy: ol.loadingstrategy.tile(tileGrid)
});