feat: 处理 dataTesture 未回收导致的bug

packages/layers/src/line/models/arc.ts

@@ -125,9 +125,8 @@ export default class ArcModel extends BaseModel {
   }
 
   public clearModels() {
-    if (this.texture) {
+    this.texture?.destroy();
-      this.texture.destroy();
+    this.dataTexture?.destroy();
-    }
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 

packages/layers/src/line/models/arc_3d.ts

@@ -120,9 +120,8 @@ export default class Arc3DModel extends BaseModel {
   }
 
   public clearModels() {
-    if (this.texture) {
+    this.texture?.destroy();
-      this.texture.destroy();
+    this.dataTexture?.destroy();
-    }
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 

packages/layers/src/line/models/great_circle.ts

@@ -122,9 +122,8 @@ export default class GreatCircleModel extends BaseModel {
   }
 
   public clearModels() {
-    if (this.texture) {
+    this.texture?.destroy();
-      this.texture.destroy();
+    this.dataTexture?.destroy();
-    }
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 

packages/layers/src/line/models/line.ts

@@ -133,9 +133,8 @@ export default class LineModel extends BaseModel {
   }
 
   public clearModels() {
-    if (this.texture) {
+    this.texture?.destroy();
-      this.texture.destroy();
+    this.dataTexture?.destroy();
-    }
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 

packages/layers/src/point/models/extrude.ts

@@ -73,6 +73,9 @@ export default class ExtrudeModel extends BaseModel {
       }),
     ];
   }
+  public clearModels() {
+    this.dataTexture?.destroy();
+  }
   protected registerBuiltinAttributes() {
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({

packages/layers/src/point/models/fill.ts

@@ -133,6 +133,11 @@ export default class FillModel extends BaseModel {
       }),
     ];
   }
+
+  public clearModels() {
+    this.dataTexture?.destroy();
+  }
+
   protected animateOption2Array(option: IAnimateOption): number[] {
     return [option.enable ? 0 : 1.0, option.speed || 1, option.rings || 3, 0];
   }

packages/layers/src/point/models/icon-font.ts

@@ -50,6 +50,10 @@ export default class IconeModel extends BaseModel {
     ];
   }
 
