fix: 修复 webgl context lost (#1243)

* feat: 修复 webgl context lost

* style: lint style

.storybook/preview.ts

@@ -22,7 +22,7 @@ addParameters({
 
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../stories', true, /\.stories\.tsx$/);
-// const req = require.context('../stories/tile', true, /\.stories\.tsx$/);
+// const req = require.context('../stories/Map', true, /\.stories\.tsx$/);
 
 function loadStories() {
   req.keys().forEach(req);

packages/maps/src/amap2/map.ts

@@ -39,7 +39,7 @@ window.forceWebGL = true;
 // const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
 const AMAP_API_KEY: string = 'ff533602d57df6f8ab3b0fea226ae52f';
 // const AMAP_VERSION: string = '1.4.15';
-const AMAP_VERSION: string = '2.0';
+const AMAP_VERSION: string = '2.0.5';
 /**
  * 确保多个场景只引入一个高德地图脚本
  */

packages/renderer/src/regl/index.ts

@@ -266,6 +266,10 @@ export default class ReglRendererService implements IRendererService {
     // this.canvas = null 清除对 webgl 实例的引用
     // @ts-ignore
     this.canvas = null;
+
+    // make sure release webgl context
+    this.gl?._gl?.getExtension('WEBGL_lose_context')?.loseContext();
+
     // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#clean-up
     this.gl.destroy();
 

stories/Map/components/bugfix.tsx

@@ -12,22 +12,35 @@ import {
   Popup,
   HeatmapLayer,
   LineLayer,
+  Source,
 } from '@antv/l7';
 
 export default class Amap2demo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
   public async componentDidMount() {
-    const scene = new Scene({
+    const source = new Source(
+      [
+        {
+          lng: 120,
+          lat: 30,
+        },
+      ],
+      {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
+      },
+    );
+
+    let c = 0,
+      scene,
+      layer;
+    scene = new Scene({
       id: 'map',
-      map: new Mapbox({
-        // map: new GaodeMap({
-        // map: new GaodeMapV2({
+      // map: new Mapbox({
+      // map: new GaodeMap({
+      map: new GaodeMapV2({
         // map: new Map({
         style: 'dark',
         center: [120, 30],
@@ -35,41 +48,14 @@ export default class Amap2demo extends React.Component {
       }),
     });
 
-    this.scene = scene;
-
-    const layer = new PointLayer({
-      visible: false,
-    })
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
+    const layer = new PointLayer()
+      .source(source)
       .shape('circle')
       .size(10)
       .color('#f00');
 
     scene.on('loaded', () => {
       scene.addLayer(layer);
-
-      setTimeout(() => {
-        layer.show();
-        layer.style({
-          opacity: 1,
-        });
-
-        console.log(layer.isVisible());
-      }, 3000);
     });
   }