feat: 修复渲染顺序的隐藏 bug、替换 regl

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

@@ -172,6 +172,7 @@ export interface ILayer {
   get(name: string): number;
   setBlend(type: keyof typeof BlendType): void;
   // animate(field: string, option: any): ILayer;
+  renderLayers(): void;
   render(): ILayer;
   clear(): void;
   clearModels(): void;

packages/layers/src/core/BaseLayer.ts

@@ -70,6 +70,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   public pickedFeatureID: number | null = null;
   public selectedFeatureID: number | null = null;
   public styleNeedUpdate: boolean = false;
+  public rendering: boolean;
 
   public dataState: IDataState = {
     dataSourceNeedUpdate: false,
@@ -508,6 +509,17 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     return this;
   }
 
+  /**
+ * 渲染所有的图层
+ */
+  public renderLayers(): void {
+    this.rendering = true;
+
+    this.layerService.renderLayers();
+
+    this.rendering = false;
+  }
+
   public render(): ILayer {
     // if (
     //   this.needPick() &&

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

@@ -166,7 +166,9 @@ export default class ImageModel extends BaseModel {
       this.texture.update({
         data: this.iconService.getCanvas(),
       });
-      this.layer.render();
+      // this.layer.render();
+      // TODO: 更新完纹理后在更新的图层的时候需要更新所有的图层
+      this.layer.renderLayers();
       return;
     }
     this.texture = createTexture2D({

packages/map/src/handler/handler_manager.ts

@@ -329,6 +329,7 @@ class HandlerManager {
   public triggerRenderFrame() {
     if (this.frameId === undefined) {
       this.frameId = this.map.requestRenderFrame((timeStamp: number) => {
+        // @ts-ignore
         delete this.frameId;
         this.handleEvent(new RenderFrameEvent('renderFrame', { timeStamp }));
         this.applyChanges();

packages/map/src/util.ts

@@ -64,6 +64,7 @@ export const raf =
   window.requestAnimationFrame ||
   // @ts-ignore
   window.mozRequestAnimationFrame ||
+  // @ts-ignore
   window.webkitRequestAnimationFrame ||
   // @ts-ignore
   window.msRequestAnimationFrame;
@@ -72,6 +73,7 @@ export const cancel =
   window.cancelAnimationFrame ||
   // @ts-ignore
   window.mozCancelAnimationFrame ||
+  // @ts-ignore
   window.webkitCancelAnimationFrame ||
   // @ts-ignore
   window.msCancelAnimationFrame;

packages/renderer/package.json

@@ -31,7 +31,7 @@
     "inversify": "^5.0.1",
     "lodash": "^4.17.15",
     "reflect-metadata": "^0.1.13",
-    "regl": "^1.6.1"
+    "l7regl": "^0.0.10"
   },
   "gitHead": "7eb8382ede52d803fae13a85fe6af074400260ee",
   "publishConfig": {

packages/renderer/src/regl/ReglAttribute.ts

@@ -3,7 +3,7 @@ import {
   IAttributeInitializationOptions,
   IBuffer,
 } from '@antv/l7-core';
-import regl from 'regl';
+import regl from 'l7regl';
 import ReglBuffer from './ReglBuffer';
 
 /**

packages/renderer/src/regl/ReglBuffer.ts

@@ -1,5 +1,5 @@
 import { gl, IBuffer, IBufferInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import regl from 'l7regl';
 import { dataTypeMap, usageMap } from './constants';
 
 /**

packages/renderer/src/regl/ReglElements.ts

@@ -1,5 +1,5 @@
 import { gl, IElements, IElementsInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import regl from 'l7regl';
 import { dataTypeMap, usageMap } from './constants';
 
 /**

packages/renderer/src/regl/ReglFramebuffer.ts

@@ -5,7 +5,7 @@ import {
   IRenderbuffer,
   ITexture2D,
 } from '@antv/l7-core';
-import regl from 'regl';
+import regl from 'l7regl';
 import ReglTexture2D from './ReglTexture2D';
 
 /**

packages/renderer/src/regl/ReglModel.ts

@@ -7,7 +7,7 @@ import {
   IUniform,
 } from '@antv/l7-core';
 import { isPlainObject, isTypedArray } from 'lodash';
-import regl from 'regl';
+import regl from 'l7regl';
 import {
   blendEquationMap,
   blendFuncMap,

packages/renderer/src/regl/ReglRenderbuffer.ts

@@ -2,7 +2,7 @@ import {
   IRenderbuffer,
   IRenderbufferInitializationOptions,
 } from '@antv/l7-core';
-import regl from 'regl';
+import regl from 'l7regl';
 import { formatMap } from './constants';
 
 /**

packages/renderer/src/regl/ReglTexture2D.ts

@@ -1,5 +1,5 @@
 import { gl, ITexture2D, ITexture2DInitializationOptions } from '@antv/l7-core';
-import regl from 'regl';
+import regl from 'l7regl';
 import {
   colorSpaceMap,
   dataTypeMap,

packages/renderer/src/regl/__tests__/attribute.spec.ts

@@ -1,6 +1,6 @@
 import { gl } from '@antv/l7-core';
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import quad from '../../../../core/src/shaders/post-processing/quad.glsl';
 import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';

packages/renderer/src/regl/__tests__/elements.spec.ts

@@ -1,6 +1,6 @@
 import { gl } from '@antv/l7-core';
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import quad from '../../../../core/src/shaders/post-processing/quad.glsl';
 import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';

packages/renderer/src/regl/__tests__/framebuffer.spec.ts

@@ -1,6 +1,6 @@
 import { gl } from '@antv/l7-core';
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import quad from '../../../../core/src/shaders/post-processing/quad.glsl';
 import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';

packages/renderer/src/regl/__tests__/model.draw.spec.ts

@@ -1,6 +1,6 @@
 import { gl } from '@antv/l7-core';
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import quad from '../../../../core/src/shaders/post-processing/quad.glsl';
 import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';

packages/renderer/src/regl/__tests__/model.spec.ts

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import ReglModel from '../ReglModel';
 import createContext from './utils/create-context';
 

packages/renderer/src/regl/__tests__/model.uniform.spec.ts

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import ReglFramebuffer from '../ReglFramebuffer';
 import ReglModel from '../ReglModel';
 import ReglTexture2D from '../ReglTexture2D';
@@ -182,6 +182,7 @@ describe('uniforms in ReglModel', () => {
       },
       // @ts-ignore
       u_5: [
+        // @ts-ignore
         {
           c: 100, // 只修改第一个
         },

packages/renderer/src/regl/__tests__/renderer.spec.ts

@@ -1,6 +1,6 @@
 import { gl } from '@antv/l7-core';
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import copy from '../../../../core/src/shaders/post-processing/copy.glsl';
 import quad from '../../../../core/src/shaders/post-processing/quad.glsl';
 import { ReglRendererService } from '../../index';

packages/renderer/src/regl/__tests__/texture.spec.ts

@@ -1,6 +1,6 @@
 import { gl } from '@antv/l7-core';
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import copy from '../../../../core/src/shaders/post-processing/copy.glsl';
 import quad from '../../../../core/src/shaders/post-processing/quad.glsl';
 import ReglAttribute from '../ReglAttribute';

packages/renderer/src/regl/__tests__/utils/check-pixels.ts

@@ -1,4 +1,4 @@
-import regl from 'regl';
+import regl from 'l7regl';
 
 // borrow from https://github.com/regl-project/regl/blob/gh-pages/test/attributes.js#L303-L311
 export default function checkPixels(

packages/renderer/src/regl/constants.ts

@@ -2,7 +2,7 @@
  * @desc 由于 regl 使用大量字符串而非 WebGL 常量，因此需要映射
  */
 import { gl } from '@antv/l7-core';
-import regl from 'regl';
+import regl from 'l7regl';
 
 // @see https://github.com/regl-project/regl/blob/gh-pages/lib/constants/primitives.json
 export const primitiveMap: {

packages/renderer/src/regl/index.ts

@@ -23,7 +23,7 @@ import {
 } from '@antv/l7-core';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
-import regl from 'regl';
+import regl from 'l7regl';
 import ReglAttribute from './ReglAttribute';
 import ReglBuffer from './ReglBuffer';
 import ReglElements from './ReglElements';
@@ -80,6 +80,7 @@ export default class ReglRendererService implements IRendererService {
           if (err || !r) {
             reject(err);
           }
+          // @ts-ignore
           resolve(r);
         },
       });

packages/utils/src/dom.ts

@@ -109,6 +109,7 @@ export function getClass(el: ELType) {
   // Check if the element is an SVGElementInstance and use the correspondingElement instead
   // (Required for linked SVG elements in IE11.)
   if (el instanceof SVGElement) {
+    // @ts-ignore
     el = el.correspondingElement;
   }
   return el.className.baseVal === undefined

stories/customMap/components/Map.tsx

@@ -37,6 +37,35 @@ export default class ScaleComponent extends React.Component {
         zoom: 2,
       }),
     });
+    scene.addImage(
+      '00',
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+    );
+    let imageLayer = new PointLayer({
+      blend: 'normal',
+      zIndex: 2,
+    })
+      .source(
+        [
+          {
+            id: '5011000000404',
+            name: '铁路新村(华池路)',
+            longitude: 121.4216962,
+            latitude: 31.26082325,
+            unit_price: 71469.4,
+            count: 2,
+          },
+        ],
+        {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude',
+          },
+        },
+      )
+      .shape('name', ['00'])
+      .size(20);
     fetch(
       'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
     )
@@ -97,6 +126,10 @@ export default class ScaleComponent extends React.Component {
           });
         scene.addLayer(layer);
       });
+
+      scene.on('loaded', () => {
+        scene.addLayer(imageLayer);
+      });
   }
 
   public render() {