+  public clearModels() {
+    this.dataTexture?.destroy();
+  }
+
   protected registerBuiltinAttributes() {
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({

packages/layers/src/point/models/image.ts

@@ -88,9 +88,8 @@ export default class ImageModel extends BaseModel {
   }
 
   public clearModels() {
-    if (this.texture) {
+    this.texture?.destroy();
-      this.texture.destroy();
+    this.dataTexture?.destroy();
-    }
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 

packages/layers/src/point/models/normal.ts

@@ -110,6 +110,10 @@ export default class NormalModel extends BaseModel {
     ];
   }
 
+  public clearModels() {
+    this.dataTexture?.destroy();
+  }
+
   protected registerBuiltinAttributes() {
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({

packages/layers/src/point/models/text.ts

@@ -241,6 +241,7 @@ export default class TextModel extends BaseModel {
   }
 
   public clearModels() {
+    this.dataTexture?.destroy();
     this.layer.off('remapping', this.buildModels);
   }
   protected registerBuiltinAttributes() {
@@ -516,6 +517,7 @@ export default class TextModel extends BaseModel {
     if (this.texture) {
       this.texture.destroy();
     }
+
     this.texture = createTexture2D({
       data: canvas,
       mag: gl.LINEAR,

packages/layers/src/polygon/models/extrude.ts

@@ -66,6 +66,10 @@ export default class ExtrudeModel extends BaseModel {
     ];
   }
 
+  public clearModels() {
+    this.dataTexture?.destroy();
+  }
+
   protected registerBuiltinAttributes() {
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({

packages/layers/src/polygon/models/fill.ts

@@ -79,6 +79,10 @@ export default class FillModel extends BaseModel {
     ];
   }
 
+  public clearModels() {
+    this.dataTexture?.destroy();
+  }
+
   protected registerBuiltinAttributes() {
     // point layer size;
   }

stories/Map/components/amap2demo_textOffset.tsx

@@ -1,66 +1,16 @@
 import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
+import { GaodeMap, Map as customMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
-export default class Amap2demo_textOffset extends React.Component {
+export default class Amap2demo_textOffset extends React.Component<
-  // @ts-ignore
+  { navList?: any },
-  private scene: Scene;
+  { originData?: any }
-
+> {
-  public componentWillUnmount() {
+  public pointIconFontLayer: any;
-    this.scene.destroy();
+  public textLayer: any;
-  }
+  constructor(props: any) {
-
+    super(props);
-  public async componentDidMount() {
+    this.state = {
-    const scene = new Scene({
+      originData: [
-      id: 'map',
-      map: new GaodeMap({
-        center: [121, 30.5],
-        pitch: 0,
-        style: 'dark',
-        zoom: 9,
-        zooms: [8, 10],
-      }),
-    });
-    let originData = [
-      {
-        lng: 120,
-        lat: 30,
-        iconType: 'sun',
-        iconColor: '#FFA500',
-        weather: '晴朗',
-        textOffset: [10, 0],
-      },
-      {
-        lng: 120.2,
-        lat: 30.5,
-        iconType: 'sun',
-        iconColor: '#FFA500',
-        weather: '晴朗 - 高温预警',
-        textOffset: [-25, 0],
-      },
-      {
-        lng: 121.5,
-        lat: 31.4,
-        iconType: 'cloud',
-        iconColor: '#F0F8FF',
-        weather: '多云',
-        textOffset: [10, 0],
-      },
-      {
-        lng: 120,
-        lat: 31,
-        iconType: 'cloud',
-        iconColor: '#F0F8FF',
-        weather: '多云 - 温度适宜',
-        textOffset: [-25, 0],
-      },
-      {
-        lng: 120.6,
-        lat: 30.8,
-        iconType: 'cloud',
-        iconColor: '#F0F8FF',
-        weather: '多云',
-        textOffset: [10, 0],
-      },
         {
           lng: 120.5,
           lat: 31.3,
@@ -69,55 +19,127 @@ export default class Amap2demo_textOffset extends React.Component {
           weather: '多云 - 今日适宜出门',
           textOffset: [-40, 0],
         },
-      {
+      ],
-        lng: 121.3,
+    };
-        lat: 30.2,
+  }
-        iconType: 'smallRain',
+  // @ts-ignore
-        iconColor: '#6EA0FF',
+  private scene: Scene;
-        weather: '中雨转小雨',
+
-        textOffset: [-10, 0],
+  public componentWillUnmount() {
-      },
+    this.scene.destroy();
-      {
+  }
-        lng: 121,
+
-        lat: 30.5,
+  public componentDidMount() {
-        iconType: 'smallRain',
+    const scene = new Scene({
-        iconColor: '#6EA0FF',
+      id: 'map',
-        weather: '小雨',
+      map: new GaodeMap({
-        textOffset: [10, 0],
+        // hash: true,
-      },
+        center: [121, 30.5],
-      {
+        pitch: 0,
-        lng: 120.6,
+        style: 'dark',
-        lat: 30,
+        zoom: 9,
-        iconType: 'middleRain',
+        zooms: [8, 10],
-        iconColor: '#6495ED',
+      }),
-        weather: '中雨',
+    });
-        textOffset: [10, 0],
+    // let originData = [
-      },
+    //   {
-      {
+    //     lng: 120,
-        lng: 120.2,
+    //     lat: 30,
-        lat: 29.7,
+    //     iconType: 'sun',
-        iconType: 'smallRain',
+    //     iconColor: '#FFA500',
-        iconColor: '#6EA0FF',
+    //     weather: '晴朗',
-        weather: '小雨',
+    //     textOffset: [10, 0],
-        textOffset: [10, 0],
+    //   },
-      },
+    //   {
-      {
+    //     lng: 120.2,
-        lng: 121.7,
+    //     lat: 30.5,
-        lat: 29.8,
+    //     iconType: 'sun',
-        iconType: 'middleRain',
+    //     iconColor: '#FFA500',
-        iconColor: '#6495ED',
+    //     weather: '晴朗 - 高温预警',
-        weather: '大雨转中雨',
+    //     textOffset: [-25, 0],
-        textOffset: [-15, 0],
+    //   },
-      },
+    //   {
-      {
+    //     lng: 121.5,
-        lng: 121.5,
+    //     lat: 31.4,
-        lat: 30,
+    //     iconType: 'cloud',
-        iconType: 'hugeRain',
+    //     iconColor: '#F0F8FF',
-        iconColor: '#4678D2',
+    //     weather: '多云',
-        weather: '大雨',
+    //     textOffset: [10, 0],
-        textOffset: [10, 0],
+    //   },
-      },
+    //   {
-    ];
+    //     lng: 120,
+    //     lat: 31,
+    //     iconType: 'cloud',
+    //     iconColor: '#F0F8FF',
+    //     weather: '多云 - 温度适宜',
+    //     textOffset: [-25, 0],
+    //   },
+    //   {
+    //     lng: 120.6,
+    //     lat: 30.8,
+    //     iconType: 'cloud',
+    //     iconColor: '#F0F8FF',
+    //     weather: '多云',
+    //     textOffset: [10, 0],
+    //   },
+    //   {
+    //     lng: 120.5,
+    //     lat: 31.3,
+    //     iconType: 'cloud',
+    //     iconColor: '#F0F8FF',
+    //     weather: '多云 - 今日适宜出门',
+    //     textOffset: [-40, 0],
+    //   },
+    //   {
+    //     lng: 121.3,
+    //     lat: 30.2,
+    //     iconType: 'smallRain',
+    //     iconColor: '#6EA0FF',
+    //     weather: '中雨转小雨',
+    //     textOffset: [-10, 0],
+    //   },
+    //   {
+    //     lng: 121,
+    //     lat: 30.5,
+    //     iconType: 'smallRain',
+    //     iconColor: '#6EA0FF',
+    //     weather: '小雨',
+    //     textOffset: [10, 0],
+    //   },
+    //   {
+    //     lng: 120.6,
+    //     lat: 30,
+    //     iconType: 'middleRain',
+    //     iconColor: '#6495ED',
+    //     weather: '中雨',
+    //     textOffset: [10, 0],
+    //   },
+    //   {
+    //     lng: 120.2,
+    //     lat: 29.7,
+    //     iconType: 'smallRain',
+    //     iconColor: '#6EA0FF',
+    //     weather: '小雨',
+    //     textOffset: [10, 0],
+    //   },
+    //   {
+    //     lng: 121.7,
+    //     lat: 29.8,
+    //     iconType: 'middleRain',
+    //     iconColor: '#6495ED',
+    //     weather: '大雨转中雨',
+    //     textOffset: [-15, 0],
+    //   },
+    //   {
+    //     lng: 121.5,
+    //     lat: 30,
+    //     iconType: 'hugeRain',
+    //     iconColor: '#4678D2',
+    //     weather: '大雨',
+    //     textOffset: [10, 0],
+    //   },
+    // ];
+
     let fontFamily = 'iconfont';
     let fontPath =
       '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
@@ -129,17 +151,38 @@ export default class Amap2demo_textOffset extends React.Component {
       ['cloud', '&#xe8da;'],
     ]);
     scene.addFontFace(fontFamily, fontPath);
-
+    // console.log(this.state.originData)
     this.scene = scene;
     scene.on('loaded', () => {
-      const pointIconFontLayer = new PointLayer({})
+      this.pointIconFontLayer = new PointLayer({})
-        .source(originData, {
+        // @ts-ignore
+        .source(
+          [
+            {
+              lng: 120.5,
+              lat: 31.3,
+              iconType: 'cloud',
+              iconColor: '#F0F8FF',
+              weather: '多云 - 今日适宜出门',
+              textOffset: [-40, 0],
+            },
+            {
+              lng: 120.5,
+              lat: 31.1,
+              iconType: 'cloud',
+              iconColor: '#F0F8FF',
+              weather: '多云 - 今日适宜出门',
+              textOffset: [-40, 0],
+            },
+          ],
+          {
             parser: {
               type: 'json',
               x: 'lng',
               y: 'lat',
             },
-        })
+          },
+        )
         .shape('iconType', 'text')
         .size(30)
         .color('iconColor')
@@ -150,19 +193,39 @@ export default class Amap2demo_textOffset extends React.Component {
           iconfont: true,
           textAllowOverlap: true,
         });
-      scene.addLayer(pointIconFontLayer);
+      scene.addLayer(this.pointIconFontLayer);
 
-      const textLayer = new PointLayer({})
+      this.textLayer = new PointLayer({})
-        .source(originData, {
+        .source(
+          [
+            {
+              lng: 120.5,
+              lat: 31.3,
+              iconType: 'cloud',
+              iconColor: '#F0F8FF',
+              weather: '多云 - 今日适宜出门',
+              textOffset: [-40, 0],
+            },
+            {
+              lng: 120.5,
+              lat: 31.1,
+              iconType: 'cloud',
+              iconColor: '#F0F8FF',
+              weather: '多云 - 今日适宜出门',
+              textOffset: [-40, 0],
+            },
+          ],
+          {
             parser: {
               type: 'json',
               x: 'lng',
               y: 'lat',
             },
-        })
+          },
+        )
         .shape('weather', 'text')
         .size(16)
-        .color('#fff')
+        .color('#f00')
         .style({
           textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
           textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
@@ -171,13 +234,63 @@ export default class Amap2demo_textOffset extends React.Component {
           fontFamily: 'Times New Roman',
           textAllowOverlap: true,
         });
-      scene.addLayer(textLayer);
+      scene.addLayer(this.textLayer);
     });
   }
 
+  changeData = () => {
+    console.log('changeData');
+
+    // this.textLayer.source([ {
+    //   lng: 120.5,
+    //   lat: 31.3,
+    //   iconType: 'cloud',
+    //   iconColor: '#F0F8FF',
+    //   weather: '多云 - 今日适宜出',
+    //   textOffset: [-40, 0],
+    // }], {
+    //   parser: {
+    //     type: 'json',
+    //     x: 'lng',
+    //     y: 'lat',
+    //   },
+    // })
+    this.textLayer.setData([
+      {
+        lng: 120.5,
+        lat: 31.3,
+        iconType: 'cloud',
+        iconColor: '#F0F8FF',
+        weather: '多云 - ' + Math.random(),
+        textOffset: [-40, 0],
+      },
+      {
+        lng: 120.5,
+        lat: 31.1,
+        iconType: 'cloud',
+        iconColor: '#F0F8FF',
+        weather: '多云2 - ' + Math.random(),
+        textOffset: [-40, 0],
+      },
+    ]);
+    // this.textLayer.render()
+    // this.scene.render()
+  };
+
   public render() {
     return (
       <>
+        <button
+          style={{
+            position: 'absolute',
+            right: '100px',
+            top: '100px',
+            zIndex: 10,
+          }}
+          onClick={this.changeData}
+        >
+          123
+        </button>
         <div
           id="map"
           style={{

stories/customMap/components/Map.tsx

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { Scene } from '@antv/l7';
-import { PolygonLayer } from '@antv/l7-layers';
+import { PolygonLayer, PointLayer } from '@antv/l7-layers';
 import { Map } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -26,6 +26,39 @@ export default class ScaleComponent extends React.Component {
     )
       .then((res) => res.json())
       .then((data) => {
+        const textLayer = new PointLayer({})
+          .source(
+            [
+              {
+                lng: 120.5,
+                lat: 31.3,
+                iconType: 'cloud',
+                iconColor: '#F0F8FF',
+                weather: '多云 - 今日适宜出门',
+                textOffset: [-40, 0],
+              },
+            ],
+            {
+              parser: {
+                type: 'json',
+                x: 'lng',
+                y: 'lat',
+              },
+            },
+          )
+          .shape('weather', 'text')
+          .size(16)
+          .color('#f00')
+          .style({
+            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
+            spacing: 2, // 字符间距
+            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            fontFamily: 'Times New Roman',
+            textAllowOverlap: true,
+          });
+        scene.addLayer(textLayer);
+
         const layer = new PolygonLayer({
           name: '01',
         });