@antv/l7-layers 2.25.10 → 2.28.10

package/lib/point/shaders/image/image_vert.glsl

@@ -17,6 +17,32 @@ out float v_opacity;
 #pragma include "projection"
 #pragma include "picking"
 
+// 根据 anchor 值计算点精灵的像素偏移
+// anchor: 0=center, 1=top, 2=top-right, 3=right, 4=bottom-right, 5=bottom, 6=bottom-left, 7=left, 8=top-left, 9=bottom-center
+vec2 applyAnchorPoint(float anchor, float pointSize) {
+  if (anchor < 0.5) {
+    return vec2(0.0);
+  }
+
+  vec2 offset = vec2(0.0);
+
+  // horizontal alignment: 左边缘对准坐标 -> 向右移; 右边缘对准坐标 -> 向左移
+  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {
+    offset.x = -pointSize * 0.5;
+  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {
+    offset.x = pointSize * 0.5;
+  }
+
+  // vertical alignment: 上边缘对准坐标 -> 向下移(图形在坐标下方); 下边缘对准坐标 -> 向上移(图形在坐标上方)
+  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {
+    offset.y = -pointSize * 0.5;
+  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {
+    offset.y = pointSize * 0.5;
+  }
+
+  return offset;
+}
+
 void main() {
   // cal style mapping - 数据纹理映射部分的计算
   v_color = a_Color;
@@ -43,5 +69,10 @@ void main() {
   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));
 
   gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
+
+  // apply anchor offset in screen space
+  vec2 anchorOffset = applyAnchorPoint(anchor, gl_PointSize);
+  gl_Position.xy += anchorOffset / u_ViewportSize * 2.0 * gl_Position.w;
+
   setPickingColor(a_PickingColor);
 }

package/lib/point/shaders/normal/normal_vert.glsl

@@ -12,6 +12,32 @@ out vec4 v_color;
 #pragma include "projection"
 #pragma include "project"
 
+// 根据 anchor 值计算点精灵的像素偏移
+// anchor: 0=center, 1=top, 2=top-right, 3=right, 4=bottom-right, 5=bottom, 6=bottom-left, 7=left, 8=top-left, 9=bottom-center
+vec2 applyAnchorPoint(float anchor, float pointSize) {
+  if (anchor < 0.5) {
+    return vec2(0.0);
+  }
+
+  vec2 offset = vec2(0.0);
+
+  // horizontal alignment: 左边缘对准坐标 -> 向右移; 右边缘对准坐标 -> 向左移
+  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {
+    offset.x = -pointSize * 0.5;
+  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {
+    offset.x = pointSize * 0.5;
+  }
+
+  // vertical alignment: 上边缘对准坐标 -> 向下移(图形在坐标下方); 下边缘对准坐标 -> 向上移(图形在坐标上方)
+  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {
+    offset.y = -pointSize * 0.5;
+  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {
+    offset.y = pointSize * 0.5;
+  }
+
+  return offset;
+}
+
 void main() {
   v_color = vec4(a_Color.xyz, a_Color.w * opacity);
 
@@ -19,4 +45,8 @@ void main() {
   gl_Position = project_common_position_to_clipspace(project_pos);
 
   gl_PointSize = a_Size * u_size_scale * 2.0 * u_DevicePixelRatio;
+
+  // apply anchor offset in screen space
+  vec2 anchorOffset = applyAnchorPoint(anchor, gl_PointSize);
+  gl_Position.xy += anchorOffset / u_ViewportSize * 2.0 * gl_Position.w;
 }

package/lib/point/shaders/radar/radar_vert.glsl

@@ -19,6 +19,34 @@ out vec2 v_extrude;
 #pragma include "projection"
 #pragma include "picking"
 
+// 根据 anchor 值计算 extrude 偏移
+// anchor: 0=center, 1=top, 2=top-right, 3=right, 4=bottom-right, 5=bottom, 6=bottom-left, 7=left, 8=top-left, 9=bottom-center
+vec2 applyAnchor(vec2 extrude, float anchor) {
+  if (anchor < 0.5) {
+    return extrude;
+  }
+
+  vec2 offset = vec2(0.0);
+
+  // horizontal alignment: 左边缘对准坐标 -> 向右移; 右边缘对准坐标 -> 向左移
+  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {
+    offset.x = -1.0;
+  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {
+    offset.x = 1.0;
+  }
+
+  // vertical alignment: 上边缘对准坐标 -> 向下移(图形在坐标下方); 下边缘对准坐标 -> 向上移(图形在坐标上方)
+  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {
+    // top, top-right, top-left -> shift down
+    offset.y = -1.0;
+  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {
+    // bottom-right, bottom, bottom-left, bottom-center -> shift up
+    offset.y = 1.0;
+  }
+
+  return extrude + offset;
+}
+
 void main() {
   float newSize = setPickingSize(a_Size);
 
@@ -27,7 +55,10 @@ void main() {
     cos(time), sin(time),
     -sin(time), cos(time)
   );
-  v_extrude = rotateMatrix * a_Extrude.xy;
+
+  // apply anchor to extrude direction before rotation
+  vec2 anchoredExtrude = applyAnchor(a_Extrude.xy, anchor);
+  v_extrude = rotateMatrix * anchoredExtrude;
 
   v_color = a_Color;
   v_color.a *= opacity;
@@ -40,11 +71,11 @@ void main() {
   }
   v_radius = newSize;
 
-  vec2 offset = (a_Extrude.xy * (newSize));
+  vec2 offset = (anchoredExtrude * (newSize));
 
   offset = project_pixel(offset);
 
-  v_data = vec4(a_Extrude.x, a_Extrude.y, antialiasblur, -1.0);
+  v_data = vec4(anchoredExtrude.x, anchoredExtrude.y, antialiasblur, -1.0);
 
   vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0), a_Position64Low);
   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));

package/lib/polygon/models/extrude.d.ts

@@ -10,9 +10,10 @@ export default class ExtrudeModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         SIZE: number;
         NORMAL: number;
         UV: number;

package/lib/polygon/models/extrusion.d.ts

@@ -10,9 +10,10 @@ export default class ExtrusionModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         SIZE: number;
         NORMAL: number;
         EXTRUSION_BASE: number;

package/lib/polygon/models/fill.d.ts

@@ -10,9 +10,10 @@ export default class FillModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         LINEAR: number;
     };
     getUninforms(): {

package/lib/polygon/models/ocean.d.ts

@@ -10,9 +10,10 @@ export default class OceanModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         UV: number;
     };
     private texture1;

package/lib/polygon/models/water.d.ts

@@ -10,9 +10,10 @@ export default class WaterModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         UV: number;
     };
     private texture;

package/lib/raster/models/raster.d.ts

@@ -10,9 +10,10 @@ export default class RasterModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         UV: number;
     };
     protected texture: ITexture2D;

