Merge pull request #745 from antvis/shihui_dev

Shihui dev

.gitignore

@@ -81,4 +81,9 @@ packages/l7/package_bak.json
 stories/Test
 packages/draw/node_modules/@turf
 packages/district/src/data
-yarn.lock
+yarn.lock
+
+# npm command lines
+publish.sh
+latest.sh
+beta.sh

beta.sh

@@ -1,11 +1,11 @@
-npm dist-tag add @antv/l7-component@2.5.4  beta
-npm dist-tag add @antv/l7-core@2.5.4  beta
-npm dist-tag add @antv/l7@2.5.4  beta
-npm dist-tag add @antv/l7-layers@2.5.4  beta
-npm dist-tag add @antv/l7-map@2.5.4  beta
-npm dist-tag add @antv/l7-maps@2.5.4  beta
-npm dist-tag add @antv/l7-renderer@2.5.4  beta
-npm dist-tag add @antv/l7-scene@2.5.4  beta
-npm dist-tag add @antv/l7-source@2.5.4  beta
-npm dist-tag add @antv/l7-three@2.5.4  beta
-npm dist-tag add @antv/l7-utils@2.5.4  beta
+npm dist-tag add @antv/l7-component@2.5.5  beta
+npm dist-tag add @antv/l7-core@2.5.5  beta
+npm dist-tag add @antv/l7@2.5.5  beta
+npm dist-tag add @antv/l7-layers@2.5.5  beta
+npm dist-tag add @antv/l7-map@2.5.5  beta
+npm dist-tag add @antv/l7-maps@2.5.5  beta
+npm dist-tag add @antv/l7-renderer@2.5.5  beta
+npm dist-tag add @antv/l7-scene@2.5.5  beta
+npm dist-tag add @antv/l7-source@2.5.5  beta
+npm dist-tag add @antv/l7-three@2.5.5  beta
+npm dist-tag add @antv/l7-utils@2.5.5  beta

latest.sh

@@ -1,11 +1,11 @@
-npm dist-tag add @antv/l7-component@2.4.4  latest
-npm dist-tag add @antv/l7-core@2.4.4  latest
-npm dist-tag add @antv/l7@2.4.4  latest
-npm dist-tag add @antv/l7-layers@2.4.4  latest
-npm dist-tag add @antv/l7-map@2.4.4  latest
-npm dist-tag add @antv/l7-maps@2.4.4  latest
-npm dist-tag add @antv/l7-renderer@2.4.4  latest
-npm dist-tag add @antv/l7-scene@2.4.4  latest
-npm dist-tag add @antv/l7-source@2.4.4  latest
-npm dist-tag add @antv/l7-three@2.4.4  latest
-npm dist-tag add @antv/l7-utils@2.4.4  latest
+npm dist-tag add @antv/l7-component@2.5.5  latest
+npm dist-tag add @antv/l7-core@2.5.5  latest
+npm dist-tag add @antv/l7@2.5.5  latest
+npm dist-tag add @antv/l7-layers@2.5.5  latest
+npm dist-tag add @antv/l7-map@2.5.5  latest
+npm dist-tag add @antv/l7-maps@2.5.5  latest
+npm dist-tag add @antv/l7-renderer@2.5.5  latest
+npm dist-tag add @antv/l7-scene@2.5.5  latest
+npm dist-tag add @antv/l7-source@2.5.5  latest
+npm dist-tag add @antv/l7-three@2.5.5  latest
+npm dist-tag add @antv/l7-utils@2.5.5  latest

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

@@ -6,8 +6,8 @@ import {
   IModelInitializationOptions,
   IUniform,
 } from '@antv/l7-core';
+import regl from 'l7regl';
 import { isPlainObject, isTypedArray } from 'lodash';
-import regl from 'regl';
 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 regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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 regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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 regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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 regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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 regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 import ReglModel from '../ReglModel';
 import createContext from './utils/create-context';
 

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

@@ -1,5 +1,5 @@
+import regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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 regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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 regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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

@@ -22,8 +22,8 @@ import {
   ITexture2DInitializationOptions,
 } from '@antv/l7-core';
 import { injectable } from 'inversify';
+import regl from 'l7regl';
 import 'reflect-metadata';
-import regl from 'regl';
 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

@@ -6,14 +6,30 @@ import * as React from 'react';
 
 export default class ScaleComponent extends React.Component {
   private scene: Scene;
+  private el: HTMLCanvasElement;
 
   public componentWillUnmount() {
     this.scene.destroy();
   }
 
+  public setCanvas() {
+    this.el.width = 400;
+    this.el.height = 300;
+    this.el.style.width = '300px';
+    this.el.style.height = '150px';
+    this.el.style.zIndex = '10';
+    this.el.style.position = 'absolute';
+    this.el.style.top = '0';
+    this.el.style.left = '0';
+    this.el.style.border = '1px solid';
+  }
+
   public async componentDidMount() {
+    this.setCanvas();
+
     const scene = new Scene({
       id: 'map',
+      // canvas: this.el,
       map: new Map({
         hash: true,
         center: [110.19382669582967, 30.258134],
@@ -21,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',
     )
@@ -81,6 +126,10 @@ export default class ScaleComponent extends React.Component {
           });
         scene.addLayer(layer);
       });
+
+    scene.on('loaded', () => {
+      scene.addLayer(imageLayer);
+    });
   }
 
   public render() {
@@ -94,7 +143,9 @@ export default class ScaleComponent extends React.Component {
           right: 0,
           bottom: 0,
         }}
-      />
+      >
+        <canvas ref={(el) => (this.el = el as HTMLCanvasElement)}></canvas>
+      </div>
     );
   }
 }