fix: text update color

packages/layers/src/plugins/DataMappingPlugin.ts

@@ -64,7 +64,13 @@ export default class DataMappingPlugin implements ILayerPlugin {
         if (filter?.needRemapping) {
           layer.setEncodedData(this.mapping(attributes, filterData));
         } else {
-          layer.setEncodedData(this.mapping(attributesToRemapping, filterData));
+          layer.setEncodedData(
+            this.mapping(
+              attributesToRemapping,
+              filterData,
+              layer.getEncodedData(),
+            ),
+          );
         }
 
         this.logger.debug('remapping finished');
@@ -99,11 +105,14 @@ export default class DataMappingPlugin implements ILayerPlugin {
   private mapping(
     attributes: IStyleAttribute[],
     data: IParseDataItem[],
+    predata?: IEncodeFeature[],
   ): IEncodeFeature[] {
-    return data.map((record: IParseDataItem) => {
+    return data.map((record: IParseDataItem, i) => {
+      const preRecord = predata ? predata[i] : {};
       const encodeRecord: IEncodeFeature = {
         id: record._id,
         coordinates: record.coordinates,
+        ...preRecord,
       };
       attributes
         .filter((attribute) => attribute.scale !== undefined)

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

@@ -86,6 +86,13 @@ export default class TextModel extends BaseModel {
   private extent: [[number, number], [number, number]];
   private textureHeight: number = 0;
   private preTextStyle: Partial<IPointTextLayerStyleOptions> = {};
+  private glyphInfoMap: {
+    [key: string]: {
+      shaping: any;
+      glyphQuads: IGlyphQuad[];
+      centroid: number[];
+    };
+  } = {};
 
   public getUninforms(): IModelUniform {
     const {
@@ -284,7 +291,7 @@ export default class TextModel extends BaseModel {
     } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
     const data = this.layer.getEncodedData();
     this.glyphInfo = data.map((feature: IEncodeFeature) => {
-      const { shape = '', coordinates } = feature;
+      const { shape = '', coordinates, id } = feature;
       const shaping = shapeText(
         shape.toString(),
         mapping,
@@ -298,6 +305,13 @@ export default class TextModel extends BaseModel {
       feature.shaping = shaping;
       feature.glyphQuads = glyphQuads;
       feature.centroid = calculteCentroid(coordinates);
+      if (id) {
+        this.glyphInfoMap[id] = {
+          shaping,
+          glyphQuads,
+          centroid: calculteCentroid(coordinates),
+        };
+      }
       return feature;
     });
   }

stories/Layers/components/Text.tsx

@@ -39,15 +39,15 @@ export default class TextLayerDemo extends React.Component {
           y: 'w',
         },
       })
-      // .shape('m', 'text')
-      .shape('circle')
+      .shape('m', 'text')
+      // .shape('circle')
       .size(12)
       .filter('t', (t) => {
         return t > 14;
       })
       .color('red')
       .style({
-        // textAllowOverlap: true,
+        textAllowOverlap: true,
         // fontWeight: 200,
         // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
         // textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
@@ -90,12 +90,12 @@ export default class TextLayerDemo extends React.Component {
       });
 
     rasterFolder
-      .add(styleOptions, 'strokeWidth', 0, 1000)
+      .add(styleOptions, 'strokeWidth', 0, 10)
       .onChange((strokeWidth: number) => {
-        // pointLayer.filter('t', (t: number) => {
-        //   return t > strokeWidth;
-        // });
-        pointLayer.setData(pointsData.list.slice(0, strokeWidth));
+        pointLayer.filter('t', (t: number) => {
+          return t > strokeWidth;
+        });
+        // pointLayer.setData(pointsData.list.slice(0, strokeWidth));
         scene.render();
       });
     rasterFolder