@antv/l7-layers 2.25.7 → 2.25.9

package/es/point/models/image.js

@@ -0,0 +1,293 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, gl } from '@antv/l7-core';
+import { boundsContains, calculateCentroid, padBounds } from '@antv/l7-utils';
+import BaseModel from "../../core/BaseModel";
+import { PointImageTriangulation } from "../../core/triangulation";
+import CollisionIndex from "../../utils/collision-index";
+/* 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";
+export default class ImageModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "texture", void 0);
+    // 通过碰撞检测的 feature id 集合，由 filterImages() 填充；null 表示不启用过滤（allowOverlap: true）
+    _defineProperty(this, "imageFilterMap", null);
+    _defineProperty(this, "currentZoom", -1);
+    _defineProperty(this, "extent", void 0);
+    _defineProperty(this, "preAllowOverlap", true);
+    _defineProperty(this, "updateTexture", () => {
+      const {
+        createTexture2D
+      } = this.rendererService;
+      if (this.texture) {
+        this.texture.update({
+          data: this.iconService.getCanvas(),
+          mag: 'linear',
+          min: 'linear mipmap nearest',
+          mipmap: true
+        });
+        // 更新完纹理后在更新的图层的时候需要更新所有的图层
+        // this.layer.layerModelNeedUpdate = true;
+        setTimeout(() => {
+          // 延迟渲染
+          this.layerService.throttleRenderLayers();
+        });
+        return;
+      }
+      this.texture = createTexture2D({
+        data: this.iconService.getCanvas(),
+        mag: gl.LINEAR,
+        min: gl.LINEAR_MIPMAP_LINEAR,
+        premultiplyAlpha: false,
+        width: 1024,
+        height: this.iconService.canvasHeight || 128,
+        mipmap: true
+      });
+    });
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      UV: 10
+    });
+  }
+  getUninforms() {
+    // ThreeJS 图层兼容
+    if (this.rendererService.getDirty()) {
+      var _this$texture;
+      (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.bind();
+    }
+    const commonInfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return _objectSpread(_objectSpread({}, commonInfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      raisingHeight = 0,
+      heightfixed = false
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_textSize: [1024, this.iconService.canvasHeight || 128],
+      u_raisingHeight: Number(raisingHeight),
+      u_heightfixed: Number(heightfixed),
+      u_texture: this.texture
+    };
+    this.textures = [this.texture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      const {
+        allowOverlap = true
+      } = _this.layer.getLayerConfig();
+      _this.extent = _this.imageExtent();
+      _this.preAllowOverlap = allowOverlap;
+      _this.iconService.on('imageUpdate', _this.updateTexture);
+      _this.updateTexture();
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      const {
+        allowOverlap = true
+      } = _this2.layer.getLayerConfig();
+      _this2.initUniformsBuffer();
+      if (!allowOverlap) {
+        _this2.filterImages();
+      } else {
+        // 允许压盖时置 null，PointImageTriangulation 检测到 null 则跳过过滤
+        _this2.imageFilterMap = null;
+      }
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'pointImage',
+        vertexShader: pointImageVert,
+        fragmentShader: pointImageFrag,
+        // 绑定 this，让 PointImageTriangulation 能读取 imageFilterMap
+        triangulation: PointImageTriangulation.bind(_this2),
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        depth: {
+          enable: false
+        },
+        primitive: gl.POINTS
+      });
+      return [model];
+    })();
+  }
+  needUpdate() {
+    var _this3 = this;
+    return _asyncToGenerator(function* () {
+      const {
+        allowOverlap = true
+      } = _this3.layer.getLayerConfig();
+
+      // allowOverlap 开关发生变化时，强制重建
+      if (allowOverlap !== _this3.preAllowOverlap) {
+        _this3.preAllowOverlap = allowOverlap;
+        yield _this3.reBuildModel();
+        return true;
+      }
+
+      // 允许压盖时无需每帧检测
+      if (allowOverlap) {
+        return false;
+      }
+
+      // 不允许压盖时，zoom 变化 >0.5 或视野超出上次范围则重算碰撞
+      const zoom = _this3.mapService.getZoom();
+      const extent = _this3.mapService.getBounds();
+      const flag = boundsContains(_this3.extent, extent);
+      if (Math.abs(_this3.currentZoom - zoom) > 0.5 || !flag) {
+        yield _this3.reBuildModel();
+        return true;
+      }
+      return false;
+    })();
+  }
+  clearModels() {
+    var _this$texture2;
+    (_this$texture2 = this.texture) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+    this.iconService.off('imageUpdate', this.updateTexture);
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 20层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 5
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+
+    // point layer uv;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: feature => {
+          const iconMap = this.iconService.getIconMap();
+          const {
+            shape
+          } = feature;
+          const {
+            x,
+            y
+          } = iconMap[shape] || {
+            x: -64,
+            y: -64
+          }; // 非画布区域，默认的图标改为透明
+          return [x, y];
+        }
+      }
+    });
+  }
+
+  /**
+   * 图标碰撞避让：遍历所有 feature，在屏幕空间做 AABB 碰撞检测，
+   * 将通过检测的 feature id 写入 imageFilterMap。
+   * PointImageTriangulation 绑定 this 后，会跳过不在 map 中的 feature。
+   */
+  filterImages() {
+    const {
+      padding = [0, 0]
+    } = this.layer.getLayerConfig();
+    this.imageFilterMap = {};
+    this.currentZoom = this.mapService.getZoom();
+    this.extent = this.imageExtent();
+    const {
+      width,
+      height
+    } = this.rendererService.getViewportSize();
+    const collisionIndex = new CollisionIndex(width, height);
+    const data = this.layer.getEncodedData();
+    data.forEach(feature => {
+      const {
+        id = 0,
+        size = 5
+      } = feature;
+      const iconSize = Array.isArray(size) ? size[0] : size;
+      const centroid = calculateCentroid(feature.coordinates);
+      const pixels = this.mapService.lngLatToContainer(centroid);
+      const {
+        box
+      } = collisionIndex.placeCollisionBox({
+        x1: -iconSize - padding[0],
+        x2: iconSize + padding[0],
+        y1: -iconSize - padding[1],
+        y2: iconSize + padding[1],
+        anchorPointX: pixels.x,
+        anchorPointY: pixels.y
+      });
+      if (box && box.length) {
+        collisionIndex.insertCollisionBox(box, id);
+        this.imageFilterMap[id] = true;
+      }
+    });
+  }
+  imageExtent() {
+    const bounds = this.mapService.getBounds();
+    return padBounds(bounds, 0.5);
+  }
+  reBuildModel() {
+    var _this4 = this;
+    return _asyncToGenerator(function* () {
+      const {
+        allowOverlap = true
+      } = _this4.layer.getLayerConfig();
+      if (!allowOverlap) {
+        _this4.filterImages();
+      } else {
+        _this4.imageFilterMap = null; // 允许压盖：清空过滤表，全量渲染
+      }
+      const model = yield _this4.layer.buildLayerModel({
+        moduleName: 'pointImage',
+        vertexShader: pointImageVert,
+        fragmentShader: pointImageFrag,
+        triangulation: PointImageTriangulation.bind(_this4),
+        defines: _this4.getDefines(),
+        inject: _this4.getInject(),
+        depth: {
+          enable: false
+        },
+        primitive: gl.POINTS
+      });
+      _this4.layer.models = [model];
+    })();
+  }
+}

