fix: source empty err (#1332)

* fix: 修复 featureScale 错误

* style: lint style

* fix: remove featureScalePlugin async

* fix: fix empty source bug

* style: lint style

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>

dev-demos/features/earth/earth.md

@@ -0,0 +1,2 @@
+### earth
+<code src="./earth.tsx"></code>

dev-demos/features/earth/earth.tsx

@@ -0,0 +1,66 @@
+// @ts-ignore
+import { Scene, Earth, EarthLayer } from '@antv/l7';
+
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Earth({
+        center: [120, 30],
+        pitch: 0,
+        zoom: 3,
+      }),
+    });
+
+    const earthlayer = new EarthLayer()
+      .source(
+        'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
+        {
+          parser: {
+            type: 'image',
+          },
+        },
+      )
+      .shape('base')
+      .style({
+        globelOtions: {
+          ambientRatio: 0.6, // 环境光
+          diffuseRatio: 0.4, // 漫反射
+          specularRatio: 0.1, // 高光反射
+          // earthTime: 4.0
+          earthTime: 0.1,
+        },
+      })
+      .animate(true);
+    // earthlayer.setEarthTime(4.0)
+
+    const atomLayer = new EarthLayer()
+      .color('#2E8AE6')
+      .shape('atomSphere')
+      .style({
+        opacity: 1,
+      });
+
+    const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere');
+
+    scene.on('loaded', () => {
+      scene.addLayer(earthlayer);
+
+      scene.addLayer(atomLayer);
+      scene.addLayer(bloomLayer);
+
+      earthlayer.setEarthTime(4.0);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/features/geometry/sprite.md

@@ -0,0 +1,2 @@
+### sprite
+<code src="./sprite.tsx"></code>

dev-demos/features/geometry/sprite.tsx

@@ -0,0 +1,60 @@
+// @ts-ignore
+import { Scene, GeometryLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        // map: new GaodeMapV2({
+        // map: new Mapbox({
+        pitch: 40,
+        style: 'dark',
+        center: [120, 30],
+        zoom: 6,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      const layer = new GeometryLayer()
+        // .source([{x: 0, y: 0}], {parser: {type: 'json', x: 'x', y: 'y'}})
+        .shape('sprite')
+        .size(20)
+        .style({
+          // opacity: 0.3,
+          mapTexture:
+            'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*zLQwQKBSagYAAAAAAAAAAAAAARQnAQ', // snow
+          // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain
+          // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bq1cS7ADjR4AAAAAAAAAAAAAARQnAQ', // blub
+          center: [120, 30],
+          // spriteAnimate: 'up',
+          spriteCount: 60,
+          spriteRadius: 10,
+          spriteTop: 2500000,
+          spriteUpdate: 10000,
+          spriteScale: 0.8,
+
+          // spriteTop: 1000,
+          // spriteUpdate: 5,
+          // spriteBottom: -10,
+          // spriteScale: 0.6,
+        })
+        .active(true)
+        .color('#f00');
+
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

packages/core/src/services/layer/ILayerService.ts

@@ -269,6 +269,7 @@ export interface ILayer {
     data: any[],
     options: ISourceCFG | undefined,
   },
+  encodeDataLength: number;
   pickedFeatureID: number | null;
   hooks: {
     init: SyncBailHook;

packages/layers/src/Geometry/index.ts

@@ -6,6 +6,16 @@ export default class GeometryLayer extends BaseLayer<
   IGeometryLayerStyleOptions
 > {
   public type: string = 'GeometryLayer';
+  public defaultSourceConfig = {
+    data: [{ x: 0, y: 0 }],
+    options: {
+      parser: {
+        type: 'json',
+        x: 'x',
+        y: 'y',
+      },
+    },
+  };
   public buildModels() {
     const modelType = this.getModelType();
     this.layerModel = new GeometryModels[modelType](this);

packages/layers/src/core/BaseLayer.ts

@@ -77,6 +77,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   public selectedFeatureID: number | null = null;
   public styleNeedUpdate: boolean = false;
   public rendering: boolean;
+  public forceRender: boolean = false;
   public clusterZoom: number = 0; // 聚合等级标记
   public layerType?: string | undefined;
   public triangulation?: Triangulation | undefined;
@@ -84,7 +85,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   public defaultSourceConfig: {
     data: any[];
     options: ISourceCFG | undefined;
-  }={
+  } = {
     data: [],
     options: {
       parser: {
@@ -93,7 +94,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     },
   };
 
-
   public dataState: IDataState = {
     dataSourceNeedUpdate: false,
     dataMappingNeedUpdate: false,
@@ -696,10 +696,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
       this.tileLayer.render();
       return this;
     }
-    // TODO: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
+    if (this.encodeDataLength <= 0 && !this.forceRender) return this;
-    if (this.getEncodedData() && this.getEncodedData().length !== 0) {
+    // Tip: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
     this.renderModels();
-    }
     return this;
   }
 
@@ -707,7 +706,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
    * renderMultiPass 专门用于渲染支持 multipass 的 layer
    */
   public async renderMultiPass() {
-    if (this.getEncodedData() && this.getEncodedData().length !== 0) {
+    if (this.encodeDataLength <= 0 && !this.forceRender) return;
     if (this.multiPassRenderer && this.multiPassRenderer.getRenderFlag()) {
       // multi render 开始执行 multiPassRender 的渲染流程
       await this.multiPassRenderer.render();
@@ -718,7 +717,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
       this.renderModels();
     }
   }
-  }
 
   public active(options: IActiveOption | boolean) {
     const activeOption: Partial<ILayerConfig> = {};
@@ -1078,8 +1076,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     return this.scaleOptions;
   }
 
+  public encodeDataLength: number = 0;
   public setEncodedData(encodedData: IEncodeFeature[]) {
     this.encodedData = encodedData;
+    this.encodeDataLength = encodedData.length;
   }
   public getEncodedData() {
     return this.encodedData;
@@ -1294,7 +1294,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
 
   public renderModels(isPicking?: boolean) {
     // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
-    if (this.getEncodedData() && this.getEncodedData().length > 0) {
+    if (this.encodeDataLength <= 0 && !this.forceRender) return this;
+
     if (this.layerModelNeedUpdate && this.layerModel) {
       this.layerModel.buildModels((models: IModel[]) => {
         this.models = models;
@@ -1314,7 +1315,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
         isPicking,
       );
     });
-    }
     return this;
   }
 

packages/three/src/core/baseLayer.ts

@@ -39,6 +39,7 @@ export default class ThreeJSLayer
       },
     },
   };
+  public forceRender: boolean = true;
 
   public setUpdate(callback: () => void) {
     this.update = callback;
@@ -168,6 +169,7 @@ export default class ThreeJSLayer
     }
   }
   public renderModels() {
+    if (!this.threeRenderService) return this;
     if (this.isUpdate && this.update) {
       this.update();
     }