Fix encode update (#2229)

* fix: encode update

* fix: encode update

dev-demos/features/point/pointEarthfill.md

@@ -90,14 +90,11 @@ export default () => {
                   y: 'latitude',
                 },
               })
-              .shape('name', [
-                'cylinder',
-                'triangleColumn',
-                'hexagonColumn',
-                'squareColumn',
-              ])
+              .shape('squareColumn')
               .active(true)
-              .size([1,1,5])
+             .size('unit_price', (h) => {
+            return [6, 6, 100];
+          })
               .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
               .style({
                 opacity:1,

examples/demos/bugfix/index.ts

@@ -1 +1,2 @@
-export { MapRender as color } from './color';
+export { MapRender as color } from './color';
+export { MapRender as size } from './size';

examples/demos/bugfix/size.ts

@@ -0,0 +1,62 @@
+import { Scene, PointLayer } from '@antv/l7';
+import * as allMap from '@antv/l7-maps';
+
+export function MapRender(option:{
+    map:string
+    renderer:string
+}) {
+    const scene = new Scene({
+        id: 'map',
+        renderer: option.renderer === 'device'? 'device' : 'regl',
+        map: new allMap[option.map || 'Map']({
+            style: 'light',
+            center: [121.435159, 31.256971],
+            zoom: 14.89,
+            minZoom: 10
+        })
+    });
+    scene.on('loaded', () => {
+        fetch(
+            'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
+        )
+            .then(res => res.json())
+            .then(data => {
+                const pointLayer = new PointLayer({})
+                    .source(data, {
+                        parser: {
+                            type: 'json',
+                            x: 'longitude',
+                            y: 'latitude'
+                        }
+                    })
+                    .shape('name', [
+                        'circle',
+                        'triangle',
+                        'square',
+                        'pentagon',
+                        'hexagon',
+                        'octogon',
+                        'hexagram',
+                        'rhombus',
+                        'vesica'
+                    ])
+                    .size('unit_price', [10, 25])
+                    .active(true)
+                    .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
+                    .style({
+                        opacity: 1,
+                        strokeWidth: 2
+                    });
+
+                scene.addLayer(pointLayer);
+                setTimeout(() => {
+                    console.log('start update')
+                    pointLayer.size(30)
+                    scene.render()
+                    console.log('update')
+
+                }, 1000);
+            });
+    });
+
+}

examples/demos/line/normal.ts

@@ -70,7 +70,7 @@ export function MapRender(option: {
       const source = new Source(geoData);
       const layer = new LineLayer({ blend: 'normal',autoFit: true})
         .source(source)
-        .size(10)
+        .size(1)
         .shape('line')
         .color('#f00')
         .style({
@@ -81,4 +81,9 @@ export function MapRender(option: {
         scene.addLayer(layer);
       });
 
+      setTimeout(() => {
+        layer.size(20)
+        scene.render()
+      },2000)
+
 }

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "dev": "vite dev",
     "dev_build": "vite build",
-    "dev-dumo": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev",
+    "dev-dumi": "export NODE_OPTIONS=--openssl-legacy-provider && dumi dev",
     "dev-device": "export NODE_OPTIONS=--openssl-legacy-provider renderer=device && dumi dev renderer=device",
     "dev_windows": "dumi dev",
     "dumi-build": "export NODE_OPTIONS=--openssl-legacy-provider && dumi build",

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

@@ -152,56 +152,124 @@ export default class LineModel extends BaseModel {
   }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
-      name: 'sizeDistanceAndTotalDistance',
+      name: 'distanceAndIndex',
       type: AttributeType.Attribute,
       descriptor: {
-        name: 'a_SizeDistanceAndTotalDistance',
-        shaderLocation: ShaderLocation.SIZE,
+        name: 'a_DistanceAndIndex',
+        shaderLocation: 10,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.STATIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 2,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+          normal: number[],
+          vertexIndex?: number,
+        ) => {
+          return vertexIndex === undefined
+            ? [vertex[3], 10]
+            : [vertex[3], vertexIndex];
+        },
+      },
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'total_distance',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Total_Distance',
+        shaderLocation: 11,
         buffer: {
+          // give the WebGL driver a hint that this buffer may change
           usage: gl.STATIC_DRAW,
           data: [],
           type: gl.FLOAT,
         },
-        size: 4,
+        size: 1,
         update: (
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
         ) => {
+          return [vertex[5]];
+        },
+      },
+    });
+
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: ShaderLocation.SIZE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 2,
+        update: (feature: IEncodeFeature) => {
           const { size = 1 } = feature;
-          const a_Size = Array.isArray(size)
-            ? [size[0], size[1]]
-            : [size as number, 0];
-          return [a_Size[0], a_Size[1], vertex[3], vertex[5]];
+          return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
         },
       },
     });
 
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({
-      name: 'normalAndMiter',
+      name: 'normal',
       type: AttributeType.Attribute,
       descriptor: {
-        name: 'a_NormalAndMiter',
+        name: 'a_Normal',
         shaderLocation: ShaderLocation.NORMAL,
         buffer: {
+          // give the WebGL driver a hint that this buffer may change
           usage: gl.STATIC_DRAW,
           data: [],
           type: gl.FLOAT,
         },
-        size: 4,
+        size: 3,
         update: (
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
           attributeIdx: number,
           normal: number[],
         ) => {
-          return [...normal, vertex[4]];
+          return normal;
         },
       },
     });
 
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'miter',
+      type: AttributeType.Attribute,
+      descriptor: {
+        shaderLocation: 15,
+        name: 'a_Miter',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.STATIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 1,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+        ) => {
+          return [vertex[4]];
+        },
+      },
+    });
+
     this.styleAttributeService.registerStyleAttribute({
       name: 'uv',
       type: AttributeType.Attribute,

packages/layers/src/line/shaders/line/line_vert.glsl

@@ -3,8 +3,11 @@
 
 layout(location = 0) in vec3 a_Position;
 layout(location = 1) in vec4 a_Color;
-layout(location = 9) in vec4 a_SizeDistanceAndTotalDistance;
-layout(location = 13) in vec4 a_NormalAndMiter;
+layout(location = 10) in vec2 a_DistanceAndIndex;
+layout(location = 9) in vec2 a_Size;
+layout(location = 11) in float a_Total_Distance;
+layout(location = 13) in vec3 a_Normal;
+layout(location = 15) in float a_Miter;
 layout(location = 14) in vec2 a_iconMapUV;
 
 layout(std140) uniform commonUniorm {
@@ -40,8 +43,8 @@ out vec4 v_texture_data;
 
 void main() {
   //dash输出
-  v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_SizeDistanceAndTotalDistance.a;
-  v_d_distance_ratio = a_SizeDistanceAndTotalDistance.b / a_SizeDistanceAndTotalDistance.a;
+  v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance;
+  v_d_distance_ratio = a_DistanceAndIndex.x / a_Total_Distance;
 
   // cal style mapping - 数据纹理映射部分的计算
   float d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
@@ -55,16 +58,16 @@ void main() {
   v_color.a *= opacity;
   v_stroke = stroke;
 
-  vec3 size = a_NormalAndMiter.w * setPickingSize(a_SizeDistanceAndTotalDistance.x) * reverse_offset_normal(a_NormalAndMiter.xyz);
+  vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
 
   vec2 offset = project_pixel(size.xy);
 
-  float lineDistance = a_SizeDistanceAndTotalDistance.b;
-  float currentLinePointRatio = lineDistance / a_SizeDistanceAndTotalDistance.a;
+  float lineDistance = a_DistanceAndIndex.x;
+  float currentLinePointRatio = lineDistance / a_Total_Distance;
 
 
-  float lineOffsetWidth = length(offset + offset * sign(a_NormalAndMiter.w)); // 线横向偏移的距离（向两侧偏移的和）
-  float linePixelSize = project_pixel(a_SizeDistanceAndTotalDistance.x) * 2.0;  // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2
+  float lineOffsetWidth = length(offset + offset * sign(a_Miter)); // 线横向偏移的距离（向两侧偏移的和）
+  float linePixelSize = project_pixel(a_Size.x) * 2.0;  // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2
   float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
 
   v_texture_data = vec4(currentLinePointRatio, lineDistance, d_texPixelLen, texV);
@@ -75,13 +78,13 @@ void main() {
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
 
   float h = float(a_Position.z) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况 vertex height
-  float lineHeight = a_SizeDistanceAndTotalDistance.y; // size 第二个参数代表的高度 [linewidth, lineheight]
+  float lineHeight = a_Size.y; // size 第二个参数代表的高度 [linewidth, lineheight]
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     lineHeight *= 0.2; // 保持和 amap/mapbox 一致的效果
     h *= 0.2;
     if(u_heightfixed < 1.0) {
-      lineHeight = project_pixel(a_SizeDistanceAndTotalDistance.y);
+      lineHeight = project_pixel(a_Size.y);
     }
     gl_Position = u_Mvp * (vec4(project_pos.xy + offset, lineHeight + h + u_raisingHeight, 1.0));
   } else {

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

@@ -149,26 +149,45 @@ export default class FillModel extends BaseModel {
       },
     });
 
-    // point layer size;
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'sizeAndShape',
+     // point layer size;
+     this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
       type: AttributeType.Attribute,
       descriptor: {
-        name: 'a_SizeAndShape',
+        name: 'a_Size',
         shaderLocation: ShaderLocation.SIZE,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,
           data: [],
           type: gl.FLOAT,
         },
-        size: 2,
+        size: 1,
         update: (feature: IEncodeFeature) => {
           const { size = 5 } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        },
+      },
+    });
+
+    // point layer shape;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'shape',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Shape',
+        shaderLocation: ShaderLocation.SHAPE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 1,
+        update: (feature: IEncodeFeature) => {
           const { shape = 2 } = feature;
           const shapeIndex = shape2d.indexOf(shape as string);
-          const a_Size =  Array.isArray(size) ? size[0] : size;
-          return [a_Size,shapeIndex]
+          return [shapeIndex];
         },
       },
     });