package/lib/raster/models/rasterRgb.d.ts

@@ -10,9 +10,10 @@ export default class RasterModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         UV: number;
     };
     protected texture: ITexture2D;

package/lib/raster/models/rasterTerrainRgb.d.ts

@@ -10,9 +10,10 @@ export default class RasterTerrainRGB extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         UV: number;
     };
     protected texture: ITexture2D;

package/lib/tile/tile/Tile.d.ts

@@ -85,7 +85,7 @@ export default abstract class Tile extends EventEmitter implements ITile {
         pickBufferScale?: number | undefined;
         stencil?: boolean | undefined;
         debug?: boolean | undefined;
-        renderer?: "regl" | "device" | undefined;
+        renderer?: "device" | "regl" | undefined;
         antialias?: boolean | undefined;
         preserveDrawingBuffer?: boolean | undefined;
         enableWebGPU?: boolean | undefined;

package/lib/tile/tile/util.d.ts

@@ -1,5 +1,5 @@
 import LineLayer from '../../line';
 import PointLayer from '../../point/index';
 import PolygonLayer from '../../polygon';
-export declare function getTileLayer(type: string): typeof PolygonLayer | typeof LineLayer | typeof PointLayer;
+export declare function getTileLayer(type: string): typeof PointLayer | typeof PolygonLayer | typeof LineLayer;
 export declare function isNeedMask(type: string): boolean;

package/lib/utils/symbol-layout.d.ts

@@ -2,7 +2,7 @@ interface IPoint {
     x: number;
     y: number;
 }
-export type anchorType = 'right' | 'top-right' | 'left' | 'bottom-right' | 'left' | 'top-left' | 'bottom-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
+export type anchorType = 'center' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left' | 'bottom-center';
 export interface IGlyphQuad {
     tr: IPoint;
     tl: IPoint;

package/lib/utils/symbol-layout.js

@@ -28,14 +28,15 @@ function getAnchorAlignment(anchor) {
       horizontalAlign = 0.5;
   }
   switch (anchor) {
-    case 'bottom':
-    case 'bottom-right':
-    case 'bottom-left':
-      verticalAlign = 1;
-      break;
     case 'top':
     case 'top-right':
     case 'top-left':
+      verticalAlign = 1;
+      break;
+    case 'bottom':
+    case 'bottom-right':
+    case 'bottom-left':
+    case 'bottom-center':
       verticalAlign = 0;
       break;
     default:
@@ -66,9 +67,18 @@ function justifyLine(positionedGlyphs, glyphMap, start, end, justify) {
 // justify right=1 left=0 center=0.5
 // horizontalAlign right=1 left=0 center=0.5
 // verticalAlign right=1 left=0 center=0.5
-function align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lineCount) {
+function align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lineCount, yOffset) {
   const shiftX = (justify - horizontalAlign) * maxLineLength;
-  const shiftY = (-verticalAlign * lineCount + 0.5) * lineHeight;
+  let shiftY = (-verticalAlign * lineCount + 0.5) * lineHeight;
+
+  // 补偿 yOffset 使 top/bottom 锚点正确对齐
+  // top: 文字往下移 |yOffset| 像素（远离坐标点）
+  // bottom: 文字往上移 |yOffset| 像素（远离坐标点）
+  if (verticalAlign === 1) {
+    shiftY += yOffset;
+  } else if (verticalAlign === 0) {
+    shiftY -= yOffset;
+  }
   for (const glyphs of positionedGlyphs) {
     glyphs.x += shiftX;
     glyphs.y += shiftY;
@@ -114,7 +124,7 @@ function shapeLines(shaping, glyphMap, lines, lineHeight, textAnchor, textJustif
     horizontalAlign,
     verticalAlign
   } = getAnchorAlignment(textAnchor);
-  align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lines.length);
+  align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, lines.length, yOffset);
 
   // 计算包围盒
   const height = y - yOffset;
@@ -167,7 +177,7 @@ function shapeIconFont(shaping, glyphMap, iconfonts, lineHeight, textAnchor, tex
     horizontalAlign,
     verticalAlign
   } = getAnchorAlignment(textAnchor);
-  align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, iconfonts.length);
+  align(positionedGlyphs, justify, horizontalAlign, verticalAlign, maxLineLength, lineHeight, iconfonts.length, yOffset);
 
   // 计算包围盒
   const height = y - yOffset;

package/lib/wind/models/wind.d.ts

@@ -10,9 +10,10 @@ export default class WindModel extends BaseModel {
         readonly OPACITY: 5;
         readonly OFFSETS: 6;
         readonly ROTATION: 7;
-        readonly MAX: 8;
+        readonly ANCHOR: 8;
+        readonly MAX: 9;
     } & Record<string, number> & {
-        MAX: 8;
+        MAX: 9;
         UV: number;
     };
     protected texture: ITexture2D;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.25.10",
+  "version": "2.28.10",
   "description": "L7's collection of built-in layers",
   "license": "MIT",
   "author": "https://github.com/orgs/antvis/people",
@@ -26,15 +26,15 @@
     "earcut": "^2.2.1",
     "eventemitter3": "^4.0.0",
     "gl-matrix": "^3.1.0",
-    "@antv/l7-core": "2.25.10",
-    "@antv/l7-maps": "2.25.10",
-    "@antv/l7-utils": "2.25.10",
-    "@antv/l7-source": "2.25.10"
+    "@antv/l7-core": "2.28.10",
+    "@antv/l7-maps": "2.28.10",
+    "@antv/l7-source": "2.28.10",
+    "@antv/l7-utils": "2.28.10"
   },
   "devDependencies": {
     "@types/earcut": "^2.1.0",
     "@types/gl-matrix": "^2.4.5",
-    "@antv/l7-test-utils": "^2.25.10"
+    "@antv/l7-test-utils": "^2.28.10"
   },
   "publishConfig": {
     "access": "public",