package/es/point/models/index.d.ts

@@ -0,0 +1,5 @@
+export type PointType = 'fillImage' | 'fill' | 'radar' | 'image' | 'normal' | 'simplePoint' | 'extrude' | 'text' | 'earthFill' | 'earthExtrude';
+declare const PointModels: {
+    [key in PointType]: any;
+};
+export default PointModels;

package/es/point/models/index.js

@@ -0,0 +1,24 @@
+import SimplePoint from "./billboard_point";
+import EarthExtrudeModel from "./earthExtrude";
+// earth
+import EarthFillModel from "./earthFill";
+import ExtrudeModel from "./extrude";
+import FillModel from "./fill";
+import FillImageModel from "./fillImage";
+import IMageModel from "./image";
+import NormalModel from "./normal";
+import Radar from "./radar";
+import TextModel from "./text";
+const PointModels = {
+  fillImage: FillImageModel,
+  fill: FillModel,
+  radar: Radar,
+  image: IMageModel,
+  normal: NormalModel,
+  simplePoint: SimplePoint,
+  extrude: ExtrudeModel,
+  text: TextModel,
+  earthFill: EarthFillModel,
+  earthExtrude: EarthExtrudeModel
+};
+export default PointModels;

package/es/point/models/normal.d.ts

@@ -0,0 +1,36 @@
+import type { IEncodeFeature, IModel } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+import type { IPointLayerStyleOptions } from '../../core/interface';
+export declare function PointTriangulation(feature: IEncodeFeature): {
+    vertices: number[];
+    indices: number[];
+    size: number;
+};
+export default class NormalModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        SIZE: number;
+    };
+    getDefaultStyle(): Partial<IPointLayerStyleOptions>;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+}

package/es/point/models/normal.js

