@antv/l7-layers 2.28.12 → 2.28.13

package/es/point/models/text.js

@@ -1,43 +1,125 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { AttributeType, gl } from '@antv/l7-core';
 import { boundsContains, calculateCentroid, lodashUtil, padBounds, rgb2arr } from '@antv/l7-utils';
 import BaseModel from "../../core/BaseModel";
 import CollisionIndex from "../../utils/collision-index";
 import { getGlyphQuads, shapeText } from "../../utils/symbol-layout";
 /* babel-plugin-inline-import '../shaders/text/text_frag.glsl' */
-const textFrag = "#define SDF_PX 8.0\n#define EDGE_GAMMA 0.105\n#define FONT_SIZE 48.0\n\nuniform sampler2D u_sdf_map;\nlayout(std140) uniform commonUniforms {\n  vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];\n  vec2 u_sdf_map_size;\n  float u_raisingHeight: 0.0;\n  float u_stroke_width : 2;\n  float u_gamma_scale : 0.5;\n  float u_halo_blur : 0.5;\n};\n\nin vec2 v_uv;\nin float v_gamma_scale;\nin vec4 v_color;\nin vec4 v_stroke_color;\nin float v_fontScale;\n\nout vec4 outputColor;\n\n#pragma include \"picking\"\nvoid main() {\n  // get style data mapping\n\n  // get sdf from atlas\n  float dist = texture(SAMPLER_2D(u_sdf_map), v_uv).a;\n\n  lowp float buff = (6.0 - u_stroke_width / v_fontScale) / SDF_PX;\n  highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (v_fontScale * u_gamma_scale) / 1.0;\n\n  highp float gamma_scaled = gamma * v_gamma_scale;\n\n  highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);\n\n  // \u6839\u636E stroke \u7684 alpha \u503C\u8C03\u6574\u6DF7\u5408\u6743\u91CD\uFF0C\u907F\u514D\u900F\u660E stroke \u5F71\u54CD\u6587\u672C\u989C\u8272\n  float stroke_mix_factor = smoothstep(0., 0.5, 1.- dist) * v_stroke_color.a;\n  outputColor = mix(v_color, v_stroke_color, stroke_mix_factor);\n\n  outputColor.a *= alpha;\n   // \u4F5C\u4E3A mask \u6A21\u677F\u65F6\u9700\u8981\u4E22\u5F03\u900F\u660E\u7684\u50CF\u7D20\n  if (outputColor.a < 0.01) {\n    discard;\n  }\n  outputColor = filterColor(outputColor);\n}\n";
+const textFrag = "#define SDF_PX 8.0\n#define EDGE_GAMMA 0.105\n#define FONT_SIZE 48.0\n\nuniform sampler2D u_sdf_map;\nlayout(std140) uniform commonUniforms {\n  vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];\n  vec4 u_background_color : [0.0, 0.0, 0.0, 0.0];\n  vec2 u_sdf_map_size;\n  float u_raisingHeight: 0.0;\n  float u_stroke_width : 2;\n  float u_background_radius : 0.0;\n  float u_background_shape : 0.0;\n  float u_gamma_scale : 0.5;\n  float u_halo_blur : 0.5;\n};\n\nin vec2 v_uv;\nin vec2 v_backgroundUV;\nin vec2 v_backgroundSize;\nin float v_gamma_scale;\nin float v_textQuadType;\nin vec4 v_color;\nin vec4 v_stroke_color;\nin vec4 v_background_color;\nin float v_fontScale;\n\nout vec4 outputColor;\n\n#pragma include \"picking\"\nvoid main() {\n  // get style data mapping\n\n  if (v_textQuadType > 0.5) {\n    vec2 halfSize = v_backgroundSize * 0.5;\n    float radius = clamp(u_background_radius, 0.0, min(halfSize.x, halfSize.y));\n    if (u_background_shape > 0.5) {\n      radius = min(halfSize.x, halfSize.y);\n    }\n\n    vec2 centered = (v_backgroundUV - 0.5) * v_backgroundSize;\n    vec2 q = abs(centered) - (halfSize - vec2(radius));\n    float signedDistance = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;\n    float aa = max(fwidth(signedDistance), 1.0);\n    float backgroundAlpha = (1.0 - smoothstep(0.0, aa, signedDistance)) * v_background_color.a;\n    outputColor = vec4(v_background_color.rgb, backgroundAlpha);\n    if (outputColor.a < 0.01) {\n      discard;\n    }\n    outputColor = filterColor(outputColor);\n    return;\n  }\n\n  // get sdf from atlas\n  float dist = texture(SAMPLER_2D(u_sdf_map), v_uv).a;\n\n  lowp float fill_buff = 6.0 / SDF_PX;\n  lowp float stroke_buff = (6.0 - u_stroke_width / v_fontScale) / SDF_PX;\n  highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (v_fontScale * u_gamma_scale) / 1.0;\n\n  highp float gamma_scaled = gamma * v_gamma_scale;\n\n  highp float fill_alpha = smoothstep(\n    fill_buff - gamma_scaled,\n    fill_buff + gamma_scaled,\n    dist\n  ) * v_color.a;\n  highp float outer_alpha = smoothstep(\n    stroke_buff - gamma_scaled,\n    stroke_buff + gamma_scaled,\n    dist\n  );\n  highp float stroke_alpha = max(outer_alpha - fill_alpha / max(v_color.a, 0.0001), 0.0) * v_stroke_color.a;\n\n  float out_alpha = clamp(fill_alpha + stroke_alpha, 0.0, 1.0);\n  vec3 out_rgb = vec3(0.0);\n  if (out_alpha > 0.0) {\n    out_rgb = (v_color.rgb * fill_alpha + v_stroke_color.rgb * stroke_alpha) / out_alpha;\n  }\n\n  outputColor = vec4(out_rgb, out_alpha);\n   // \u4F5C\u4E3A mask \u6A21\u677F\u65F6\u9700\u8981\u4E22\u5F03\u900F\u660E\u7684\u50CF\u7D20\n  if (outputColor.a < 0.01) {\n    discard;\n  }\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/text/text_vert.glsl' */
-const textVert = "#define SDF_PX 8.0\n#define EDGE_GAMMA 0.105\n#define FONT_SIZE 24.0\n\nlayout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_TEXT_OFFSETS) in vec2 a_textOffsets;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_tex;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];\n  vec2 u_sdf_map_size;\n  float u_raisingHeight: 0.0;\n  float u_stroke_width : 2;\n  float u_gamma_scale : 0.5;\n  float u_halo_blur : 0.5;\n};\n\nout vec2 v_uv;\nout float v_gamma_scale;\nout vec4 v_color;\nout vec4 v_stroke_color;\nout float v_fontScale;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n\n  v_uv = a_tex / u_sdf_map_size;\n\n\n\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n  v_stroke_color = vec4(u_stroke_color.xyz, u_stroke_color.w * opacity);\n\n  // \u6587\u672C\u7F29\u653E\u6BD4\u4F8B\n  float fontScale = a_Size / FONT_SIZE;\n  v_fontScale = fontScale;\n\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  // vec4 projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n\n  vec2 offset = rotate_matrix(a_textOffsets,rotation);\n\n  // gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);\n\n  float raiseHeight = u_raisingHeight;\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n    raiseHeight = u_raisingHeight * mapboxZoomScale;\n  }\n\n  vec4 projected_position = project_common_position_to_clipspace(vec4(project_pos.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));\n\n  gl_Position = vec4(\n    projected_position.xy / projected_position.w + offset * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);\n  v_gamma_scale = gl_Position.w;\n  setPickingColor(a_PickingColor);\n\n}\n";
+const textVert = "#define SDF_PX 8.0\n#define EDGE_GAMMA 0.105\n#define FONT_SIZE 24.0\n\nlayout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_TEXT_OFFSETS) in vec2 a_textOffsets;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_tex;\nlayout(location = ATTRIBUTE_LOCATION_TEXT_QUAD_TYPE) in float a_textQuadType;\nlayout(location = ATTRIBUTE_LOCATION_TEXT_BACKGROUND_UV) in vec2 a_backgroundUV;\nlayout(location = ATTRIBUTE_LOCATION_TEXT_BACKGROUND_SIZE) in vec2 a_backgroundSize;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];\n  vec4 u_background_color : [0.0, 0.0, 0.0, 0.0];\n  vec2 u_sdf_map_size;\n  float u_raisingHeight: 0.0;\n  float u_stroke_width : 2;\n  float u_background_radius : 0.0;\n  float u_background_shape : 0.0;\n  float u_gamma_scale : 0.5;\n  float u_halo_blur : 0.5;\n};\n\nout vec2 v_uv;\nout vec2 v_backgroundUV;\nout vec2 v_backgroundSize;\nout float v_gamma_scale;\nout float v_textQuadType;\nout vec4 v_color;\nout vec4 v_stroke_color;\nout vec4 v_background_color;\nout float v_fontScale;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n\n  v_uv = a_tex / u_sdf_map_size;\n  v_backgroundUV = a_backgroundUV;\n  v_backgroundSize = a_backgroundSize;\n  v_textQuadType = a_textQuadType;\n\n\n\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n  v_stroke_color = vec4(u_stroke_color.xyz, u_stroke_color.w * opacity);\n  v_background_color = vec4(u_background_color.xyz, u_background_color.w * opacity);\n\n  // \u6587\u672C\u7F29\u653E\u6BD4\u4F8B\n  float fontScale = a_Size / FONT_SIZE;\n  v_fontScale = fontScale;\n\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  // vec4 projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n\n  vec2 offset = rotate_matrix(a_textOffsets,rotation);\n\n  // gl_Position = vec4(projected_position.xy / projected_position.w + rotation_matrix * a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);\n\n  float raiseHeight = u_raisingHeight;\n  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {\n    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);\n    raiseHeight = u_raisingHeight * mapboxZoomScale;\n  }\n\n  vec4 projected_position = project_common_position_to_clipspace(vec4(project_pos.xyz + vec3(0.0, 0.0, raiseHeight), 1.0));\n\n  gl_Position = vec4(\n    projected_position.xy / projected_position.w + offset * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);\n  v_gamma_scale = projected_position.w;\n  setPickingColor(a_PickingColor);\n\n}\n";
 const {
   isEqual
 } = lodashUtil;
