feat: 文字支持textoffset,anchor

dev-demos/features/point/demos/text2.tsx

@@ -0,0 +1,80 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap} from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+    useEffect( () => {
+        const scene = new Scene({
+            id: 'map',
+            map: new GaodeMap({
+              center: [ 110, 36 ],
+              style: 'blank',
+              zoom: 3
+            })
+          });
+          scene.on('loaded', () => {
+            fetch('https://mdn.alipayobjects.com/afts/file/A*N5AuT5BKK3gAAAAAAAAAAAAADrd2AQ/china_point.json')
+              .then(res => res.json())
+              .then(data => {
+                const pointLayer1 = new PointLayer({})
+                  .source(data)
+                  .shape('circle')
+                  .size(5)
+                  .color('blue')
+                  .style({
+                    stroke: '#f00',
+                    strokeWidth: 2,
+                    offset: [ 10, 10 ]
+                  })
+                const pointLayer = new PointLayer({})
+                  .source(data)
+                  .shape('NAME', 'text')
+                  .size(12)
+                  .color('red')
+                  .scale('Alignment', {
+                    type: 'cat',
+                    range: [ '1', '2', '3' ],
+                  })
+                  .style({
+                    // textAllowOverlap: true,
+                    textAnchor: {
+                      field:'Alignment',
+                      value:[ 'left', 'top', 'right' ],
+                    },// 文本相对锚点的位置 center|left|right|top|bottom|top-left
+                    // textOffset: {
+                    //     field:'Location',
+                    //     value: (v)=>{
+                    //         return [v *2, 10+ 20* Math.random()]
+                    //     }
+                    // }, // 文本相对锚点的偏移量 [水平, 垂直]
+                    spacing: 2, // 字符间距
+                    padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+                    stroke: '#ffffff', // 描边颜色
+                    strokeWidth: 2, // 描边宽度
+                    strokeOpacity: 1.0
+                  });
+                scene.addLayer(pointLayer1);
+                scene.addLayer(pointLayer);
+
+              });
+
+          });
+
+          return ()=>{
+            scene.destroy();
+          }
+
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+

dev-demos/features/point/pointText2.md

@@ -0,0 +1,3 @@
+### Point - text2
+#### 文本偏移
+<code src="./demos/text2.tsx"></code>

packages/core/src/services/layer/ILayerService.ts

@@ -344,7 +344,8 @@ export interface ILayer {
   layerPickService: ILayerPickService;
   textureService: ITextureService;
   sourceLayer?: string;
-  enableEncodeStyles: string[];
+  enableShaderEncodeStyles: string[];
+  enableDataEncodeStyles: string[];
   parent: ILayer;
   id: string; // 一个场景中同一类型 Layer 可能存在多个
   type: string; // 代表 Layer 的类型

packages/layers/src/core/BaseLayer.ts

@@ -224,7 +224,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
 
   public encodeStyleAttribute: Record<string, any> = {};
 
-  public enableEncodeStyles: string[] = [];
+  // Shader 的数据映射
+  public enableShaderEncodeStyles: string[] = [];
+
+  // 数据层数据映射
+
+  public enableDataEncodeStyles: string[] = [];
+
+  public enablg: string[] = [];
 
   /**
    * 待更新样式属性，在初始化阶段完成注册
@@ -731,9 +738,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     Object.keys(options).forEach((key: string) => {
       if (
         // 需要数据映射
-        this.enableEncodeStyles.includes(key) && // 支持的数据映射类型
-        isPlainObject(options[key]) && //
-        (options[key].field || options[key].value) && // 有数据映射的配置
+        [
+          this.enableShaderEncodeStyles,
+          ...this.enableDataEncodeStyles,
+        ].includes(key) &&
+        isPlainObject(options[key]) &&
+        (options[key].field || options[key].value) &&
         !isEqual(this.encodeStyleAttribute[key], options[key]) // 防止计算属性重复计算
       ) {
         this.encodeStyleAttribute[key] = options[key];

packages/layers/src/core/BaseModel.ts

@@ -259,20 +259,22 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
       offsets: 'vec2',
       textOffset: 'vec2',
     };
-    this.layer.enableEncodeStyles.forEach((key: string) => {
+    this.layer.enableShaderEncodeStyles.forEach((key: string) => {
       if (encodeStyleAttribute[key]) {
         str += `#define USE_ATTRIBUTE_${key.toUpperCase()} 0.0; \n\n`;
       }
       str += `
-      #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
-  attribute ${attrType[key]} a_${key.charAt(0).toUpperCase() + key.slice(1)};
-#else
-  uniform ${attrType[key]} u_${key};
-#endif\n
-`;
+          #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
+      attribute ${attrType[key]} a_${
+        key.charAt(0).toUpperCase() + key.slice(1)
+      };
+    #else
+      uniform ${attrType[key]} u_${key};
+    #endif\n
+    `;
     });
     let innerStr = '';
-    this.layer.enableEncodeStyles.forEach((key) => {
+    this.layer.enableShaderEncodeStyles.forEach((key) => {
       innerStr += `\n
 #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
   ${attrType[key]} ${key}  = a_${key.charAt(0).toUpperCase() + key.slice(1)};
@@ -298,7 +300,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
       stroke: [1, 0, 0, 1],
       offsets: [0, 0],
     };
-    this.layer.enableEncodeStyles.forEach((key) => {
+    this.layer.enableShaderEncodeStyles.forEach((key) => {
       if (!this.layer.encodeStyleAttribute[key]) {
         // @ts-ignore
         const keyValue = this.layer.getLayerConfig()[key];

packages/layers/src/line/index.ts

@@ -5,7 +5,7 @@ import LineModels, { LineModelType } from './models';
 
 export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
   public type: string = 'LineLayer';
-  public enableEncodeStyles = ['opacity', 'offsets', 'stroke'];
+  public enableShaderEncodeStyles = ['opacity', 'offsets', 'stroke'];
   public arrowInsertCount: number = 0;
   public defaultSourceConfig = {
     data: [

packages/layers/src/line/models/arc_3d.ts

@@ -26,7 +26,7 @@ const lineStyleObj: { [key: string]: number } = {
 };
 export default class Arc3DModel extends BaseModel {
   protected texture: ITexture2D;
-  // public enableEncodeStyles = ['opacity'];
+  // public enableShaderEncodeStyles = ['opacity'];
   public getUninforms(): IModelUniform {
     const {
       sourceColor,

packages/layers/src/point/index.ts

@@ -5,7 +5,8 @@ import PointModels, { PointType } from './models/index';
 
 export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
   public type: string = 'PointLayer';
-  public enableEncodeStyles = ['opacity', 'offsets', 'stroke'];
+  public enableShaderEncodeStyles = ['opacity', 'offsets', 'stroke'];
+  public enableDataEncodeStyles = ['textOffset', 'textAnchor'];
   public defaultSourceConfig = {
     data: [],
     options: {

packages/layers/src/point/models/text.ts

@@ -101,7 +101,6 @@ export default class TextModel extends BaseModel {
   private preTextStyle: Partial<IPointLayerStyleOptions> = {};
   public getUninforms(): IModelUniform {
     const {
-      opacity = 1.0,
       stroke = '#fff',
       strokeWidth = 0,
       halo = 0.5,
@@ -118,7 +117,6 @@ export default class TextModel extends BaseModel {
     this.preTextStyle = this.getTextStyle();
     return {
       u_raisingHeight: Number(raisingHeight),
-      // u_opacity: opacity,
       u_stroke_width: strokeWidth,
       u_stroke_color: rgb2arr(stroke),
       u_sdf_map: this.texture,
@@ -398,18 +396,26 @@ export default class TextModel extends BaseModel {
     const data = this.rawEncodeData;
     this.glyphInfo = data.map((feature: IEncodeFeature) => {
       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 = shapeText(
         shape.toString(),
         mapping,
         // @ts-ignore
         size,
-        textAnchor,
+        anchor,
         'left',
         spacing,
-        textOffset, // || feature['textOffset'] || [0, 0],// TODO: 文字偏移量 CPU 计算
+        offset, //
         iconfont,
       );
-      const glyphQuads = getGlyphQuads(shaping, textOffset, false);
+
+      const glyphQuads = getGlyphQuads(shaping, offset, false);
       feature.shaping = shaping;
       feature.glyphQuads = glyphQuads;
       // feature.centroid = calculteCentroid(coordinates);

packages/layers/src/polygon/index.ts

@@ -5,7 +5,7 @@ import PolygonModels, { PolygonModelType } from './models/';
 
 export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
   public type: string = 'PolygonLayer';
-  public enableEncodeStyles = ['opacity'];
+  public enableShaderEncodeStyles = ['opacity'];
   public defaultSourceConfig: {
     data: [];
     options: {