fix: Fix GeoJSONVectorTileLayer.clear() (#2625)

* fix: fix GeoJSONVectorTileLayer.clear()

* fixing vt specs

* fixing vt specs

Author: fuzhenn

packages/gl/src/layer/TileLayerGLRenderer.ts

@@ -370,6 +370,11 @@ class TileLayerGLRenderer2 extends TexturePoolable(CanvasCompatible(TileLayerRen
     deleteTerrainTexture(texture) {
         texture.destroy();
     }
+
+    clear() {
+        this.clearTileCaches();
+        super.clear();
+    }
 }
 
 maptalks.TileLayer.registerRenderer<typeof TileLayerGLRenderer2>('gl', TileLayerGLRenderer2);

packages/maptalks/src/layer/tile/TileLayer.ts

@@ -225,7 +225,7 @@ class TileLayer extends Layer {
     //@internal
     _polygonOffset: number;
     //@internal
-    _renderer: TileLayerCanvasRenderer;
+    _renderer: any;
     //record spatial reference in current rendering frame
     //@internal
     _spatialRef: SpatialReference;

packages/maptalks/src/renderer/layer/CanvasRenderer.ts

@@ -75,6 +75,11 @@ class CanvasRenderer extends LayerAbstractRenderer {
         Canvas2D.clearRect(this.context, 0, 0, Math.max(w, this.canvas.width), Math.max(h, this.canvas.height));
     }
 
+    clear() {
+        this.clearCanvas();
+        this.setToRedraw();
+    }
+
     /**
      * @english
      * Prepare the canvas for rendering. <br>

packages/maptalks/src/renderer/layer/LayerAbstractRenderer.ts

@@ -282,7 +282,8 @@ class LayerAbstractRenderer extends Class {
      * Clear canvas
      */
     clear(): void {
-        this.clearCanvas();
+        this.clearContext();
+        this.setToRedraw();
     }
 
     /**
@@ -829,7 +830,7 @@ class LayerAbstractRenderer extends Class {
     }
 
     clearCanvas() {
-
+        this.clearContext();
     }
 
     /**

packages/vt/src/layer/layer/VectorTileLayer.ts

@@ -1829,6 +1829,14 @@ class VectorTileLayer extends maptalks.TileLayer {
     super.onRemove();
   }
 
+  clear() {
+    const renderer = this.getRenderer();
+    if (renderer) {
+        renderer.clearData();
+    }
+    return super.clear();
+  }
+
   static fromJSON(layerJSON: object) {
     if (!layerJSON || layerJSON["type"] !== "VectorTileLayer") {
       return null;

packages/vt/src/layer/renderer/VectorTileLayerRenderer.js

@@ -71,6 +71,27 @@ class VectorTileLayerRenderer extends CanvasCompatible(TileLayerRendererable(Lay
         return this._styleCounter;
     }
 
+    clearData() {
+        this.clear();
+        if (!this._workerConn) {
+            this.layer.fire('cleardata');
+            return;
+        }
+        this._workersyncing = true;
+        this._workerConn.clearData(() => {
+            this._workersyncing = false;
+            this._needRetire = true;
+            this.setToRedraw();
+
+            this.layer.fire('cleardata');
+        });
+    }
+
+    clear() {
+        this.clearTileCaches();
+        super.clear();
+    }
+
     setStyle() {
         if (this._groundPainter) {
             this._groundPainter.update();

packages/vt/src/layer/renderer/worker/WorkerConnection.js

@@ -193,6 +193,16 @@ export default class WorkerConnection extends maptalks.worker.Actor {
         this.send(data, null, cb, this._dedicatedVTWorkers[layerId]);
     }
 
+    clearData(cb) {
+        const layerId = this._workerLayerId;
+        const data = {
+            mapId: this._mapId,
+            layerId,
+            command: 'clearData'
+        };
+        this.send(data, null, cb, this._dedicatedVTWorkers[layerId]);
+    }
+
     _getTileKey(tileInfo) {
         return tileInfo.id;
     }

packages/vt/src/worker/Dispatcher.js

@@ -118,6 +118,14 @@ export default class Dispatcher {
         }
     }
 
+    clearData({ mapId, layerId },callback) {
+        const layer = this._getLayerById(mapId, layerId);
+        if (layer) {
+            layer.clearData(callback);
+            this._resetCache();
+        }
+    }
+
     /**
      * Receive response from main thread and call callback
      * @param {Object} data

packages/vt/src/worker/layer/GeojsonLayerWorker.js

@@ -30,6 +30,10 @@ export default class GeoJSONLayerWorker extends BaseLayerWorker {
         this.setData(options.data, cb);
     }
 
+    clearData() {
+        delete this.index;
+    }
+
     /**
      * Set data
      * @param {Object} data

packages/vt/src/worker/layer/VectorTileLayerWorker.js

@@ -19,6 +19,10 @@ export default class VectorTileLayerWorker extends LayerWorker {
         callback();
     }
 
+    clearData() {
+        this._abortRequests();
+    }
+
     /**
      * Load a tile, paint and return gl directives
      * @param {Object} tileInfo  - tileInfo, url, xyz, res, extent, etc
@@ -150,6 +154,10 @@ export default class VectorTileLayerWorker extends LayerWorker {
 
     onRemove() {
         super.onRemove();
+        this._abortRequests();
+    }
+
+    _abortRequests() {
         for (const url in this.requests) {
             const xhr = this.requests[url];
             if (xhr && xhr.abort) {