feat(layers): 点图层支持offset

fix #562

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

@@ -6,12 +6,17 @@ import pointExtrudeFrag from '../shaders/extrude_frag.glsl';
 import pointExtrudeVert from '../shaders/extrude_vert.glsl';
 interface IPointLayerStyleOptions {
   opacity: number;
+  offsets: [number, number];
 }
 export default class ExtrudeModel extends BaseModel {
   public getUninforms() {
-    const { opacity } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
+    const {
+      opacity,
+      offsets,
+    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     return {
       u_opacity: opacity || 1.0,
+      u_offsets: offsets || [0, 0],
     };
   }
   public initModels(): IModel[] {

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

@@ -19,6 +19,7 @@ interface IPointLayerStyleOptions {
   strokeWidth: number;
   stroke: string;
   strokeOpacity: number;
+  offsets: [number, number];
 }
 export default class FillModel extends BaseModel {
   public getUninforms(): IModelUniform {
@@ -27,12 +28,14 @@ export default class FillModel extends BaseModel {
       stroke = 'rgb(0,0,0,0)',
       strokeWidth = 1,
       strokeOpacity = 1,
+      offsets = [0, 0],
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     return {
       u_opacity: opacity,
       u_stroke_width: strokeWidth,
       u_stroke_color: rgb2arr(stroke),
       u_stroke_opacity: strokeOpacity,
+      u_offsets: [-offsets[0], offsets[1]],
     };
   }
   public getAnimateUniforms(): IModelUniform {

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

@@ -13,13 +13,17 @@ import pointImageFrag from '../shaders/image_frag.glsl';
 import pointImageVert from '../shaders/image_vert.glsl';
 interface IImageLayerStyleOptions {
   opacity: number;
+  offsets: [number, number];
 }
 
 export default class ImageModel extends BaseModel {
   private texture: ITexture2D;
 
   public getUninforms(): IModelUniform {
-    const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
+    const {
+      opacity,
+      offsets = [0, 0],
+    } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
     if (this.rendererService.getDirty()) {
       this.texture.bind();
     }
@@ -27,6 +31,7 @@ export default class ImageModel extends BaseModel {
       u_opacity: opacity || 1.0,
       u_texture: this.texture,
       u_textSize: [1024, this.iconService.canvasHeight || 128],
+      u_offsets: [-offsets[0], offsets[1]],
     };
   }
 

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

@@ -17,6 +17,7 @@ interface IPointLayerStyleOptions {
   opacity: number;
   strokeWidth: number;
   stroke: string;
+  offsets: [number, number];
 }
 export function PointTriangulation(feature: IEncodeFeature) {
   const coordinates = feature.coordinates as number[];
@@ -38,11 +39,13 @@ export default class NormalModel extends BaseModel {
       opacity = 1,
       stroke = 'rgb(0,0,0,0)',
       strokeWidth = 1,
+      offsets = [0, 0],
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     return {
       u_opacity: opacity,
       u_stroke_width: strokeWidth,
       u_stroke_color: rgb2arr(stroke),
+      u_offsets: [-offsets[0], offsets[1]],
     };
   }
 

packages/layers/src/point/shaders/extrude_vert.glsl

@@ -11,6 +11,7 @@ attribute vec3 a_Size;
 attribute vec3 a_Normal;
 
 uniform mat4 u_ModelMatrix;
+uniform vec2 u_offsets;
 varying vec4 v_color;
 
 #pragma include "projection"
@@ -23,6 +24,7 @@ void main() {
   vec2 offset = project_pixel(size.xy);
 
   vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));
+
   vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z), 1.0);
 
   float lightWeight = calc_lighting(pos);

packages/layers/src/point/shaders/fill_vert.glsl

@@ -6,6 +6,7 @@ attribute float a_Shape;
 uniform mat4 u_ModelMatrix;
 
 uniform float u_stroke_width : 2;
+uniform vec2 u_offsets;
 
 varying vec4 v_data;
 varying vec4 v_color;
@@ -26,7 +27,7 @@ void main() {
   // radius(16-bit)
   v_radius = newSize;
 
-  vec2 offset = project_pixel(extrude * (newSize + u_stroke_width));
+  vec2 offset = project_pixel(extrude * (newSize + u_stroke_width) + u_offsets);
   vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
 
   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));

packages/layers/src/point/shaders/image_vert.glsl

@@ -7,6 +7,7 @@ varying vec4 v_color;
 varying vec2 v_uv;
 uniform mat4 u_ModelMatrix;
 uniform float u_stroke_width : 1;
+uniform vec2 u_offsets;
 varying float v_size;
 
 #pragma include "projection"
@@ -17,8 +18,8 @@ void main() {
    v_uv = a_Uv;
    vec4 project_pos = project_position(vec4(a_Position, 1.0));
    v_size = a_Size;
-
-   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+   vec2 offset = project_pixel(u_offsets);
+   gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy + offset) project_pos.z, 1.0));
    gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
 
   setPickingColor(a_PickingColor);

packages/layers/src/point/shaders/normal_frag.glsl

@@ -1,6 +1,8 @@
 
 uniform float u_opacity : 1;
+uniform vec2 u_offsets;
 varying vec4 v_color;
+
 #pragma include "picking"
 void main() {
   gl_FragColor = v_color;

packages/layers/src/point/shaders/normal_vert.glsl

@@ -4,12 +4,16 @@ uniform mat4 u_ModelMatrix;
 attribute float a_Size;
 attribute vec4 a_Color;
 varying vec4 v_color;
+
+uniform vec2 u_offsets;
+
 #pragma include "projection"
 #pragma include "picking"
 void main() {
   v_color = a_Color;
+  vec2 offset = project_pixel(u_offsets);
   vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);
-  gl_Position = project_common_position_to_clipspace(project_pos);
+  gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));
   gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
     setPickingColor(a_PickingColor);
 }

