feat: add text point rotate function

examples/point/text/demo/point_text.js

@@ -24,6 +24,9 @@ scene.on('loaded', () => {
         })
         .shape('m', 'text')
         .size(12)
+        // .rotate("j",()=>{
+        //   return  Math.random()*3*(Math.random()>0.5?1:-1)
+        // })
         .color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
         .style({
           textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left

packages/layers/src/core/BaseLayer.ts

@@ -368,6 +368,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     return this;
   }
 
+  public rotate(
+    field: StyleAttributeField,
+    values?: StyleAttributeOption,
+    updateOptions?: Partial<IStyleAttributeUpdateOptions>,
+  ) {
+    this.updateStyleAttribute('rotate', field, values, updateOptions);
+    return this;
+  }
   public size(
     field: StyleAttributeField,
     values?: StyleAttributeOption,

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

@@ -193,6 +193,28 @@ export default class TextModel extends BaseModel {
     this.layer.off('remapping', this.buildModels);
   }
   protected registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'rotate',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Rotate',
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 1,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+          attributeIdx: number,
+        ) => {
+          const { rotate = 0 } = feature;
+          return Array.isArray(rotate) ? [rotate[0]] : [rotate as number];
+        },
+      },
+    });
     this.styleAttributeService.registerStyleAttribute({
       name: 'textOffsets',
       type: AttributeType.Attribute,

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

@@ -6,6 +6,7 @@ attribute vec2 a_tex;
 attribute vec2 a_textOffsets;
 attribute vec4 a_Color;
 attribute float a_Size;
+attribute float a_Rotate;
 
 uniform vec2 u_sdf_map_size;
 uniform mat4 u_ModelMatrix;
@@ -28,9 +29,11 @@ void main() {
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
 
   vec4 projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
-
+ highp float angle_sin = sin(a_Rotate);
+ highp float angle_cos = cos(a_Rotate);
+ mat2 rotation_matrix = mat2(angle_cos, -1.0 * angle_sin, angle_sin, angle_cos);
   gl_Position = vec4(projected_position.xy / projected_position.w
-    + a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
+    + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
   v_gamma_scale = gl_Position.w;
   setPickingColor(a_PickingColor);