@@ -0,0 +1,89 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { AttributeType, gl } from '@antv/l7-core';
+import BaseModel from "../../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";
+export function PointTriangulation(feature) {
+  const coordinates = feature.coordinates;
+  return {
+    vertices: [...coordinates],
+    indices: [0],
+    size: coordinates.length
+  };
+}
+export default class NormalModel extends BaseModel {
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9
+    });
+  }
+  getDefaultStyle() {
+    return {
+      blend: 'additive'
+    };
+  }
+  getCommonUniformsInfo() {
+    const commonOptions = {
+      u_size_scale: 0.5
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      _this2.layer.triangulation = PointTriangulation;
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'pointNormal',
+        vertexShader: normalVert,
+        fragmentShader: normalFrag,
+        triangulation: PointTriangulation,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        depth: {
+          enable: false
+        },
+        primitive: gl.POINTS,
+        pick: false
+      });
+      return [model];
+    })();
+  }
+  clearModels() {
+    return;
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 20层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 1
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+  }
+}

package/es/point/models/radar.d.ts

@@ -0,0 +1,37 @@
+import type { IAnimateOption, IAttribute, IElements, IModel, IModelUniform } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class RadarModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        SIZE: number;
+        EXTRUDE: number;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    getAnimateUniforms(): IModelUniform;
+    getAttribute(): {
+        attributes: {
+            [attributeName: string]: IAttribute;
+        };
+        elements: IElements;
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    protected animateOption2Array(option: Partial<IAnimateOption>): number[];
+    protected registerBuiltinAttributes(): void;
+}

package/es/point/models/radar.js

@@ -0,0 +1,115 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { AttributeType, gl } from '@antv/l7-core';
+import BaseModel from "../../core/BaseModel";
+import { SizeUnitType } from "../../core/interface";
+import { PointFillTriangulation } from "../../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";
+export default class RadarModel extends BaseModel {
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      EXTRUDE: 10
+    });
+  }
+  getCommonUniformsInfo() {
+    const {
+      blend,
+      speed = 1,
+      unit = 'pixel'
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_additive: blend === 'additive' ? 1.0 : 0.0,
+      u_size_unit: SizeUnitType[unit],
+      u_speed: speed,
+      u_time: this.layer.getLayerAnimateTime()
+    }; //1+1+1+1
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  getAnimateUniforms() {
+    return {};
+  }
+  getAttribute() {
+    return this.styleAttributeService.createAttributesAndIndices(this.layer.getEncodedData(), PointFillTriangulation);
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'pointRadar',
+        vertexShader: pointFillVert,
+        fragmentShader: pointFillFrag,
+        triangulation: PointFillTriangulation,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        depth: {
+          enable: false
+        }
+      });
+      return [model];
+    })();
+  }
+
+  // overwrite baseModel func
+  animateOption2Array(option) {
+    return [option.enable ? 0 : 1.0, option.speed || 1, option.rings || 3, 0];
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 20层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'extrude',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Extrude',
+        shaderLocation: this.attributeLocation.EXTRUDE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 3,
+        update: (feature, featureIdx, vertex, attributeIdx) => {
+          const extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0];
+          const extrudeIndex = attributeIdx % 4 * 3;
+          return [extrude[extrudeIndex], extrude[extrudeIndex + 1], extrude[extrudeIndex + 2]];
+        }
+      }
+    });
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: AttributeType.Attribute,
+      descriptor: {
+        shaderLocation: this.attributeLocation.SIZE,
+        name: 'a_Size',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 5
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+  }
+}

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

@@ -0,0 +1,85 @@
+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): {
+    vertices: number[];
+    indices: number[];
+    size: number;
+};
+export default class TextModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        SIZE: number;
+        TEXT_OFFSETS: number;
+        UV: number;
+    };
+    glyphInfo: IEncodeFeature[];
+    glyphInfoMap: {
+        [key: string]: {
+            shaping: any;
+            glyphQuads: IGlyphQuad[];
+            centroid: number[];
+        };
+    };
+    private rawEncodeData;
+    private texture;
+    private currentZoom;
+    private extent;
+    private textureHeight;
+    private textCount;
+    private preTextStyle;
+    getUninforms(): IModelUniform;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    needUpdate(): Promise<boolean>;
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+    private bindEvent;
+    private mapping;
+    private textExtent;
+    /**
+     * 生成文字纹理（生成文字纹理字典）
+     */
+    private initTextFont;
+    /**
+     * 生成 iconfont 纹理字典
+     */
+    private initIconFontTex;
+    private getTextStyle;
+    /**
+     * 生成文字布局（对照文字纹理字典提取对应文字的位置很好信息）
+     */
+    private generateGlyphLayout;
+    private getFontServiceMapping;
+    private getFontServiceCanvas;
+    /**
+     * 文字避让 depend on originCentorid
+     */
+    private filterGlyphs;
+    /**
+     * 初始化文字布局
+     */
+    private initGlyph;
+    /**
+     * 更新文字纹理
+     */
+    private updateTexture;
+    private reBuildModel;
+}