@antv/l7-layers 2.25.7 → 2.25.10

package/lib/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;
+}

package/lib/point/models/text.js

@@ -0,0 +1,512 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextTrianglation = TextTrianglation;
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Core = require("@antv/l7-core");
+var _l7Utils = require("@antv/l7-utils");
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _collisionIndex = _interopRequireDefault(require("../../utils/collision-index"));
+var _symbolLayout = require("../../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";
+/* 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 {
+  isEqual
+} = _l7Utils.lodashUtil;
+function TextTrianglation(feature) {
+  // @ts-ignore
+  const that = this;
+  const id = feature.id;
+  const vertices = [];
+  const indices = [];
+  if (!that.glyphInfoMap || !that.glyphInfoMap[id]) {
+    return {
+      vertices: [],
+      // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
+      indices: [],
+      size: 7
+    };
+  }
+  const centroid = that.glyphInfoMap[id].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);
+  });
+  return {
+    vertices,
+    // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
+    indices,
+    size: 7
+  };
+}
+class TextModel extends _BaseModel.default {
+  constructor(...args) {
+    var _this;
+    super(...args);
+    _this = this;
+    (0, _defineProperty2.default)(this, "glyphInfo", void 0);
+    (0, _defineProperty2.default)(this, "glyphInfoMap", {});
+    (0, _defineProperty2.default)(this, "rawEncodeData", void 0);
+    (0, _defineProperty2.default)(this, "texture", void 0);
+    (0, _defineProperty2.default)(this, "currentZoom", -1);
+    (0, _defineProperty2.default)(this, "extent", void 0);
+    (0, _defineProperty2.default)(this, "textureHeight", 0);
+    (0, _defineProperty2.default)(this, "textCount", 0);
+    (0, _defineProperty2.default)(this, "preTextStyle", {});
+    (0, _defineProperty2.default)(this, "mapping", /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
+      _this.initGlyph(); //
+      _this.updateTexture();
+      yield _this.reBuildModel();
+    }));
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      SIZE: 9,
+      TEXT_OFFSETS: 10,
+      UV: 11
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption), {
+      u_sdf_map: this.textures[0]
+    });
+  }
+  getCommonUniformsInfo() {
+    const {
+      stroke = '#fff',
+      strokeWidth = 0,
+      halo = 0.5,
+      gamma = 2.0,
+      raisingHeight = 0
+    } = this.layer.getLayerConfig();
+    const mapping = this.getFontServiceMapping();
+    const canvas = this.getFontServiceCanvas();
+    if (mapping && Object.keys(mapping).length !== this.textCount && canvas) {
+      this.updateTexture();
+      this.textCount = Object.keys(mapping).length;
+    }
+    this.preTextStyle = this.getTextStyle();
+    const commonOptions = {
+      u_stroke_color: (0, _l7Utils.rgb2arr)(stroke),
+      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_gamma_scale: gamma,
+      u_halo_blur: halo
+    };
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      // 绑定事件
+      _this2.bindEvent();
+      _this2.extent = _this2.textExtent();
+      _this2.rawEncodeData = _this2.layer.getEncodedData();
+      _this2.preTextStyle = _this2.getTextStyle();
+      _this2.initUniformsBuffer();
+      return _this2.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this3 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const {
+        textAllowOverlap = false
+      } = _this3.layer.getLayerConfig();
+
+      //  this.mapping(); 重复调用
+      _this3.initGlyph(); //
+      _this3.updateTexture();
+      if (!textAllowOverlap) {
+        _this3.filterGlyphs();
+      }
+      const model = yield _this3.layer.buildLayerModel({
+        moduleName: 'pointText',
+        vertexShader: textVert,
+        fragmentShader: textFrag,
+        defines: _this3.getDefines(),
+        inject: _this3.getInject(),
+        triangulation: TextTrianglation.bind(_this3),
+        depth: {
+          enable: false
+        }
+      });
+      return [model];
+    })();
+  }
+  // 需要更新的场景
+  // 1. 文本偏移量发生改变
+  // 2. 文本锚点发生改变
+  // 3. 文本允许重叠发生改变
+  // 4. 文本字体发生改变
+  // 5. 文本字体粗细发生改变
+  needUpdate() {
+    var _this4 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      const {
+        textAllowOverlap = false,
+        textAnchor = 'center',
+        textOffset,
+        padding,
+        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)) {
+        yield _this4.mapping();
+        return true;
+      }
+      if (textAllowOverlap) {
+        // 小于不做避让
+        return false;
+      }
+
+      // textAllowOverlap 发生改变
+      const zoom = _this4.mapService.getZoom();
+      const extent = _this4.mapService.getBounds();
+      const flag = (0, _l7Utils.boundsContains)(_this4.extent, extent);
+      // 文本不能压盖则进行过滤
+      if (Math.abs(_this4.currentZoom - zoom) > 0.5 || !flag || textAllowOverlap !== _this4.preTextStyle.textAllowOverlap) {
+        // TODO this.mapping 数据未变化，避让
+        yield _this4.reBuildModel();
+        return true;
+      }
+      return false;
+    })();
+  }
+  clearModels() {
+    var _this$texture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+    // TODO this.mapping
+    this.layer.off('remapping', this.mapping);
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 20层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'textOffsets',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        shaderLocation: this.attributeLocation.TEXT_OFFSETS,
+        name: 'a_textOffsets',
+        // 文字偏移量
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[5], vertex[6]];
+        }
+      }
+    });
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'textUv',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_tex',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4]];
+        }
+      }
+    });
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'size',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Size',
+        shaderLocation: this.attributeLocation.SIZE,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: _l7Core.gl.DYNAMIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 1,
+        update: feature => {
+          const {
+            size = 12
+          } = feature;
+          return Array.isArray(size) ? [size[0]] : [size];
+        }
+      }
+    });
+  }
+  bindEvent() {
+    if (!this.layer.isTileLayer) {
+      // 重新绑定
+      this.layer.on('remapping', this.mapping);
+    }
+  }
+  textExtent() {
+    const bounds = this.mapService.getBounds();
+    return (0, _l7Utils.padBounds)(bounds, 0.5);
+  }
+  /**
+   * 生成文字纹理（生成文字纹理字典）
+   */
+  initTextFont() {
+    const {
+      fontWeight,
+      fontFamily
+    } = this.getTextStyle();
+    const data = this.rawEncodeData;
+    const characterSet = [];
+    data.forEach(item => {
+      let {
+        shape = ''
+      } = item;
+      shape = shape.toString();
+      for (const char of shape) {
+        // 去重
+        if (characterSet.indexOf(char) === -1) {
+          characterSet.push(char);
+        }
+      }
+    });
+    this.fontService.setFontOptions({
+      characterSet,
+      fontWeight,
+      fontFamily,
+      iconfont: false
+    });
+  }
+
+  /**
+   * 生成 iconfont 纹理字典
+   */
+  initIconFontTex() {
+    const {
+      fontWeight,
+      fontFamily
+    } = this.getTextStyle();
+    const data = this.rawEncodeData;
+    const characterSet = [];
+    data.forEach(item => {
+      let {
+        shape = ''
+      } = item;
+      shape = `${shape}`;
+      if (characterSet.indexOf(shape) === -1) {
+        characterSet.push(shape);
+      }
+    });
+    this.fontService.setFontOptions({
+      characterSet,
+      fontWeight,
+      fontFamily,
+      iconfont: true
+    });
+  }
+  getTextStyle() {
+    const {
+      fontWeight = '400',
+      fontFamily = 'sans-serif',
+      textAllowOverlap = false,
+      padding = [0, 0],
+      textAnchor = 'center',
+      textOffset = [0, 0],
+      opacity = 1,
+      strokeOpacity = 1,
+      strokeWidth = 0,
+      stroke = '#000'
+    } = this.layer.getLayerConfig();
+    return {
+      fontWeight,
+      fontFamily,
+      textAllowOverlap,
+      padding,
+      textAnchor,
+      textOffset,
+      opacity,
+      strokeOpacity,
+      strokeWidth,
+      stroke
+    };
+  }
+
+  /**
+   * 生成文字布局（对照文字纹理字典提取对应文字的位置很好信息）
+   */
+  generateGlyphLayout(iconfont) {
+    const mapping = this.getFontServiceMapping();
+    const {
+      spacing = 2,
+      textAnchor = 'center',
+      textOffset
+    } = this.layer.getLayerConfig();
+    const data = this.rawEncodeData;
+    this.glyphInfo = data.map(feature => {
+      const {
+        shape = '',
+        id,
+        size = 1
+      } = feature;
+      const offset = feature.textOffset ? feature.textOffset : textOffset || [0, 0];
+      const anchor = feature.textAnchor ? feature.textAnchor : textAnchor || 'center';
+      const shaping = (0, _symbolLayout.shapeText)(shape.toString(), mapping,
+      // @ts-ignore
+      size, anchor, 'left', spacing, offset,
+      //
+      iconfont);
+      const glyphQuads = (0, _symbolLayout.getGlyphQuads)(shaping, offset, false);
+      feature.shaping = shaping;
+      feature.glyphQuads = glyphQuads;
+      // feature.centroid = calculteCentroid(coordinates);
+
+      feature.centroid = (0, _l7Utils.calculateCentroid)(feature.coordinates);
+      this.glyphInfoMap[id] = {
+        shaping,
+        glyphQuads,
+        centroid: (0, _l7Utils.calculateCentroid)(feature.coordinates)
+      };
+      return feature;
+    });
+  }
+  getFontServiceMapping() {
+    const {
+      fontWeight = '400',
+      fontFamily = 'sans-serif'
+    } = this.layer.getLayerConfig();
+    return this.fontService.getMappingByKey(`${fontFamily}_${fontWeight}`);
+  }
+  getFontServiceCanvas() {
+    const {
+      fontWeight = '400',
+      fontFamily = 'sans-serif'
+    } = this.layer.getLayerConfig();
+    // 更新文字布局
+    return this.fontService.getCanvasByKey(`${fontFamily}_${fontWeight}`);
+  }
+
+  /**
+   * 文字避让 depend on originCentorid
+   */
+  filterGlyphs() {
+    const {
+      padding = [0, 0],
+      textAllowOverlap = false
+    } = this.layer.getLayerConfig();
+    if (textAllowOverlap) {
+      // 如果允许文本覆盖
+      return;
+    }
+    this.glyphInfoMap = {};
+    this.currentZoom = this.mapService.getZoom();
+    this.extent = this.textExtent();
+    const {
+      width,
+      height
+    } = this.rendererService.getViewportSize();
+    const collisionIndex = new _collisionIndex.default(width, height);
+    const filterData = this.glyphInfo.filter(feature => {
+      const {
+        shaping,
+        id = 0
+      } = feature;
+      const centroid = feature.centroid;
+      const size = feature.size;
+      const fontScale = size / 16;
+      const pixels = this.mapService.lngLatToContainer(centroid);
+      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],
+        anchorPointX: pixels.x,
+        anchorPointY: pixels.y
+      });
+      if (box && box.length) {
+        collisionIndex.insertCollisionBox(box, id);
+        return true;
+      } else {
+        return false;
+      }
+    });
+    filterData.forEach(item => {
+      // @ts-ignore
+      this.glyphInfoMap[item.id] = item;
+    });
+    // this.layer.setEncodedData(filterData);
+  }
+  /**
+   * 初始化文字布局
+   */
+  initGlyph() {
+    const {
+      iconfont = false
+    } = this.layer.getLayerConfig();
+    // 1.生成文字纹理（或是生成 iconfont）
+    iconfont ? this.initIconFontTex() : this.initTextFont();
+    // 2.生成文字布局
+    this.generateGlyphLayout(iconfont);
+  }
+  /**
+   * 更新文字纹理
+   */
+  updateTexture() {
+    const {
+      createTexture2D
+    } = this.rendererService;
+    const canvas = this.getFontServiceCanvas();
+    this.textureHeight = canvas.height;
+    if (this.texture) {
+      this.texture.destroy();
+    }
+    this.texture = createTexture2D({
+      data: canvas,
+      mag: _l7Core.gl.LINEAR,
+      min: _l7Core.gl.LINEAR,
+      width: canvas.width,
+      height: canvas.height
+    });
+    this.textures = [this.texture];
+  }
+  reBuildModel() {
+    var _this5 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this5.filterGlyphs();
+      const model = yield _this5.layer.buildLayerModel({
+        moduleName: 'pointText',
+        vertexShader: textVert,
+        fragmentShader: textFrag,
+        triangulation: TextTrianglation.bind(_this5),
+        defines: _this5.getDefines(),
+        inject: _this5.getInject(),
+        depth: {
+          enable: false
+        }
+      });
+      // TODO 渲染流程待修改
+      _this5.layer.models = [model];
+    })();
+  }
+}
+exports.default = TextModel;

