Question

我正在使用Vector source将功能加载到Tile strategy。我想要实现一种类似于http://openlayers.org/en/master/examples/tile-load-events.html的进度条。但是，与VectorTile source不同，矢量源不会触发平铺加载事件，可用于计算所需的比率100 *（tilesLoaded / tilesToLoad）。

到目前为止，我可以检索要加载的切片总数，但我无法计算已加载的切片。最有希望的是自定义加载器，但我不清楚如何在不触及原始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)
});

使用切片加载策略的矢量源平铺加载进度

1 个答案: