Merge pull request #1422 from OpenGeoscience/tile-layer-off-view

fix: Fix rendering tiles that started off-map

Author: manthey

src/tileLayer.js

@@ -718,6 +718,9 @@ var tileLayer = function (arg) {
       nTilesLevel = m_this.tilesAtZoom(level);
 
       if (!m_this._options.wrapX) {
+        if (start.x >= nTilesLevel.x || end.x < 0) {
+          continue;
+        }
         start.x = Math.min(Math.max(start.x, 0), nTilesLevel.x - 1);
         end.x = Math.min(Math.max(end.x, 0), nTilesLevel.x - 1);
         if (level === minLevel && m_this._options.keepLower) {
@@ -726,6 +729,9 @@ var tileLayer = function (arg) {
         }
       }
       if (!m_this._options.wrapY) {
+        if (start.y > nTilesLevel.y || end.y < 0) {
+          continue;
+        }
         start.y = Math.min(Math.max(start.y, 0), nTilesLevel.y - 1);
         end.y = Math.min(Math.max(end.y, 0), nTilesLevel.y - 1);
         if (level === minLevel && m_this._options.keepLower) {
@@ -1022,6 +1028,16 @@ var tileLayer = function (arg) {
     }
 
     delete m_this._activeTiles[hash];
+    if (m_lastTileSet && tile.index) {
+      const index = tile.index;
+      for (let idx = m_lastTileSet.length - 1; idx >= 0; idx -= 1) {
+        const lastTile = m_lastTileSet[idx];
+        if (lastTile.level === index.level && lastTile.x === index.x && lastTile.y === index.y && lastTile.reference === index.reference) {
+          m_lastTileSet.splice(idx, 1);
+          break;
+        }
+      }
+    }
     return value;
   };
 

tests/headed-cases/pixelmapLayer.js

@@ -19,9 +19,30 @@ describe('canvasPixelmapLayer', function () {
    *
    * @param {object} layerParams Optional layer parameters.
    */
-  function createPixelmap(layerParams) {
-    var params = geo.util.pixelCoordinateParams('#map', 4096, 4096, 2048, 2048);
+  function createPixelmap(layerParams, limitedArea) {
+    var params = geo.util.pixelCoordinateParams(
+      '#map', limitedArea ? 32768 : 4096, limitedArea ? 32768 : 4096,
+      2048, 2048);
     params.layer.url = '/data/pixelmap_{z}_{x}_{y}.png';
+    params.layer.keepLower = false;
+    if (limitedArea) {
+      params.layer.minLevel = 3;
+      params.layer.url = (x, y, z) => `../../data/pixelmap_${z - 3}_${y}_${x}.png`;
+      params.layer.tilesMaxBounds = (level) => {
+        var scale = Math.pow(2, params.layer.maxLevel - level);
+        return {
+          x: Math.floor(4096 / scale),
+          y: Math.floor(4096 / scale)
+        };
+      };
+      params.layer.tilesAtZoom = (level) => {
+        var scale = Math.pow(2, params.layer.maxLevel - level);
+        return {
+          x: Math.ceil(2 / scale),
+          y: Math.ceil(2 / scale)
+        };
+      };
+    }
     params.layer.data = new Array(5112).fill(0);
     params.layer.style = {
       color: (d, i) => {
@@ -41,6 +62,10 @@ describe('canvasPixelmapLayer', function () {
     }
     params.layer.renderer = 'canvas';
     map = geo.map(params.map);
+    if (limitedArea) {
+      map.zoom(2);
+      map.center({x: 30000, y: 30000});
+    }
     layer = map.createLayer('pixelmap', params.layer);
     map.draw();
   }
@@ -117,4 +142,16 @@ describe('canvasPixelmapLayer', function () {
       done();
     });
   });
+  it('limitedArea', function (done) {
+    createPixelmap(undefined, true);
+    map.onIdle(() => {
+      map.center({x: 0, y: 0});
+      map.onIdle(() => {
+        expect(layer instanceof geo.pixelmapLayer).toBe(true);
+        expect(layer.features().length).toBe(2);
+        map.center({x: 30000, y: 0});
+        map.onIdle(done);
+      });
+    });
+  });
 });