+const TEXT_BACKGROUND_SHAPE = {
+  rect: 0,
+  circle: 1,
+  'circle-rect': 2
+};
+function normalizePadding(padding = [0, 0]) {
+  return Array.isArray(padding) ? padding : [padding, padding];
+}
+function hasBackground(backgroundColor) {
+  return rgb2arr(backgroundColor || '')[3] > 0;
+}
+function getBackgroundQuad(glyphQuads, backgroundPadding, backgroundShape) {
+  const x1Bounds = Math.min(...glyphQuads.map(quad => Math.min(quad.tl.x, quad.bl.x)));
+  const y1Bounds = Math.min(...glyphQuads.map(quad => Math.min(quad.tl.y, quad.tr.y)));
+  const x2Bounds = Math.max(...glyphQuads.map(quad => Math.max(quad.tr.x, quad.br.x)));
+  const y2Bounds = Math.max(...glyphQuads.map(quad => Math.max(quad.bl.y, quad.br.y)));
+  let x1 = x1Bounds - backgroundPadding[0];
+  let y1 = y1Bounds - backgroundPadding[1];
+  let x2 = x2Bounds + backgroundPadding[0];
+  let y2 = y2Bounds + backgroundPadding[1];
+  if (backgroundShape === 'circle') {
+    const centerX = (x1 + x2) / 2;
+    const centerY = (y1 + y2) / 2;
+    const diameter = Math.max(x2 - x1, y2 - y1);
+    x1 = centerX - diameter / 2;
+    x2 = centerX + diameter / 2;
+    y1 = centerY - diameter / 2;
+    y2 = centerY + diameter / 2;
+  }
+  return {
+    tl: {
+      x: x1,
+      y: y1
+    },
+    tr: {
+      x: x2,
+      y: y1
+    },
+    br: {
+      x: x2,
+      y: y2
+    },
+    bl: {
+      x: x1,
+      y: y2
+    },
+    size: [x2 - x1, y2 - y1]
+  };
+}
 export function TextTrianglation(feature) {
+  return buildTextTriangles.call(this, feature, 'all');
+}
+export function TextBackgroundTrianglation(feature) {
+  return buildTextTriangles.call(this, feature, 'background');
+}
+export function TextGlyphTrianglation(feature) {
+  return buildTextTriangles.call(this, feature, 'glyph');
+}
+function buildTextTriangles(feature, mode) {
   // @ts-ignore
   const that = this;
   const id = feature.id;
   const vertices = [];
   const indices = [];
+  const pushQuad = (quad, index, coord) => {
+    const baseIndex = index * 4;
+    const tex = 'tex' in quad && quad.tex ? quad.tex : {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    const bgUV = 'quadType' in quad && quad.quadType > 0 ? [[0, 0], [1, 0], [1, 1], [0, 1]] : [[0, 0], [0, 0], [0, 0], [0, 0]];
+    const bgSize = 'size' in quad ? quad.size : [0, 0];
+    const quadType = 'quadType' in quad ? quad.quadType : 0;
+    vertices.push(...coord, tex.x, tex.y + tex.height, quad.tl.x, quad.tl.y, quadType, bgUV[0][0], bgUV[0][1], bgSize[0], bgSize[1], ...coord, tex.x + tex.width, tex.y + tex.height, quad.tr.x, quad.tr.y, quadType, bgUV[1][0], bgUV[1][1], bgSize[0], bgSize[1], ...coord, tex.x + tex.width, tex.y, quad.br.x, quad.br.y, quadType, bgUV[2][0], bgUV[2][1], bgSize[0], bgSize[1], ...coord, tex.x, tex.y, quad.bl.x, quad.bl.y, quadType, bgUV[3][0], bgUV[3][1], bgSize[0], bgSize[1]);
+    indices.push(baseIndex, baseIndex + 1, baseIndex + 2, baseIndex + 2, baseIndex + 3, baseIndex);
+  };
   if (!that.glyphInfoMap || !that.glyphInfoMap[id]) {
     return {
       vertices: [],
       // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
       indices: [],
-      size: 7
+      size: 12
     };
   }
-  const centroid = that.glyphInfoMap[id].centroid; // 计算中心点
+  const textRenderInfo = that.glyphInfoMap[id];
+  const centroid = textRenderInfo.centroid; // 计算中心点
   const coord = centroid.length === 2 ? [centroid[0], centroid[1], 0] : centroid;
-  that.glyphInfoMap[id].glyphQuads.forEach((quad, index) => {
-    vertices.push(...coord, quad.tex.x, quad.tex.y + quad.tex.height, quad.tl.x, quad.tl.y, ...coord, quad.tex.x + quad.tex.width, quad.tex.y + quad.tex.height, quad.tr.x, quad.tr.y, ...coord, quad.tex.x + quad.tex.width, quad.tex.y, quad.br.x, quad.br.y, ...coord, quad.tex.x, quad.tex.y, quad.bl.x, quad.bl.y);
-    indices.push(0 + index * 4, 1 + index * 4, 2 + index * 4, 2 + index * 4, 3 + index * 4, 0 + index * 4);
-  });
+  let quadIndex = 0;
+  if (mode !== 'glyph' && textRenderInfo.backgroundQuad) {
+    pushQuad(_objectSpread(_objectSpread({}, textRenderInfo.backgroundQuad), {}, {
+      quadType: 1
+    }), quadIndex, coord);
+    quadIndex += 1;
+  }
+  if (mode !== 'background') {
+    textRenderInfo.glyphQuads.forEach(quad => {
+      pushQuad(quad, quadIndex, coord);
+      quadIndex += 1;
+    });
+  }
   return {
     vertices,
     // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
     indices,
-    size: 7
+    size: 12
   };
 }
 export default class TextModel extends BaseModel {
@@ -55,9 +137,11 @@ export default class TextModel extends BaseModel {
     _defineProperty(this, "textCount", 0);
     _defineProperty(this, "preTextStyle", {});
     _defineProperty(this, "mapping", /*#__PURE__*/_asyncToGenerator(function* () {
+      _this.rawEncodeData = _this.layer.getEncodedData();
       _this.initGlyph(); //
       _this.updateTexture();
       yield _this.reBuildModel();
+      _this.layer.renderLayers();
     }));
   }
   get attributeLocation() {
@@ -65,7 +149,10 @@ export default class TextModel extends BaseModel {
       MAX: super.attributeLocation.MAX,
       SIZE: 9,
       TEXT_OFFSETS: 10,
-      UV: 11
+      UV: 11,
+      TEXT_QUAD_TYPE: 12,
+      TEXT_BACKGROUND_UV: 13,
+      TEXT_BACKGROUND_SIZE: 14
     });
   }
   getUninforms() {
@@ -77,9 +164,14 @@ export default class TextModel extends BaseModel {
     });
   }
   getCommonUniformsInfo() {
+    var _TEXT_BACKGROUND_SHAP;
     const {
       stroke = '#fff',
+      strokeOpacity = 1,
       strokeWidth = 0,
+      backgroundColor = 'rgba(0, 0, 0, 0)',
+      backgroundRadius = 0,
+      backgroundShape = 'rect',
       halo = 0.5,
       gamma = 2.0,
       raisingHeight = 0
@@ -91,11 +183,16 @@ export default class TextModel extends BaseModel {
       this.textCount = Object.keys(mapping).length;
     }
     this.preTextStyle = this.getTextStyle();
+    const strokeColor = rgb2arr(stroke);
+    const bgColor = rgb2arr(backgroundColor);
     const commonOptions = {
-      u_stroke_color: rgb2arr(stroke),
+      u_stroke_color: [strokeColor[0], strokeColor[1], strokeColor[2], strokeColor[3] * strokeOpacity],
+      u_background_color: bgColor,
       u_sdf_map_size: [(canvas === null || canvas === void 0 ? void 0 : canvas.width) || 1, (canvas === null || canvas === void 0 ? void 0 : canvas.height) || 1],
       u_raisingHeight: Number(raisingHeight),
       u_stroke_width: strokeWidth,
+      u_background_radius: backgroundRadius,
+      u_background_shape: (_TEXT_BACKGROUND_SHAP = TEXT_BACKGROUND_SHAPE[backgroundShape]) !== null && _TEXT_BACKGROUND_SHAP !== void 0 ? _TEXT_BACKGROUND_SHAP : TEXT_BACKGROUND_SHAPE.rect,
       u_gamma_scale: gamma,
       u_halo_blur: halo
     };
@@ -118,7 +215,8 @@ export default class TextModel extends BaseModel {
     var _this3 = this;
     return _asyncToGenerator(function* () {
       const {
-        textAllowOverlap = false
+        textAllowOverlap = false,
+        backgroundColor
       } = _this3.layer.getLayerConfig();
 
       //  this.mapping(); 重复调用
@@ -127,18 +225,32 @@ export default class TextModel extends BaseModel {
       if (!textAllowOverlap) {
         _this3.filterGlyphs();
       }
-      const model = yield _this3.layer.buildLayerModel({
+      const textModel = yield _this3.layer.buildLayerModel({
+        moduleName: 'pointText',
+        vertexShader: textVert,
+        fragmentShader: textFrag,
+        defines: _this3.getDefines(),
+        inject: _this3.getInject(),
+        triangulation: TextGlyphTrianglation.bind(_this3),
+        depth: {
+          enable: false
+        }
+      });
+      if (!hasBackground(backgroundColor)) {
+        return [textModel];
+      }
+      const backgroundModel = yield _this3.layer.buildLayerModel({
         moduleName: 'pointText',
         vertexShader: textVert,
         fragmentShader: textFrag,
         defines: _this3.getDefines(),
         inject: _this3.getInject(),
-        triangulation: TextTrianglation.bind(_this3),
+        triangulation: TextBackgroundTrianglation.bind(_this3),
         depth: {
           enable: false
         }
       });
-      return [model];
+      return [backgroundModel, textModel];
     })();
   }
   // 需要更新的场景
@@ -155,10 +267,13 @@ export default class TextModel extends BaseModel {
         textAnchor = 'center',
         textOffset,
         padding,
+        backgroundColor,
+        backgroundPadding,
+        backgroundShape,
         fontFamily,
         fontWeight
       } = _this4.getTextStyle();
-      if (!isEqual(padding, _this4.preTextStyle.padding) || !isEqual(textOffset, _this4.preTextStyle.textOffset) || !isEqual(textAnchor, _this4.preTextStyle.textAnchor) || !isEqual(fontFamily, _this4.preTextStyle.fontFamily) || !isEqual(fontWeight, _this4.preTextStyle.fontWeight)) {
+      if (!isEqual(padding, _this4.preTextStyle.padding) || backgroundColor !== _this4.preTextStyle.backgroundColor || !isEqual(backgroundPadding, _this4.preTextStyle.backgroundPadding) || backgroundShape !== _this4.preTextStyle.backgroundShape || !isEqual(textOffset, _this4.preTextStyle.textOffset) || !isEqual(textAnchor, _this4.preTextStyle.textAnchor) || !isEqual(fontFamily, _this4.preTextStyle.fontFamily) || !isEqual(fontWeight, _this4.preTextStyle.fontWeight)) {
         yield _this4.mapping();
         return true;
       }
@@ -225,6 +340,57 @@ export default class TextModel extends BaseModel {
         }
       }
     });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'textQuadType',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_textQuadType',
+        shaderLocation: this.attributeLocation.TEXT_QUAD_TYPE,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[7]];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'textBackgroundUv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_backgroundUV',
+        shaderLocation: this.attributeLocation.TEXT_BACKGROUND_UV,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[8], vertex[9]];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'textBackgroundSize',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_backgroundSize',
+        shaderLocation: this.attributeLocation.TEXT_BACKGROUND_SIZE,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[10], vertex[11]];
+        }
+      }
+    });
 
     // point layer size;
     this.styleAttributeService.registerStyleAttribute({
@@ -323,6 +489,10 @@ export default class TextModel extends BaseModel {
       padding = [0, 0],
       textAnchor = 'center',
       textOffset = [0, 0],
+      backgroundColor = 'rgba(0, 0, 0, 0)',
+      backgroundPadding = [0, 0],
+      backgroundRadius = 0,
+      backgroundShape = 'rect',
       opacity = 1,
       strokeOpacity = 1,
       strokeWidth = 0,
@@ -333,6 +503,10 @@ export default class TextModel extends BaseModel {
       fontFamily,
       textAllowOverlap,
       padding,
+      backgroundColor,
+      backgroundPadding: normalizePadding(backgroundPadding),
+      backgroundRadius,
+      backgroundShape,
       textAnchor,
       textOffset,
       opacity,
@@ -350,7 +524,10 @@ export default class TextModel extends BaseModel {
     const {
       spacing = 2,
       textAnchor = 'center',
-      textOffset
+      textOffset,
+      backgroundColor,
+      backgroundPadding = [0, 0],
+      backgroundShape = 'rect'
     } = this.layer.getLayerConfig();
     const data = this.rawEncodeData;
     this.glyphInfo = data.map(feature => {
@@ -367,6 +544,7 @@ export default class TextModel extends BaseModel {
       //
       iconfont);
       const glyphQuads = getGlyphQuads(shaping, offset, false);
+      const backgroundQuad = hasBackground(backgroundColor) ? getBackgroundQuad(glyphQuads, normalizePadding(backgroundPadding), backgroundShape) : undefined;
       feature.shaping = shaping;
       feature.glyphQuads = glyphQuads;
       // feature.centroid = calculteCentroid(coordinates);
@@ -375,6 +553,7 @@ export default class TextModel extends BaseModel {
       this.glyphInfoMap[id] = {
         shaping,
         glyphQuads,
+        backgroundQuad,
         centroid: calculateCentroid(feature.coordinates)
       };
       return feature;
@@ -402,12 +581,16 @@ export default class TextModel extends BaseModel {
   filterGlyphs() {
     const {
       padding = [0, 0],
+      backgroundColor,
+      backgroundPadding = [0, 0],
       textAllowOverlap = false
     } = this.layer.getLayerConfig();
     if (textAllowOverlap) {
       // 如果允许文本覆盖
       return;
     }
+    const collisionPadding = normalizePadding(backgroundPadding);
+    const extraPadding = hasBackground(backgroundColor) ? collisionPadding : [0, 0];
     this.glyphInfoMap = {};
     this.currentZoom = this.mapService.getZoom();
     this.extent = this.textExtent();
@@ -428,10 +611,10 @@ export default class TextModel extends BaseModel {
       const {
         box
       } = collisionIndex.placeCollisionBox({
-        x1: shaping.left * fontScale - padding[0],
-        x2: shaping.right * fontScale + padding[0],
-        y1: shaping.top * fontScale - padding[1],
-        y2: shaping.bottom * fontScale + padding[1],
+        x1: shaping.left * fontScale - padding[0] - extraPadding[0],
+        x2: shaping.right * fontScale + padding[0] + extraPadding[0],
+        y1: shaping.top * fontScale - padding[1] - extraPadding[1],
+        y2: shaping.bottom * fontScale + padding[1] + extraPadding[1],
         anchorPointX: pixels.x,
         anchorPointY: pixels.y
       });
@@ -484,12 +667,31 @@ export default class TextModel extends BaseModel {
   reBuildModel() {
     var _this5 = this;
     return _asyncToGenerator(function* () {
+      const {
+        backgroundColor
+      } = _this5.layer.getLayerConfig();
+      _this5.rawEncodeData = _this5.layer.getEncodedData();
       _this5.filterGlyphs();
-      const model = yield _this5.layer.buildLayerModel({
+      const textModel = yield _this5.layer.buildLayerModel({
+        moduleName: 'pointText',
+        vertexShader: textVert,
+        fragmentShader: textFrag,
+        triangulation: TextGlyphTrianglation.bind(_this5),
+        defines: _this5.getDefines(),
+        inject: _this5.getInject(),
+        depth: {
+          enable: false
+        }
+      });
+      if (!hasBackground(backgroundColor)) {
+        _this5.layer.models = [textModel];
+        return;
+      }
+      const backgroundModel = yield _this5.layer.buildLayerModel({
         moduleName: 'pointText',
         vertexShader: textVert,
         fragmentShader: textFrag,
-        triangulation: TextTrianglation.bind(_this5),
+        triangulation: TextBackgroundTrianglation.bind(_this5),
         defines: _this5.getDefines(),
         inject: _this5.getInject(),
         depth: {
@@ -497,7 +699,7 @@ export default class TextModel extends BaseModel {
         }
       });
       // TODO 渲染流程待修改
-      _this5.layer.models = [model];
+      _this5.layer.models = [backgroundModel, textModel];
     })();
   }
 }

package/es/point/shaders/billboard/billboard_point_vert.glsl

@@ -27,6 +27,7 @@ vec2 applyAnchorPoint(float anchor, float pointSize) {
   }
 
   vec2 offset = vec2(0.0);
+  float gap = 2.0 * u_DevicePixelRatio; // 2px 间隔，考虑设备像素比
 
   // horizontal alignment: 左边缘对准坐标 -> 向右移; 右边缘对准坐标 -> 向左移
   if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {
@@ -36,10 +37,11 @@ vec2 applyAnchorPoint(float anchor, float pointSize) {
   }
 
   // vertical alignment: 上边缘对准坐标 -> 向下移(图形在坐标下方); 下边缘对准坐标 -> 向上移(图形在坐标上方)
+  // bottom 和 top 增加 2px 间隔，避免图形紧贴参考点
   if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {
-    offset.y = -pointSize * 0.5;
+    offset.y = -pointSize * 0.5 - gap; // top: 图形在坐标下方，额外向下移 2px
   } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {
-    offset.y = pointSize * 0.5;
+    offset.y = pointSize * 0.5 + gap; // bottom: 图形在坐标上方，额外向上移 2px
   }
 
   return offset;

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

@@ -25,6 +25,7 @@ vec2 applyAnchorPoint(float anchor, float pointSize) {
   }
 
   vec2 offset = vec2(0.0);
+  float gap = 2.0 * u_DevicePixelRatio; // 2px 间隔，考虑设备像素比
 
   // horizontal alignment: 左边缘对准坐标 -> 向右移; 右边缘对准坐标 -> 向左移
   if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {
@@ -34,10 +35,11 @@ vec2 applyAnchorPoint(float anchor, float pointSize) {
   }
 
   // vertical alignment: 上边缘对准坐标 -> 向下移(图形在坐标下方); 下边缘对准坐标 -> 向上移(图形在坐标上方)
+  // bottom 和 top 增加 2px 间隔，避免图形紧贴参考点
   if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {
-    offset.y = -pointSize * 0.5;
+    offset.y = -pointSize * 0.5 - gap; // top: 图形在坐标下方，额外向下移 2px
   } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {
-    offset.y = pointSize * 0.5;
+    offset.y = pointSize * 0.5 + gap; // bottom: 图形在坐标上方，额外向上移 2px
   }
 
   return offset;

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

@@ -20,6 +20,7 @@ vec2 applyAnchorPoint(float anchor, float pointSize) {
   }
 
   vec2 offset = vec2(0.0);
+  float gap = 2.0 * u_DevicePixelRatio; // 2px 间隔，考虑设备像素比
 
   // horizontal alignment: 左边缘对准坐标 -> 向右移; 右边缘对准坐标 -> 向左移
   if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {
@@ -29,10 +30,11 @@ vec2 applyAnchorPoint(float anchor, float pointSize) {
   }
 
   // vertical alignment: 上边缘对准坐标 -> 向下移(图形在坐标下方); 下边缘对准坐标 -> 向上移(图形在坐标上方)
+  // bottom 和 top 增加 2px 间隔，避免图形紧贴参考点
   if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {
-    offset.y = -pointSize * 0.5;
+    offset.y = -pointSize * 0.5 - gap; // top: 图形在坐标下方，额外向下移 2px
   } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {
-    offset.y = pointSize * 0.5;
+    offset.y = pointSize * 0.5 + gap; // bottom: 图形在坐标上方，额外向上移 2px
   }
 
   return offset;

package/es/point/shaders/text/text_frag.glsl

@@ -5,17 +5,24 @@
 uniform sampler2D u_sdf_map;
 layout(std140) uniform commonUniforms {
   vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+  vec4 u_background_color : [0.0, 0.0, 0.0, 0.0];
   vec2 u_sdf_map_size;
   float u_raisingHeight: 0.0;
   float u_stroke_width : 2;
+  float u_background_radius : 0.0;
+  float u_background_shape : 0.0;
   float u_gamma_scale : 0.5;
   float u_halo_blur : 0.5;
 };
 
 in vec2 v_uv;
+in vec2 v_backgroundUV;
+in vec2 v_backgroundSize;
 in float v_gamma_scale;
+in float v_textQuadType;
 in vec4 v_color;
 in vec4 v_stroke_color;
+in vec4 v_background_color;
 in float v_fontScale;
 
 out vec4 outputColor;
@@ -24,21 +31,54 @@ out vec4 outputColor;
 void main() {
   // get style data mapping
 
+  if (v_textQuadType > 0.5) {
+    vec2 halfSize = v_backgroundSize * 0.5;
+    float radius = clamp(u_background_radius, 0.0, min(halfSize.x, halfSize.y));
+    if (u_background_shape > 0.5) {
+      radius = min(halfSize.x, halfSize.y);
+    }
+
+    vec2 centered = (v_backgroundUV - 0.5) * v_backgroundSize;
+    vec2 q = abs(centered) - (halfSize - vec2(radius));
+    float signedDistance = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - radius;
+    float aa = max(fwidth(signedDistance), 1.0);
+    float backgroundAlpha = (1.0 - smoothstep(0.0, aa, signedDistance)) * v_background_color.a;
+    outputColor = vec4(v_background_color.rgb, backgroundAlpha);
+    if (outputColor.a < 0.01) {
+      discard;
+    }
+    outputColor = filterColor(outputColor);
+    return;
+  }
+
   // get sdf from atlas
   float dist = texture(SAMPLER_2D(u_sdf_map), v_uv).a;
 
-  lowp float buff = (6.0 - u_stroke_width / v_fontScale) / SDF_PX;
+  lowp float fill_buff = 6.0 / SDF_PX;
+  lowp float stroke_buff = (6.0 - u_stroke_width / v_fontScale) / SDF_PX;
   highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (v_fontScale * u_gamma_scale) / 1.0;
 
   highp float gamma_scaled = gamma * v_gamma_scale;
 
-  highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
+  highp float fill_alpha = smoothstep(
+    fill_buff - gamma_scaled,
+    fill_buff + gamma_scaled,
+    dist
+  ) * v_color.a;
+  highp float outer_alpha = smoothstep(
+    stroke_buff - gamma_scaled,
+    stroke_buff + gamma_scaled,
+    dist
+  );
+  highp float stroke_alpha = max(outer_alpha - fill_alpha / max(v_color.a, 0.0001), 0.0) * v_stroke_color.a;
 
-  // 根据 stroke 的 alpha 值调整混合权重，避免透明 stroke 影响文本颜色
-  float stroke_mix_factor = smoothstep(0., 0.5, 1.- dist) * v_stroke_color.a;
-  outputColor = mix(v_color, v_stroke_color, stroke_mix_factor);
+  float out_alpha = clamp(fill_alpha + stroke_alpha, 0.0, 1.0);
+  vec3 out_rgb = vec3(0.0);
+  if (out_alpha > 0.0) {
+    out_rgb = (v_color.rgb * fill_alpha + v_stroke_color.rgb * stroke_alpha) / out_alpha;
+  }
 
-  outputColor.a *= alpha;
+  outputColor = vec4(out_rgb, out_alpha);
    // 作为 mask 模板时需要丢弃透明的像素
   if (outputColor.a < 0.01) {
     discard;

package/es/point/shaders/text/text_vert.glsl

@@ -8,20 +8,30 @@ layout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;
 layout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;
 layout(location = ATTRIBUTE_LOCATION_TEXT_OFFSETS) in vec2 a_textOffsets;
 layout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_tex;
+layout(location = ATTRIBUTE_LOCATION_TEXT_QUAD_TYPE) in float a_textQuadType;
+layout(location = ATTRIBUTE_LOCATION_TEXT_BACKGROUND_UV) in vec2 a_backgroundUV;
+layout(location = ATTRIBUTE_LOCATION_TEXT_BACKGROUND_SIZE) in vec2 a_backgroundSize;
 
 layout(std140) uniform commonUniforms {
   vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+  vec4 u_background_color : [0.0, 0.0, 0.0, 0.0];
   vec2 u_sdf_map_size;
   float u_raisingHeight: 0.0;
   float u_stroke_width : 2;
+  float u_background_radius : 0.0;
+  float u_background_shape : 0.0;
   float u_gamma_scale : 0.5;
   float u_halo_blur : 0.5;
 };
 
 out vec2 v_uv;
+out vec2 v_backgroundUV;
+out vec2 v_backgroundSize;
 out float v_gamma_scale;
+out float v_textQuadType;
 out vec4 v_color;
 out vec4 v_stroke_color;
+out vec4 v_background_color;
 out float v_fontScale;
 
 #pragma include "projection"
@@ -32,11 +42,15 @@ void main() {
   // cal style mapping - 数据纹理映射部分的计算
 
   v_uv = a_tex / u_sdf_map_size;
+  v_backgroundUV = a_backgroundUV;
+  v_backgroundSize = a_backgroundSize;
+  v_textQuadType = a_textQuadType;
 
 
 
   v_color = vec4(a_Color.xyz, a_Color.w * opacity);
   v_stroke_color = vec4(u_stroke_color.xyz, u_stroke_color.w * opacity);
+  v_background_color = vec4(u_background_color.xyz, u_background_color.w * opacity);
 
   // 文本缩放比例
   float fontScale = a_Size / FONT_SIZE;
@@ -59,7 +73,7 @@ void main() {
 
   gl_Position = vec4(
     projected_position.xy / projected_position.w + offset * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
-  v_gamma_scale = gl_Position.w;
+  v_gamma_scale = projected_position.w;
   setPickingColor(a_PickingColor);
 
 }

package/es/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?: "device" | "regl" | undefined;
+        renderer?: "regl" | "device" | undefined;
         antialias?: boolean | undefined;
         preserveDrawingBuffer?: boolean | undefined;
         enableWebGPU?: boolean | undefined;

package/es/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 PointLayer | typeof PolygonLayer | typeof LineLayer;
+export declare function getTileLayer(type: string): typeof PolygonLayer | typeof LineLayer | typeof PointLayer;
 export declare function isNeedMask(type: string): boolean;