@antv/l7-layers 2.28.11 → 2.28.13

package/es/utils/symbol-layout.js

@@ -137,31 +137,29 @@ function shapeIconFont(shaping, glyphMap, iconfonts, lineHeight, textAnchor, tex
   const lineStartIndex = positionedGlyphs.length;
   iconfonts.forEach(iconfont => {
     const glyph = glyphMap[iconfont];
-    const baselineOffset = 0;
     if (glyph) {
+      // iconfont 的锚点应由 align 阶段统一处理，这里只保留纹理 buffer 补偿，避免 left/right 被预居中抵消
       positionedGlyphs.push({
         glyph: iconfont,
-        // x,
+        x: x + 4,
+        y: 4 - glyph.height / 2,
         /**
          * iconfont
          * 在计算大小的时候计算的是 unicode 字符 如 
          * 在布局计算 icon 位置的时候应该始终保持居中（且 icon 只占一个字符的位置）
          */
-        x: glyph.advance / 2,
-        y: y + baselineOffset,
         vertical: false,
         // TODO：目前只支持水平方向
         scale: 1,
         metrics: glyph
       });
-      x += glyph.advance + spacing;
+      x += glyph.width + spacing;
     }
 
-    // 左右对齐
+    // iconfont 单独按字形纹理宽度计算布局，避免再次按文本 advance 做 justify 产生额外偏移
     if (positionedGlyphs.length !== lineStartIndex) {
       const lineLength = x - spacing;
       maxLineLength = Math.max(lineLength, maxLineLength);
-      justifyLine(positionedGlyphs, glyphMap, lineStartIndex, positionedGlyphs.length - 1, justify);
     }
     x = 0;
     y -= lineHeight + 5;

package/lib/core/interface.d.ts

@@ -76,6 +76,10 @@ export interface IPointLayerStyleOptions extends IBaseLayerStyleOptions {
     textAnchor?: anchorType;
     spacing?: number;
     padding?: [number, number];
+    backgroundColor?: string;
+    backgroundPadding?: number | [number, number];
+    backgroundRadius?: number;
+    backgroundShape?: 'rect' | 'circle' | 'circle-rect';
     halo?: number;
     gamma?: number;
     fontWeight?: string;

package/lib/plugins/DataMappingPlugin.js

@@ -78,10 +78,10 @@ class DataMappingPlugin {
         const encodeData = this.mapping(layer, attributesToRemapping, filterData, layer.getEncodedData() // TODO 优化
         );
         layer.setEncodedData(encodeData);
-      }
 
-      // 处理文本更新，更新文字形状
-      // layer.emit('remapping', null);
+        // Text/iconfont models listen to remapping to rebuild glyph layout and buffers.
+        layer.emit('remapping', null);
+      }
     });
   }
   generateMaping(layer, {

package/lib/plugins/index.d.ts

@@ -12,4 +12,4 @@ import RegisterStyleAttributePlugin from './RegisterStyleAttributePlugin';
 import ShaderUniformPlugin from './ShaderUniformPlugin';
 import UpdateModelPlugin from './UpdateModelPlugin';
 import UpdateStyleAttributePlugin from './UpdateStyleAttributePlugin';
-export declare function createPlugins(): (DataSourcePlugin | RegisterStyleAttributePlugin | FeatureScalePlugin | DataMappingPlugin | LayerStylePlugin | LayerMaskPlugin | UpdateStyleAttributePlugin | UpdateModelPlugin | MultiPassRendererPlugin | ShaderUniformPlugin | LayerAnimateStylePlugin | LightingPlugin | PixelPickingPlugin | LayerModelPlugin)[];
+export declare function createPlugins(): (DataMappingPlugin | DataSourcePlugin | RegisterStyleAttributePlugin | FeatureScalePlugin | LayerStylePlugin | LayerMaskPlugin | UpdateStyleAttributePlugin | UpdateModelPlugin | MultiPassRendererPlugin | ShaderUniformPlugin | LayerAnimateStylePlugin | LightingPlugin | PixelPickingPlugin | LayerModelPlugin)[];

package/lib/point/models/billboard_point.js

@@ -13,7 +13,7 @@ var _l7Utils = require("@antv/l7-utils");
 /* babel-plugin-inline-import '../shaders/billboard/billboard_point_frag.glsl' */
 const simplePointFrag = "layout(std140) uniform commonUniorm {\n  vec4 u_stroke_color;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_stroke_width;\n};\n\nin vec4 v_color;\nin float v_blur;\nin float v_innerRadius;\n\nout vec4 outputColor;\n\n#pragma include \"picking\"\nvoid main() {\n  vec2 center = vec2(0.5);\n\n  // Tip: \u7247\u5143\u5230\u4E2D\u5FC3\u70B9\u7684\u8DDD\u79BB 0 - 1\n  float fragmengTocenter = distance(center, gl_PointCoord) * 2.0;\n  // Tip: \u7247\u5143\u7684\u526A\u5207\u6210\u5706\u5F62\n  float circleClipOpacity = 1.0 - smoothstep(v_blur, 1.0, fragmengTocenter);\n\n  if (v_innerRadius < 0.99) {\n    // \u5F53\u5B58\u5728 stroke \u4E14 stroke > 0.01\n    float blurWidth = (1.0 - v_blur) / 2.0;\n    vec4 stroke = vec4(u_stroke_color.rgb, u_stroke_opacity);\n    if (fragmengTocenter > v_innerRadius + blurWidth) {\n      outputColor = stroke;\n    } else if (fragmengTocenter > v_innerRadius - blurWidth) {\n      float mixR = (fragmengTocenter - (v_innerRadius - blurWidth)) / (blurWidth * 2.0);\n      outputColor = mix(v_color, stroke, mixR);\n    } else {\n      outputColor = v_color;\n    }\n  } else {\n    // \u5F53\u4E0D\u5B58\u5728 stroke \u6216 stroke <= 0.01\n    outputColor = v_color;\n  }\n\n  outputColor = filterColor(outputColor);\n\n  if (u_additive > 0.0) {\n    outputColor *= circleClipOpacity;\n  } else {\n    outputColor.a *= circleClipOpacity;\n  }\n\n}\n";
 /* babel-plugin-inline-import '../shaders/billboard/billboard_point_vert.glsl' */
-const simplePointVert = "\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;\n\nlayout(std140) uniform commonUniorm {\n  vec4 u_stroke_color;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_stroke_width;\n};\n\nout vec4 v_color;\nout float v_blur;\nout float v_innerRadius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"project\"\nvoid main() {\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n  v_blur = 1.0 - max(2.0 / a_Size, 0.05);\n  v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);\n\n  vec2 offset = project_pixel(u_offsets);\n\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\n\n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n  setPickingColor(a_PickingColor);\n}\n";
+const simplePointVert = "\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;\n\nlayout(std140) uniform commonUniorm {\n  vec4 u_stroke_color;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_stroke_width;\n};\n\nout vec4 v_color;\nout float v_blur;\nout float v_innerRadius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"project\"\n\n// \u6839\u636E anchor \u503C\u8BA1\u7B97\u70B9\u7CBE\u7075\u7684\u50CF\u7D20\u504F\u79FB\n// 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\nvec2 applyAnchorPoint(float anchor, float pointSize) {\n  if (anchor < 0.5) {\n    return vec2(0.0);\n  }\n\n  vec2 offset = vec2(0.0);\n\n  // horizontal alignment: \u5DE6\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u53F3\u79FB; \u53F3\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u5DE6\u79FB\n  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {\n    offset.x = -pointSize * 0.5;\n  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {\n    offset.x = pointSize * 0.5;\n  }\n\n  // vertical alignment: \u4E0A\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0B\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0B\u65B9); \u4E0B\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0A\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0A\u65B9)\n  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {\n    offset.y = -pointSize * 0.5;\n  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {\n    offset.y = pointSize * 0.5;\n  }\n\n  return offset;\n}\n\nvoid main() {\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n  v_blur = 1.0 - max(2.0 / a_Size, 0.05);\n  v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);\n\n  vec2 offset = project_pixel(offsets);\n\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\n\n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n\n  // apply anchor offset in screen space\n  vec2 anchorOffset = applyAnchorPoint(anchor, gl_PointSize);\n  gl_Position.xy += anchorOffset / u_ViewportSize * 2.0 * gl_Position.w;\n\n  setPickingColor(a_PickingColor);\n}\n";
 function PointTriangulation(feature) {
   const coordinates = feature.coordinates;
   return {

package/lib/point/models/earthFill.js

@@ -13,7 +13,7 @@ var _glMatrix = require("gl-matrix");
 /* babel-plugin-inline-import '../shaders/earthFill/earthFill_frag.glsl' */
 const pointFillFrag = "in vec4 v_data;\nin vec4 v_color;\nin float v_radius;\n\nlayout(std140) uniform commonUniform {\n  float u_additive;\n  float u_stroke_opacity : 1;\n  float u_stroke_width : 2;\n  float u_blur : 0.0;\n};\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n  int shape = int(floor(v_data.w + 0.5));\n\n  vec4 strokeColor = u_stroke == vec4(0.0) ? v_color : u_stroke;\n\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius + u_stroke_width);\n\n  float outer_df;\n  float inner_df;\n  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'\n  if (shape == 0) {\n    outer_df = sdCircle(v_data.xy, 1.0);\n    inner_df = sdCircle(v_data.xy, r);\n  } else if (shape == 1) {\n    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);\n    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);\n  } else if (shape == 2) {\n    outer_df = sdBox(v_data.xy, vec2(1.));\n    inner_df = sdBox(v_data.xy, vec2(r));\n  } else if (shape == 3) {\n    outer_df = sdPentagon(v_data.xy, 0.8);\n    inner_df = sdPentagon(v_data.xy, r * 0.8);\n  } else if (shape == 4) {\n    outer_df = sdHexagon(v_data.xy, 0.8);\n    inner_df = sdHexagon(v_data.xy, r * 0.8);\n  } else if (shape == 5) {\n    outer_df = sdOctogon(v_data.xy, 1.0);\n    inner_df = sdOctogon(v_data.xy, r);\n  } else if (shape == 6) {\n    outer_df = sdHexagram(v_data.xy, 0.52);\n    inner_df = sdHexagram(v_data.xy, r * 0.52);\n  } else if (shape == 7) {\n    outer_df = sdRhombus(v_data.xy, vec2(1.0));\n    inner_df = sdRhombus(v_data.xy, vec2(r));\n  } else if (shape == 8) {\n    outer_df = sdVesica(v_data.xy, 1.1, 0.8);\n    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);\n  }\n\n  if(outer_df > antialiasblur + 0.018) discard;\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(\n    antialiasblur,\n    0.0,\n    inner_df\n  );\n\n  if(u_stroke_width < 0.01) {\n    outputColor = vec4(v_color.rgb, v_color.a * u_opacity);\n  } else {\n    outputColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);\n  }\n\n  if(u_additive > 0.0) {\n    outputColor *= opacity_t;\n    outputColor = filterColorAlpha(outputColor, outputColor.a);\n  } else {\n    outputColor.a *= opacity_t;\n    outputColor = filterColor(outputColor);\n  }\n}\n";
 /* babel-plugin-inline-import '../shaders/earthFill/earthFill_vert.glsl' */
-const pointFillVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_SHAPE) in float a_Shape;\nlayout(location = ATTRIBUTE_LOCATION_EXTRUDE) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniform {\n  float u_additive;\n  float u_stroke_opacity : 1;\n  float u_stroke_width : 2;\n  float u_blur : 0.0;\n};\nout vec4 v_data;\nout vec4 v_color;\nout float v_radius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  float shape_type = a_Shape;\n  /*\n  *  setPickingSize \u8BBE\u7F6E\u62FE\u53D6\u5927\u5C0F\n  */\n  float newSize = setPickingSize(a_Size);\n  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;\n\n  // unpack color(vec2)\n  v_color = a_Color;\n\n  // radius(16-bit)\n  v_radius = newSize;\n\n  // anti-alias\n  //  float antialiased_blur = -max(u_blur, antialiasblur);\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur);\n\n  // TODP: /abs(extrude.x) \u662F\u4E3A\u4E86\u517C\u5BB9\u5730\u7403\u6A21\u5F0F\n  v_data = vec4(extrude.x/abs(extrude.x), extrude.y/abs(extrude.y), antialiasblur,shape_type);\n\n  gl_Position = u_ViewProjectionMatrix * vec4(a_Position + extrude * newSize * 0.1 + vec3(u_offsets,0.0), 1.0);\n\n  setPickingColor(a_PickingColor);\n}\n";
+const pointFillVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;\nlayout(location = ATTRIBUTE_LOCATION_SHAPE) in float a_Shape;\nlayout(location = ATTRIBUTE_LOCATION_EXTRUDE) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniform {\n  float u_additive;\n  float u_stroke_opacity : 1;\n  float u_stroke_width : 2;\n  float u_blur : 0.0;\n};\nout vec4 v_data;\nout vec4 v_color;\nout float v_radius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\n// \u6839\u636E anchor \u503C\u8BA1\u7B97 extrude \u504F\u79FB\n// 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\nvec2 applyAnchor(vec2 extrude, float anchor) {\n  if (anchor < 0.5) {\n    return extrude;\n  }\n\n  vec2 offset = vec2(0.0);\n\n  // horizontal alignment: \u5DE6\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u53F3\u79FB; \u53F3\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u5DE6\u79FB\n  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {\n    // top-right, right, bottom-right -> shift left\n    offset.x = -1.0;\n  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {\n    // bottom-left, left, top-left -> shift right\n    offset.x = 1.0;\n  }\n\n  // vertical alignment: \u4E0A\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0B\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0B\u65B9); \u4E0B\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0A\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0A\u65B9)\n  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {\n    // top, top-right, top-left -> shift down\n    offset.y = -1.0;\n  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {\n    // bottom-right, bottom, bottom-left, bottom-center -> shift up\n    offset.y = 1.0;\n  }\n\n  return extrude + offset;\n}\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  float shape_type = a_Shape;\n  /*\n  *  setPickingSize \u8BBE\u7F6E\u62FE\u53D6\u5927\u5C0F\n  */\n  float newSize = setPickingSize(a_Size);\n  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;\n\n  // unpack color(vec2)\n  v_color = a_Color;\n\n  // radius(16-bit)\n  v_radius = newSize;\n\n  // anti-alias\n  //  float antialiased_blur = -max(u_blur, antialiasblur);\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur);\n\n  // apply anchor to extrude direction\n  vec2 anchoredExtrude = applyAnchor(extrude.xy, anchor);\n\n  // TODP: sign() \u662F\u4E3A\u4E86\u517C\u5BB9\u5730\u7403\u6A21\u5F0F\uFF0C\u540C\u65F6\u907F\u514D anchor \u504F\u79FB\u540E\u4E3A 0 \u65F6\u9664\u4EE5\u96F6\u4EA7\u751F NaN\n  // \u6CE8\u610F\uFF1Av_data \u5FC5\u987B\u4F7F\u7528\u539F\u59CB extrude \u800C\u975E anchoredExtrude\uFF0C\u56E0\u4E3A SDF \u5F62\u72B6\u8BA1\u7B97\u9700\u8981\u57FA\u4E8E\u539F\u59CB\u5F62\u72B6\u5750\u6807\u7CFB\n  // anchoredExtrude \u53EA\u7528\u4E8E\u4F4D\u7F6E\u504F\u79FB\uFF0C\u4E0D\u6539\u53D8\u5F62\u72B6\u672C\u8EAB\u7684 SDF \u91C7\u6837\n  v_data = vec4(sign(extrude.x), sign(extrude.y), antialiasblur,shape_type);\n\n  gl_Position = u_ViewProjectionMatrix * vec4(a_Position + anchoredExtrude * newSize * 0.1 + vec3(offsets,0.0), 1.0);\n\n  setPickingColor(a_PickingColor);\n}\n";
 class FillModel extends _BaseModel.default {
   get attributeLocation() {
     return Object.assign(super.attributeLocation, {

package/lib/point/models/fill.js

@@ -13,7 +13,7 @@ var _interface = require("../../core/interface");
 /* babel-plugin-inline-import '../shaders/fill/fill_frag.glsl' */
 const pointFillFrag = "layout(std140) uniform commonUniforms {\n  vec3 u_blur_height_fixed;\n  float u_stroke_width;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_size_unit;\n  float u_time;\n  vec4 u_animate;\n};\n\nin vec4 v_color;\nin vec4 v_stroke;\nin vec4 v_data;\nin float v_radius;\n\n#pragma include \"scene_uniforms\"\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n  int shape = int(floor(v_data.w + 0.5));\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius + u_stroke_width);\n\n  float outer_df;\n  float inner_df;\n  // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'\n  if (shape == 0) {\n    outer_df = sdCircle(v_data.xy, 1.0);\n    inner_df = sdCircle(v_data.xy, r);\n  } else if (shape == 1) {\n    outer_df = sdEquilateralTriangle(1.1 * v_data.xy);\n    inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);\n  } else if (shape == 2) {\n    outer_df = sdBox(v_data.xy, vec2(1.0));\n    inner_df = sdBox(v_data.xy, vec2(r));\n  } else if (shape == 3) {\n    outer_df = sdPentagon(v_data.xy, 0.8);\n    inner_df = sdPentagon(v_data.xy, r * 0.8);\n  } else if (shape == 4) {\n    outer_df = sdHexagon(v_data.xy, 0.8);\n    inner_df = sdHexagon(v_data.xy, r * 0.8);\n  } else if (shape == 5) {\n    outer_df = sdOctogon(v_data.xy, 1.0);\n    inner_df = sdOctogon(v_data.xy, r);\n  } else if (shape == 6) {\n    outer_df = sdHexagram(v_data.xy, 0.52);\n    inner_df = sdHexagram(v_data.xy, r * 0.52);\n  } else if (shape == 7) {\n    outer_df = sdRhombus(v_data.xy, vec2(1.0));\n    inner_df = sdRhombus(v_data.xy, vec2(r));\n  } else if (shape == 8) {\n    outer_df = sdVesica(v_data.xy, 1.1, 0.8);\n    inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);\n  }\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(antialiasblur, 0.0, inner_df);\n\n  float PI = 3.14159;\n  float N_RINGS = 3.0;\n  float FREQ = 1.0;\n\n  if (u_stroke_width < 0.01) {\n    outputColor = v_color;\n  } else {\n    outputColor = mix(v_color, v_stroke * u_stroke_opacity, color_t);\n  }\n  float intensity = 1.0;\n  if (u_time != -1.0) {\n    //wave\u76F8\u5173\u903B\u8F91\n    float d = length(v_data.xy);\n    if (d > 0.5) {\n      discard;\n    }\n    intensity =\n      clamp(cos(d * PI), 0.0, 1.0) *\n      clamp(cos(2.0 * PI * (d * 2.0 * u_animate.z - u_animate.y * u_time)), 0.0, 1.0);\n  }\n\n  if (u_additive > 0.0) {\n    outputColor *= opacity_t;\n    outputColor *= intensity; //wave\n    outputColor = filterColorAlpha(outputColor, outputColor.a);\n  } else {\n    outputColor.a *= opacity_t;\n    outputColor.a *= intensity; //wave\n    outputColor = filterColor(outputColor);\n  }\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}\n";
 /* babel-plugin-inline-import '../shaders/fill/fill_vert.glsl' */
-const pointFillVert = "layout(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_SHAPE) in float a_Shape;\nlayout(location = ATTRIBUTE_LOCATION_EXTRUDE) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniforms {\n  vec3 u_blur_height_fixed;\n  float u_stroke_width;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_size_unit;\n  float u_time;\n  vec4 u_animate;\n};\n\nout vec4 v_color;\nout vec4 v_stroke;\nout vec4 v_data;\nout float v_radius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  // \u900F\u660E\u5EA6\u8BA1\u7B97\n   v_stroke = stroke;\n  vec3 extrude = a_Extrude;\n  float shape_type = a_Shape;\n  /*\n  *  setPickingSize \u8BBE\u7F6E\u62FE\u53D6\u5927\u5C0F\n  *  u_meter2coord \u5728\u7B49\u9762\u79EF\u5927\u5C0F\u7684\u65F6\u5019\u8BBE\u7F6E\u5355\u4F4D\n  */\n  float newSize = setPickingSize(a_Size);\n  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;\n\n\n\n  // unpack color(vec2)\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n\n  if(u_size_unit == 1.0) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n\n   v_radius = newSize;\n\n  // anti-alias\n  //  float antialiased_blur = -max(u_blur, antialiasblur);\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur_height_fixed.x);\n\n  vec2 offset = (extrude.xy * (newSize + u_stroke_width) + u_offsets);\n\n  offset = project_pixel(offset);\n  offset = rotate_matrix(offset,rotation);\n\n  // TODP: /abs(extrude.x) \u662F\u4E3A\u4E86\u517C\u5BB9\u5730\u7403\u6A21\u5F0F\n  v_data = vec4(extrude.x/abs(extrude.x), extrude.y/abs(extrude.y), antialiasblur,shape_type);\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0), a_Position64Low);\n  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  float raisingHeight = u_blur_height_fixed.y;\n\n  if(u_blur_height_fixed.z < 1.0) { // false\n    raisingHeight = project_pixel(u_blur_height_fixed.y);\n  } else {\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      raisingHeight = u_blur_height_fixed.y * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+const pointFillVert = "layout(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_SHAPE) in float a_Shape;\nlayout(location = ATTRIBUTE_LOCATION_EXTRUDE) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniforms {\n  vec3 u_blur_height_fixed;\n  float u_stroke_width;\n  float u_additive;\n  float u_stroke_opacity;\n  float u_size_unit;\n  float u_time;\n  vec4 u_animate;\n};\n\nout vec4 v_color;\nout vec4 v_stroke;\nout vec4 v_data;\nout float v_radius;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\n// \u6839\u636E anchor \u503C\u8BA1\u7B97 extrude \u504F\u79FB\n// 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\nvec2 applyAnchor(vec2 extrude, float anchor) {\n  if (anchor < 0.5) {\n    return extrude;\n  }\n\n  vec2 offset = vec2(0.0);\n\n  // horizontal alignment: \u5DE6\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u53F3\u79FB; \u53F3\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u5DE6\u79FB\n  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {\n    // top-right, right, bottom-right -> shift left\n    offset.x = -1.0;\n  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {\n    // bottom-left, left, top-left -> shift right\n    offset.x = 1.0;\n  }\n\n  // vertical alignment: \u4E0A\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0B\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0B\u65B9); \u4E0B\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0A\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0A\u65B9)\n  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {\n    // top, top-right, top-left -> shift down\n    offset.y = -1.0;\n  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {\n    // bottom-right, bottom, bottom-left, bottom-center -> shift up\n    offset.y = 1.0;\n  }\n\n  return extrude + offset;\n}\n\nvoid main() {\n  // \u900F\u660E\u5EA6\u8BA1\u7B97\n   v_stroke = stroke;\n  vec3 extrude = a_Extrude;\n  float shape_type = a_Shape;\n  /*\n  *  setPickingSize \u8BBE\u7F6E\u62FE\u53D6\u5927\u5C0F\n  *  u_meter2coord \u5728\u7B49\u9762\u79EF\u5927\u5C0F\u7684\u65F6\u5019\u8BBE\u7F6E\u5355\u4F4D\n  */\n  float newSize = setPickingSize(a_Size);\n  // float newSize = setPickingSize(a_Size) * 0.00001038445708445579;\n\n\n\n  // unpack color(vec2)\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n\n  if(u_size_unit == 1.0) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n\n   v_radius = newSize;\n\n  // anti-alias\n  //  float antialiased_blur = -max(u_blur, antialiasblur);\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur_height_fixed.x);\n\n  // apply anchor to extrude direction\n  vec2 anchoredExtrude = applyAnchor(extrude.xy, anchor);\n\n  vec2 offset = (anchoredExtrude * (newSize + u_stroke_width) + offsets);\n\n  offset = project_pixel(offset);\n  offset = rotate_matrix(offset,rotation);\n\n  // TODP: sign() \u662F\u4E3A\u4E86\u517C\u5BB9\u5730\u7403\u6A21\u5F0F\uFF0C\u540C\u65F6\u907F\u514D anchor \u504F\u79FB\u540E\u4E3A 0 \u65F6\u9664\u4EE5\u96F6\u4EA7\u751F NaN\n  // \u6CE8\u610F\uFF1Av_data \u5FC5\u987B\u4F7F\u7528\u539F\u59CB extrude \u800C\u975E anchoredExtrude\uFF0C\u56E0\u4E3A SDF \u5F62\u72B6\u8BA1\u7B97\u9700\u8981\u57FA\u4E8E\u539F\u59CB\u5F62\u72B6\u5750\u6807\u7CFB\n  // anchoredExtrude \u53EA\u7528\u4E8E\u4F4D\u7F6E\u504F\u79FB\uFF0C\u4E0D\u6539\u53D8\u5F62\u72B6\u672C\u8EAB\u7684 SDF \u91C7\u6837\n  v_data = vec4(sign(extrude.x), sign(extrude.y), antialiasblur,shape_type);\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0), a_Position64Low);\n  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  float raisingHeight = u_blur_height_fixed.y;\n\n  if(u_blur_height_fixed.z < 1.0) { // false\n    raisingHeight = project_pixel(u_blur_height_fixed.y);\n  } else {\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      raisingHeight = u_blur_height_fixed.y * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
 class FillModel extends _BaseModel.default {
   get attributeLocation() {
     return Object.assign(super.attributeLocation, {

package/lib/point/models/fillImage.js

@@ -14,7 +14,7 @@ var _triangulation = require("../../core/triangulation");
 /* babel-plugin-inline-import '../shaders/fillImage/fillImage_frag.glsl' */
 const pointFillFrag = "in vec2 v_uv;// \u672C\u8EAB\u7684 uv \u5750\u6807\nin vec2 v_Iconuv;\nin float v_opacity;\nout vec4 outputColor;\n\nuniform sampler2D u_texture;\nlayout(std140) uniform commonUniform {\n  vec2 u_textSize;\n  float u_heightfixed: 0.0;\n  float u_raisingHeight: 0.0;\n  float u_size_unit;\n};\n\n#pragma include \"scene_uniforms\"\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nvoid main() {\n  vec2 pos = v_Iconuv / u_textSize + v_uv / u_textSize * 64.;\n  outputColor = texture(SAMPLER_2D(u_texture), pos);\n  outputColor.a *= v_opacity;\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/fillImage/fillImage_vert.glsl' */
-const pointFillVert = "layout(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_EXTRUDE) in vec3 a_Extrude;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniform {\n  vec2 u_textSize;\n  float u_heightfixed;\n  float u_raisingHeight;\n  float u_size_unit;\n};\n\nout vec2 v_uv;\nout vec2 v_Iconuv;\nout float v_opacity;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  v_uv = (a_Extrude.xy + 1.0) / 2.0;\n  v_uv.x = 1.0 - v_uv.x;\n  v_uv.y = 1.0 - v_uv.y;\n  v_Iconuv = a_Uv;\n  v_opacity = opacity;\n  float newSize = a_Size;\n  if (u_size_unit == 1.0) {\n    newSize = newSize * u_PixelsPerMeter.z;\n  }\n\n  // vec2 offset = (u_RotateMatrix * extrude.xy * (a_Size) + textrueOffsets);\n  vec2 offset = extrude.xy * newSize + offsets;\n\n  offset = rotate_matrix(offset, rotation);\n\n  offset = project_pixel(offset);\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+const pointFillVert = "layout(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_EXTRUDE) in vec3 a_Extrude;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniform {\n  vec2 u_textSize;\n  float u_heightfixed;\n  float u_raisingHeight;\n  float u_size_unit;\n};\n\nout vec2 v_uv;\nout vec2 v_Iconuv;\nout float v_opacity;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n#pragma include \"rotation_2d\"\n\n// \u6839\u636E anchor \u503C\u8BA1\u7B97 extrude \u504F\u79FB\n// 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\nvec2 applyAnchor(vec2 extrude, float anchor) {\n  if (anchor < 0.5) {\n    return extrude;\n  }\n\n  vec2 offset = vec2(0.0);\n\n  // horizontal alignment: \u5DE6\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u53F3\u79FB; \u53F3\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u5DE6\u79FB\n  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {\n    // top-right, right, bottom-right -> shift left\n    offset.x = -1.0;\n  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {\n    // bottom-left, left, top-left -> shift right\n    offset.x = 1.0;\n  }\n\n  // vertical alignment: \u4E0A\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0B\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0B\u65B9); \u4E0B\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0A\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0A\u65B9)\n  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {\n    // top, top-right, top-left -> shift down\n    offset.y = -1.0;\n  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {\n    // bottom-right, bottom, bottom-left, bottom-center -> shift up\n    offset.y = 1.0;\n  }\n\n  return extrude + offset;\n}\n\nvoid main() {\n  vec3 extrude = a_Extrude;\n  v_uv = (a_Extrude.xy + 1.0) / 2.0;\n  v_uv.x = 1.0 - v_uv.x;\n  v_uv.y = 1.0 - v_uv.y;\n  v_Iconuv = a_Uv;\n  v_opacity = opacity;\n  float newSize = a_Size;\n  if (u_size_unit == 1.0) {\n    newSize = newSize * u_PixelsPerMeter.z;\n  }\n\n  // apply anchor to extrude direction\n  vec2 anchoredExtrude = applyAnchor(extrude.xy, anchor);\n\n  // vec2 offset = (u_RotateMatrix * extrude.xy * (a_Size) + textrueOffsets);\n  vec2 offset = anchoredExtrude.xy * newSize + offsets;\n\n  offset = rotate_matrix(offset, rotation);\n\n  offset = project_pixel(offset);\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
 class FillImageModel extends _BaseModel.default {
   constructor(...args) {
     super(...args);

package/lib/point/models/image.js

@@ -16,7 +16,7 @@ var _collisionIndex = _interopRequireDefault(require("../../utils/collision-inde
 /* babel-plugin-inline-import '../shaders/image/image_frag.glsl' */
 const pointImageFrag = "layout(std140) uniform commonUniforms {\n  vec2 u_textSize;\n  float u_raisingHeight;\n  float u_heightfixed;\n};\n\nuniform sampler2D u_texture;\n\nin vec4 v_color;\nin vec2 v_uv;\nin float v_opacity;\n\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n  vec2 pos = v_uv / u_textSize + gl_PointCoord / u_textSize * 64.0;\n  vec4 textureColor;\n\n  // Y = 0.299R + 0.587G + 0.114B // \u4EAE\u5EA6\u63D0\u53D6\n\n  textureColor = texture(SAMPLER_2D(u_texture), pos);\n\n  // Tip: \u53BB\u9664\u8FB9\u7F18\u90E8\u5206 mipmap \u5BFC\u81F4\u7684\u6DF7\u5408\u53D8\u6697\n  float fragmengTocenter = distance(vec2(0.5), gl_PointCoord);\n  if (fragmengTocenter >= 0.5) {\n    float luma = 0.299 * textureColor.r + 0.587 * textureColor.g + 0.114 * textureColor.b;\n    textureColor.a *= luma;\n  }\n\n  if (\n    all(lessThan(v_color, vec4(1.0 + 0.00001))) && all(greaterThan(v_color, vec4(1.0 - 0.00001))) ||\n    v_color == vec4(1.0)\n  ) {\n    outputColor = textureColor;\n  } else {\n    outputColor = step(0.01, textureColor.z) * v_color;\n  }\n  outputColor.a *= v_opacity;\n  if (outputColor.a < 0.01) {\n    discard;\n  }\n  outputColor = filterColor(outputColor);\n}\n";
 /* babel-plugin-inline-import '../shaders/image/image_vert.glsl' */
-const pointImageVert = "layout(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_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_textSize;\n  float u_raisingHeight;\n  float u_heightfixed;\n};\n\nout vec4 v_color;\nout vec2 v_uv;\nout float v_opacity;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  v_color = a_Color;\n  v_opacity = opacity;\n  v_uv = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n\n  vec2 offset = project_pixel(offsets);\n\n  float raisingHeight = u_raisingHeight;\n  if (u_heightfixed < 1.0) {\n    // false\n    raisingHeight = project_pixel(u_raisingHeight);\n  } else {\n    if (\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    ) {\n      float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);\n      raisingHeight = u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n  setPickingColor(a_PickingColor);\n}\n";
+const pointImageVert = "layout(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_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_textSize;\n  float u_raisingHeight;\n  float u_heightfixed;\n};\n\nout vec4 v_color;\nout vec2 v_uv;\nout float v_opacity;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\n// \u6839\u636E anchor \u503C\u8BA1\u7B97\u70B9\u7CBE\u7075\u7684\u50CF\u7D20\u504F\u79FB\n// 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\nvec2 applyAnchorPoint(float anchor, float pointSize) {\n  if (anchor < 0.5) {\n    return vec2(0.0);\n  }\n\n  vec2 offset = vec2(0.0);\n\n  // horizontal alignment: \u5DE6\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u53F3\u79FB; \u53F3\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u5DE6\u79FB\n  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {\n    offset.x = -pointSize * 0.5;\n  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {\n    offset.x = pointSize * 0.5;\n  }\n\n  // vertical alignment: \u4E0A\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0B\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0B\u65B9); \u4E0B\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0A\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0A\u65B9)\n  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {\n    offset.y = -pointSize * 0.5;\n  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {\n    offset.y = pointSize * 0.5;\n  }\n\n  return offset;\n}\n\nvoid main() {\n  // cal style mapping - \u6570\u636E\u7EB9\u7406\u6620\u5C04\u90E8\u5206\u7684\u8BA1\u7B97\n  v_color = a_Color;\n  v_opacity = opacity;\n  v_uv = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n\n  vec2 offset = project_pixel(offsets);\n\n  float raisingHeight = u_raisingHeight;\n  if (u_heightfixed < 1.0) {\n    // false\n    raisingHeight = project_pixel(u_raisingHeight);\n  } else {\n    if (\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||\n      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET\n    ) {\n      float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);\n      raisingHeight = u_raisingHeight * mapboxZoomScale;\n    }\n  }\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, raisingHeight, 1.0));\n\n  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;\n\n  // apply anchor offset in screen space\n  vec2 anchorOffset = applyAnchorPoint(anchor, gl_PointSize);\n  gl_Position.xy += anchorOffset / u_ViewportSize * 2.0 * gl_Position.w;\n\n  setPickingColor(a_PickingColor);\n}\n";
 class ImageModel extends _BaseModel.default {
   constructor(...args) {
     super(...args);

package/lib/point/models/normal.js

@@ -12,7 +12,7 @@ var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
 /* babel-plugin-inline-import '../shaders/normal/normal_frag.glsl' */
 const normalFrag = "in vec4 v_color;\nout vec4 outputColor;\nvoid main() {\n  outputColor = v_color;\n}\n";
 /* babel-plugin-inline-import '../shaders/normal/normal_vert.glsl' */
-const normalVert = "layout(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;\n\nlayout(std140) uniform u_Common {\n  float u_size_scale;\n};\n\nout vec4 v_color;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n\nvoid main() {\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(project_pos);\n\n  gl_PointSize = a_Size * u_size_scale * 2.0 * u_DevicePixelRatio;\n}\n";
+const normalVert = "layout(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;\n\nlayout(std140) uniform u_Common {\n  float u_size_scale;\n};\n\nout vec4 v_color;\n\n#pragma include \"projection\"\n#pragma include \"project\"\n\n// \u6839\u636E anchor \u503C\u8BA1\u7B97\u70B9\u7CBE\u7075\u7684\u50CF\u7D20\u504F\u79FB\n// 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\nvec2 applyAnchorPoint(float anchor, float pointSize) {\n  if (anchor < 0.5) {\n    return vec2(0.0);\n  }\n\n  vec2 offset = vec2(0.0);\n\n  // horizontal alignment: \u5DE6\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u53F3\u79FB; \u53F3\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u5DE6\u79FB\n  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {\n    offset.x = -pointSize * 0.5;\n  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {\n    offset.x = pointSize * 0.5;\n  }\n\n  // vertical alignment: \u4E0A\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0B\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0B\u65B9); \u4E0B\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0A\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0A\u65B9)\n  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {\n    offset.y = -pointSize * 0.5;\n  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {\n    offset.y = pointSize * 0.5;\n  }\n\n  return offset;\n}\n\nvoid main() {\n  v_color = vec4(a_Color.xyz, a_Color.w * opacity);\n\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(project_pos);\n\n  gl_PointSize = a_Size * u_size_scale * 2.0 * u_DevicePixelRatio;\n\n  // apply anchor offset in screen space\n  vec2 anchorOffset = applyAnchorPoint(anchor, gl_PointSize);\n  gl_Position.xy += anchorOffset / u_ViewportSize * 2.0 * gl_Position.w;\n}\n";
 function PointTriangulation(feature) {
   const coordinates = feature.coordinates;
   return {

package/lib/point/models/radar.js

@@ -13,7 +13,7 @@ var _triangulation = require("../../core/triangulation");
 /* babel-plugin-inline-import '../shaders/radar/radar_frag.glsl' */
 const pointFillFrag = "\nlayout(std140) uniform commonUniorm{\n  float u_additive;\n  float u_size_unit;\n  float u_speed: 1.0;\n  float u_time;\n};\nin vec4 v_data;\nin vec4 v_color;\nin float v_radius;\nin vec2 v_extrude;\n#pragma include \"sdf_2d\"\n#pragma include \"picking\"\n\nout vec4 outputColor;\n\nvoid main() {\n\n  lowp float antialiasblur = v_data.z;\n  float r = v_radius / (v_radius);\n\n  float outer_df = sdCircle(v_data.xy, 1.0);\n  float inner_df = sdCircle(v_data.xy, r);\n\n  float opacity_t = smoothstep(0.0, antialiasblur, outer_df);\n\n  outputColor = vec4(v_color.rgb, v_color.a);\n\n  if(u_additive > 0.0) {\n    outputColor *= opacity_t;\n  } else {\n    outputColor.a *= opacity_t;\n  }\n\n  if(outputColor.a > 0.0) {\n    outputColor = filterColor(outputColor);\n  }\n\n  vec2 extrude =  v_extrude;\n  vec2 dir = normalize(extrude);\n  vec2 baseDir = vec2(1.0, 0.0);\n  float pi = 3.14159265359;\n  float flag = sign(dir.y);\n  float rades = dot(dir, baseDir);\n  float radar_v = (flag - 1.0) * -0.5 * acos(rades)/pi;\n  // simple AA\n  if(radar_v > 0.99) {\n    radar_v = 1.0 - (radar_v - 0.99)/0.01;\n  }\n\n  outputColor.a *= radar_v;\n}\n";
 /* babel-plugin-inline-import '../shaders/radar/radar_vert.glsl' */
-const pointFillVert = "layout(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_EXTRUDE) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniorm {\n  float u_additive;\n  float u_size_unit;\n  float u_speed: 1.0;\n  float u_time;\n};\n\nout vec4 v_data;\nout vec4 v_color;\nout float v_radius;\nout vec2 v_extrude;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\nvoid main() {\n  float newSize = setPickingSize(a_Size);\n\n  float time = u_time * u_speed;\n  mat2 rotateMatrix = mat2(\n    cos(time), sin(time),\n    -sin(time), cos(time)\n  );\n  v_extrude = rotateMatrix * a_Extrude.xy;\n\n  v_color = a_Color;\n  v_color.a *= opacity;\n\n  float blur = 0.0;\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur);\n\n  if(u_size_unit == 1.) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n  v_radius = newSize;\n\n  vec2 offset = (a_Extrude.xy * (newSize));\n\n  offset = project_pixel(offset);\n\n  v_data = vec4(a_Extrude.x, a_Extrude.y, antialiasblur, -1.0);\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
+const pointFillVert = "layout(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_EXTRUDE) in vec3 a_Extrude;\n\nlayout(std140) uniform commonUniorm {\n  float u_additive;\n  float u_size_unit;\n  float u_speed: 1.0;\n  float u_time;\n};\n\nout vec4 v_data;\nout vec4 v_color;\nout float v_radius;\nout vec2 v_extrude;\n\n#pragma include \"projection\"\n#pragma include \"picking\"\n\n// \u6839\u636E anchor \u503C\u8BA1\u7B97 extrude \u504F\u79FB\n// 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\nvec2 applyAnchor(vec2 extrude, float anchor) {\n  if (anchor < 0.5) {\n    return extrude;\n  }\n\n  vec2 offset = vec2(0.0);\n\n  // horizontal alignment: \u5DE6\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u53F3\u79FB; \u53F3\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u5DE6\u79FB\n  if (anchor == 2.0 || anchor == 3.0 || anchor == 4.0) {\n    offset.x = -1.0;\n  } else if (anchor == 6.0 || anchor == 7.0 || anchor == 8.0) {\n    offset.x = 1.0;\n  }\n\n  // vertical alignment: \u4E0A\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0B\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0B\u65B9); \u4E0B\u8FB9\u7F18\u5BF9\u51C6\u5750\u6807 -> \u5411\u4E0A\u79FB(\u56FE\u5F62\u5728\u5750\u6807\u4E0A\u65B9)\n  if (anchor == 1.0 || anchor == 2.0 || anchor == 8.0) {\n    // top, top-right, top-left -> shift down\n    offset.y = -1.0;\n  } else if (anchor == 4.0 || anchor == 5.0 || anchor == 6.0 || anchor == 9.0) {\n    // bottom-right, bottom, bottom-left, bottom-center -> shift up\n    offset.y = 1.0;\n  }\n\n  return extrude + offset;\n}\n\nvoid main() {\n  float newSize = setPickingSize(a_Size);\n\n  float time = u_time * u_speed;\n  mat2 rotateMatrix = mat2(\n    cos(time), sin(time),\n    -sin(time), cos(time)\n  );\n\n  // apply anchor to extrude direction before rotation\n  vec2 anchoredExtrude = applyAnchor(a_Extrude.xy, anchor);\n  v_extrude = rotateMatrix * anchoredExtrude;\n\n  v_color = a_Color;\n  v_color.a *= opacity;\n\n  float blur = 0.0;\n  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur);\n\n  if(u_size_unit == 1.) {\n    newSize = newSize  * u_PixelsPerMeter.z;\n  }\n  v_radius = newSize;\n\n  vec2 offset = (anchoredExtrude * (newSize));\n\n  offset = project_pixel(offset);\n\n  v_data = vec4(anchoredExtrude.x, anchoredExtrude.y, antialiasblur, -1.0);\n\n  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, project_pixel(setPickingOrder(0.0)), 1.0));\n\n  setPickingColor(a_PickingColor);\n}\n";
 class RadarModel extends _BaseModel.default {
   get attributeLocation() {
     return Object.assign(super.attributeLocation, {

package/lib/point/models/text.d.ts

@@ -1,7 +1,42 @@
 import type { IEncodeFeature, IModel, IModelUniform } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 import type { IGlyphQuad } from '../../utils/symbol-layout';
-export declare function TextTrianglation(feature: IEncodeFeature): {
+interface ITextBackgroundQuad {
+    tl: {
+        x: number;
+        y: number;
+    };
+    tr: {
+        x: number;
+        y: number;
+    };
+    br: {
+        x: number;
+        y: number;
+    };
+    bl: {
+        x: number;
+        y: number;
+    };
+    size: [number, number];
+}
+interface ITextRenderInfo {
+    shaping: any;
+    glyphQuads: IGlyphQuad[];
+    backgroundQuad?: ITextBackgroundQuad;
+    centroid: number[];
+}
+export declare function TextTrianglation(this: TextModel, feature: IEncodeFeature): {
+    vertices: number[];
+    indices: number[];
+    size: number;
+};
+export declare function TextBackgroundTrianglation(this: TextModel, feature: IEncodeFeature): {
+    vertices: number[];
+    indices: number[];
+    size: number;
+};
+export declare function TextGlyphTrianglation(this: TextModel, feature: IEncodeFeature): {
     vertices: number[];
     indices: number[];
     size: number;
@@ -23,14 +58,13 @@ export default class TextModel extends BaseModel {
         SIZE: number;
         TEXT_OFFSETS: number;
         UV: number;
+        TEXT_QUAD_TYPE: number;
+        TEXT_BACKGROUND_UV: number;
+        TEXT_BACKGROUND_SIZE: number;
     };
     glyphInfo: IEncodeFeature[];
     glyphInfoMap: {
-        [key: string]: {
-            shaping: any;
-            glyphQuads: IGlyphQuad[];
-            centroid: number[];
-        };
+        [key: string]: ITextRenderInfo;
     };
     private rawEncodeData;
     private texture;
@@ -84,3 +118,4 @@ export default class TextModel extends BaseModel {
     private updateTexture;
     private reBuildModel;
 }
+export {};