stories/Layers/components/AnimatePoint.tsx

@@ -41,11 +41,29 @@ export default class AnimatePoint extends React.Component {
           .animate(true)
           .size(40)
           .color('#ffa842')
+          .style({
+            opacity: 1,
+            offsets: [40, 40],
+          });
+        const pointLayer2 = new PointLayer({})
+          .source(data, {
+            parser: {
+              type: 'csv',
+              x: 'Longitude',
+              y: 'Latitude',
+            },
+          })
+          .shape('circle')
+          .active(true)
+          .animate(true)
+          .size(10)
+          .color('#f00')
           .style({
             opacity: 1,
           });
 
         scene.addLayer(pointLayer);
+        scene.addLayer(pointLayer2);
       });
 
     this.scene = scene;
@@ -61,7 +79,7 @@ export default class AnimatePoint extends React.Component {
           left: 0,
           right: 0,
           bottom: 0,
-          transform: 'scale(1.5)',
+          // transform: 'scale(1.5)',
         }}
       />
     );

tsconfig.json

@@ -29,7 +29,7 @@
       "@antv/l7-mini": ["packages/mini/src"],
       "@antv/l7-utils": ["packages/utils/src"],
       "@antv/l7": ["packages/l7/src"],
-      "*": ["node_modules", "packages", "typings/*"]
+      "*": ["packages", "typings/*"]
     },
   },
   "awesomeTypescriptLoaderOptions": {

tslint.json

@@ -20,5 +20,8 @@
   },
   "globals": {
     "AMap": true
+  },
+  "linterOptions": {
+    "exclude": ["**/*.d.ts", "**/data/*.ts", "**/*.{test,story}.ts{,x}", "node_modules/**"]
   }
 }

tslint.prod.json

@@ -5,6 +5,6 @@
     "no-implicit-dependencies": false
   },
   "linterOptions": {
-    "exclude": ["**/*.d.ts", "**/data/*.ts", "**/*.{test,story}.ts{,x}"]
+    "exclude": ["**/*.d.ts", "**/data/*.ts", "**/*.{test,story}.ts{,x}", "node_modules/**/*.d.ts"]
   }
 }