package/lib/point/shaders/billboard/billboard_point_frag.glsl

@@ -0,0 +1,48 @@
+layout(std140) uniform commonUniorm {
+  vec4 u_stroke_color;
+  float u_additive;
+  float u_stroke_opacity;
+  float u_stroke_width;
+};
+
+in vec4 v_color;
+in float v_blur;
+in float v_innerRadius;
+
+out vec4 outputColor;
+
+#pragma include "picking"
+void main() {
+  vec2 center = vec2(0.5);
+
+  // Tip: 片元到中心点的距离 0 - 1
+  float fragmengTocenter = distance(center, gl_PointCoord) * 2.0;
+  // Tip: 片元的剪切成圆形
+  float circleClipOpacity = 1.0 - smoothstep(v_blur, 1.0, fragmengTocenter);
+
+  if (v_innerRadius < 0.99) {
+    // 当存在 stroke 且 stroke > 0.01
+    float blurWidth = (1.0 - v_blur) / 2.0;
+    vec4 stroke = vec4(u_stroke_color.rgb, u_stroke_opacity);
+    if (fragmengTocenter > v_innerRadius + blurWidth) {
+      outputColor = stroke;
+    } else if (fragmengTocenter > v_innerRadius - blurWidth) {
+      float mixR = (fragmengTocenter - (v_innerRadius - blurWidth)) / (blurWidth * 2.0);
+      outputColor = mix(v_color, stroke, mixR);
+    } else {
+      outputColor = v_color;
+    }
+  } else {
+    // 当不存在 stroke 或 stroke <= 0.01
+    outputColor = v_color;
+  }
+
+  outputColor = filterColor(outputColor);
+
+  if (u_additive > 0.0) {
+    outputColor *= circleClipOpacity;
+  } else {
+    outputColor.a *= circleClipOpacity;
+  }
+
+}

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

@@ -0,0 +1,33 @@
+
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;
+layout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;
+layout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;
+
+layout(std140) uniform commonUniorm {
+  vec4 u_stroke_color;
+  float u_additive;
+  float u_stroke_opacity;
+  float u_stroke_width;
+};
+
+out vec4 v_color;
+out float v_blur;
+out float v_innerRadius;
+
+#pragma include "projection"
+#pragma include "picking"
+#pragma include "project"
+void main() {
+  v_color = vec4(a_Color.xyz, a_Color.w * opacity);
+  v_blur = 1.0 - max(2.0 / a_Size, 0.05);
+  v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);
+
+  vec2 offset = project_pixel(u_offsets);
+
+  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);
+  gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));
+
+  gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
+  setPickingColor(a_PickingColor);
+}