feat: 样式数据映射 1.1 调整代码，提取公共部分到 BaseModel

packages/layers/src/core/BaseLayer.ts

@@ -1010,12 +1010,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     valuesOrCallback?: unknown[],
     defaultValues?: unknown[],
   ) {
-    // console.log({
-    //   values: isFunction(valuesOrCallback)
-    //     ? undefined
-    //     : valuesOrCallback || defaultValues,
-    //   callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined,
-    // })
     return {
       values: isFunction(valuesOrCallback)
         ? undefined

packages/layers/src/core/BaseModel.ts

@@ -24,17 +24,13 @@ import {
   Triangulation,
   TYPES,
 } from '@antv/l7-core';
+import { isColor, rgb2arr } from '@antv/l7-utils';
 import { BlendTypes } from '../utils/blend';
-import { getSize } from '../utils/dataMappingStyle';
+interface ICellProperty {
-
+  attr: string;
-interface IDataLayout {
+  count: number;
-  widthCount: number;
-  heightCount: number;
-  widthStep: number;
-  widthStart: number;
-  heightStep: number;
-  heightStart: number;
 }
+
 export default class BaseModel<ChildLayerStyleOptions = {}>
   implements ILayerModel {
   public triangulation: Triangulation;
@@ -43,17 +39,22 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
   public createTexture2D: (
     options: ITexture2DInitializationOptions,
   ) => ITexture2D;
-  public dataLayout: IDataLayout = {
-    // 默认值
-    widthCount: 1024,
-    heightCount: 1,
-    widthStep: 1 / 1024,
-    widthStart: 1 / 2048,
-    heightStep: 1,
-    heightStart: 0.5,
-  };
 
   protected layer: ILayer;
+  protected DATA_TEXTURE_WIDTH: number; // 默认有多少列（宽度）
+  protected rowCount: number; // 计算得到的当前数据纹理有多少行（高度）
+  protected curretnOpacity: any = ''; // 当前的 opacity 值
+  protected curretnStrokeOpacity: any = ''; // 当前的 strokeOpacity 值
+  protected currentStrokeColor: any = ''; // 当前的 strokeColor 值
+  protected currentStrokeWidth: any = ''; // 当前的 strokeWidth 值
+  protected currentOffsets: any = ''; // 当前的 strokeOffsets 值
+  protected cellLength: number; // 单个 cell 的长度
+  protected cellProperties: ICellProperty[]; // 需要进行数据映射的属性集合
+  protected hasOpacity: number = 0;
+  protected hasStrokeOpacity: number = 0;
+  protected hasStrokeWidth: number = 0;
+  protected hasStroke: number = 0;
+  protected hasOffsets: number = 0;
 
   @lazyInject(TYPES.IGlobalConfigService)
   protected readonly configService: IGlobalConfigService;
@@ -75,10 +76,6 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
   protected cameraService: ICameraService;
   protected layerService: ILayerService;
 
-  protected opacityTexture: ITexture2D;
-  protected strokeOpacityTexture: ITexture2D;
-  protected strokeTexture: ITexture2D;
-  protected strokeWidthTexture: ITexture2D;
   // style texture data mapping
 
   constructor(layer: ILayer) {
@@ -110,25 +107,101 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
 
     const { createTexture2D } = this.rendererService;
     this.createTexture2D = createTexture2D;
-    // 根据数据长度构建样式数据映射到纹理上时需要到布局数值 为纹理贴图映射样式数据做准备工作
+    this.DATA_TEXTURE_WIDTH = 1024; // 数据纹理固定宽度
-    this.initEncodeDataLayout(this.layer.getEncodedData().length);
+    this.rowCount = 1;
+    this.cellLength = 0;
+    this.cellProperties = [];
+  }
+
+  // style datatexture mapping
+
+  /**
+   * 补空位
+   * @param d
+   * @param count
+   */
+  public patchMod(d: number[], count: number) {
+    for (let i = 0; i < count; i++) {
+      d.push(-1);
+    }
   }
 
   /**
-   * 根据数据长度构建样式数据映射到纹理上时需要到布局数值
+   * 根据映射的数据字段往推入数据
-   * @param dataLength
+   * @param d
+   * @param cellData
+   * @param cellPropertiesLayouts
    */
-  public initEncodeDataLayout(dataLength: number) {
+  public patchData(d: number[], cellData: any, cellPropertiesLayouts: any) {
-    const { width: widthCount, height: heightCount } = getSize(dataLength);
+    for (const layout of cellPropertiesLayouts) {
-    this.dataLayout.widthCount = widthCount;
+      const { attr, count } = layout;
-    this.dataLayout.heightCount = heightCount;
+      if (!cellData) {
+        if (attr === 'stroke') {
+          d.push(-1, -1, -1, -1);
+        } else if (attr === 'offsets') {
+          d.push(-1, -1);
+        } else {
+          d.push(-1);
+        }
+      } else {
+        const value = cellData[attr];
 
-    this.dataLayout.widthStep = 1 / widthCount;
+        if (value) {
-    this.dataLayout.widthStart = this.dataLayout.widthStep / 2;
+          // 数据中存在该属性
-    this.dataLayout.heightStep = 1 / heightCount;
+          if (attr === 'stroke') {
-    this.dataLayout.heightStart = this.dataLayout.heightStep / 2;
+            d.push(...rgb2arr(value));
+          } else if (attr === 'offsets') {
+            // d.push(...value)
+            d.push(-value[0], value[1]);
+          } else {
+            d.push(value);
+          }
+        } else {
+          // 若不存在时则补位
+          this.patchMod(d, count);
+        }
+      }
+    }
   }
 
+  /**
+   * 计算推入数据纹理的数据
+   * @param cellLength
+   * @param encodeData
+   * @param cellPropertiesLayouts
+   * @returns
+   */
+  public calDataFrame(
+    cellLength: number,
+    encodeData: any,
+    cellPropertiesLayouts: any,
+  ): any {
+    if (cellLength > this.DATA_TEXTURE_WIDTH) {
+      // console.log('failed');
+      return false;
+    }
+
+    const encodeDatalength = encodeData.length;
+    const rowCount = Math.ceil(
+      (encodeDatalength * cellLength) / this.DATA_TEXTURE_WIDTH,
+    ); // 有多少行
+
+    const totalLength = rowCount * this.DATA_TEXTURE_WIDTH;
+    const d: number[] = [];
+    for (let i = 0; i < encodeDatalength; i++) {
+      // 根据 encodeData 数据推入数据
+      const cellData = encodeData[i];
+      this.patchData(d, cellData, cellPropertiesLayouts);
+    }
+    for (let i = d.length; i < totalLength; i++) {
+      // 每行不足的部分用 -1 补足（数据纹理时 width * height 的矩形数据集合）
+      d.push(-1);
+    }
+    return { data: d, width: this.DATA_TEXTURE_WIDTH, height: rowCount };
+  }
+
+  // style datatexture mapping
+
   public getBlend(): IBlendOptions {
     const { blend = 'normal' } = this.layer.getLayerConfig();
     return BlendTypes[BlendType[blend]] as IBlendOptions;

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

@@ -17,12 +17,6 @@ import pointFillFrag from '../shaders/fill_frag.glsl';
 import pointFillVert from '../shaders/fill_vert.glsl';
 
 import { isArray, isNumber, isString } from 'lodash';
-import {
-  getSize,
-  getUvPosition,
-  initTextureFloatData,
-  initTextureVec4Data,
-} from '../../utils/dataMappingStyle';
 interface IPointLayerStyleOptions {
   opacity: any;
   strokeWidth: number;
@@ -30,115 +24,10 @@ interface IPointLayerStyleOptions {
   strokeOpacity: number;
   offsets: [number, number];
 }
-
-// 用于判断 opacity 的值是否发生该改变
-const curretnOpacity: any = '';
-const curretnStrokeOpacity: any = '';
-const currentStrokeColor: any = '';
-const currentStrokeWidth: any = '';
-
-let testTexture = true;
-
-const cellPropertiesLayout = [
-  { attr: 'opacity', flag: true, count: 1 },
-  { attr: 'strokeOpacity', flag: true, count: 1 },
-  { attr: 'strokeWidth', flag: true, count: 1 },
-  { attr: 'stroke', flag: true, count: 4 },
-];
-
-const WIDTH = 1024; // 数据纹理的固定长度
-// let WIDTH = 10
-let calHeight = 1;
-/**
- * 根据映射的数据字段往推入数据
- * @param d
- * @param cellData
- * @param cellPropertiesLayouts
- */
-function patchData(d: number[], cellData: any, cellPropertiesLayouts: any) {
-  for (const layout of cellPropertiesLayouts) {
-    const { attr, count } = layout;
-    if (!cellData) {
-      if (attr === 'stroke') {
-        d.push(-1, -1, -1, -1);
-      } else if (attr === 'offsets') {
-        d.push(-1, -1);
-      } else {
-        d.push(-1);
-      }
-    } else {
-      const value = cellData[attr];
-
-      if (value) {
-        // 数据中存在该属性
-        if (attr === 'stroke') {
-          d.push(...rgb2arr(value));
-        } else if (attr === 'offsets') {
-          // d.push(...value)
-          d.push(-value[0], value[1]);
-        } else {
-          d.push(value);
-        }
-      } else {
-        // 若不存在时则补位
-        patchMod(d, count);
-      }
-    }
-  }
-}
-/**
- * 补空位
- * @param d
- * @param count
- */
-function patchMod(d: number[], count: number) {
-  for (let i = 0; i < count; i++) {
-    d.push(-1);
-  }
-}
-/**
- * 计算推入数据纹理的数据
- * @param cellLength
- * @param encodeData
- * @param cellPropertiesLayouts
- * @returns
- */
-function calDataFrame(
-  cellLength: number,
-  encodeData: any,
-  cellPropertiesLayouts: any,
-): any {
-  if (cellLength > WIDTH) {
-    // console.log('failed');
-    return false;
-  }
-
-  const encodeDatalength = encodeData.length;
-  // WIDTH 行数固定
-  const rowCount = Math.ceil((encodeDatalength * cellLength) / WIDTH); // 有多少行
-
-  const totalLength = rowCount * WIDTH;
-  const d: number[] = [];
-  for (let i = 0; i < encodeDatalength; i++) {
-    // 根据 encodeData 数据推入数据
-    const cellData = encodeData[i];
-    patchData(d, cellData, cellPropertiesLayouts);
-  }
-  for (let i = d.length; i < totalLength; i++) {
-    // 每行不足的部分用 -1 补足（数据纹理时 width * height 的矩形数据集合）
-    d.push(-1);
-  }
-  // console.log(d, rowCount)
-  return { data: d, width: WIDTH, height: rowCount };
-}
 // 判断当前使用的 style 中的变量属性是否需要进行数据映射
-let hasOpacity = 0;
+
-let hasStrokeOpacity = 0;
-let hasStrokeWidth = 0;
-let hasStroke = 0;
-let hasOffsets = 0;
 export default class FillModel extends BaseModel {
-  protected testDataTexture: ITexture2D;
+  protected dataTexture: ITexture2D;
 
   /**
    * 判断 offsets 是否是常量
@@ -158,100 +47,133 @@ export default class FillModel extends BaseModel {
     }
   }
 
-  public isColorStatic(stroke: any) {
+  /**
-    if (
+   * 判断数据纹理是否需要重新计算 - 每一个layer 对象需要进行判断的条件都不一样，所以需要单独实现
-      isArray(stroke) &&
+   * @param opacity
-      stroke.length === 4 &&
+   * @param strokeOpacity
-      isNumber(stroke[0]) &&
+   * @param strokeWidth
-      isNumber(stroke[1]) &&
+   * @param stroke
-      isNumber(stroke[2]) &&
+   * @param offsets
-      isNumber(stroke[3])
+   * @returns
-    ) {
+   */
-      return true;
+  public isDataTextureUpdate(
-    } else {
+    opacity: any,
-      return false;
+    strokeOpacity: any,
+    strokeWidth: any,
+    stroke: any,
+    offsets: any,
+  ) {
+    let isUpdate = false;
+    if (this.curretnOpacity !== JSON.stringify(opacity)) {
+      // 判断 opacity 是否发生改变
+      isUpdate = true;
+      this.curretnOpacity = JSON.stringify(opacity);
     }
+    if (this.curretnStrokeOpacity !== JSON.stringify(strokeOpacity)) {
+      // 判断 strokeOpacity 是否发生改变
+      isUpdate = true;
+      this.curretnStrokeOpacity = JSON.stringify(strokeOpacity);
+    }
+    if (this.currentStrokeWidth !== JSON.stringify(strokeWidth)) {
+      // 判断 strokeWidth 是否发生改变
+      isUpdate = true;
+      this.currentStrokeWidth = JSON.stringify(strokeWidth);
+    }
+    if (this.currentStrokeColor !== JSON.stringify(stroke)) {
+      // 判断 stroke 是否发生改变
+      isUpdate = true;
+      this.currentStrokeColor = JSON.stringify(stroke);
+    }
+    if (this.currentOffsets !== JSON.stringify(offsets)) {
+      // 判断 offsets 是否发生改变
+      isUpdate = true;
+      this.currentOffsets = JSON.stringify(offsets);
+    }
+    if (this.dataTexture === undefined) {
+      isUpdate = true;
+    }
+    return isUpdate;
+  }
+
+  /**
+   * 清除上一次的计算结果 - 每一个layer 对象需要进行清除的内容都不一样，所以需要单独实现
+   */
+  public clearLastCalRes() {
+    this.cellProperties = []; // 清空上一次计算的需要进行数据映射的属性集合
+    this.cellLength = 0; // 清空上一次计算的 cell 的长度
+    this.hasOpacity = 0; // 清空上一次是否需要对 opacity 属性进行数据映射的判断
+    this.hasStrokeOpacity = 0; // 清空上一次是否需要对 strokeOpacity 属性进行数据映射的判断
+    this.hasStrokeWidth = 0; // 清空上一次是否需要对 strokeWidth 属性进行数据映射的判断
+    this.hasStroke = 0; // 清空上一次是否需要对 stroke 属性进行数据映射的判断
+    this.hasOffsets = 0; // 清空上一次是否需要对 offsets 属性进行数据映射的判断
   }
 
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
       strokeOpacity = 1,
-      strokeWidth = 2,
+      strokeWidth = 0,
-      stroke = [0, 0, 0, 0],
+      stroke = 'rgba(0,0,0,0)',
       offsets = [0, 0],
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
-    if (testTexture) {
+    if (
-      const cellProperties = []; // cell 的布局
+      this.isDataTextureUpdate(
-      let cellLength = 0; // cell 的长度
+        opacity,
+        strokeOpacity,
+        strokeWidth,
+        stroke,
+        offsets,
+      )
+    ) {
+      this.clearLastCalRes(); // 清除上一次的计算结果
 
-      if (!isNumber(opacity) && opacity !== undefined) {
+      if (!isNumber(opacity)) {
         // 数据映射
-        cellProperties.push({ attr: 'opacity', flag: true, count: 1 });
+        this.cellProperties.push({ attr: 'opacity', count: 1 });
-        hasOpacity = 1;
+        this.hasOpacity = 1;
-        cellLength += 1;
+        this.cellLength += 1;
-      } else {
-        // 常量
-        hasOpacity = 0;
       }
 
-      if (!isNumber(strokeOpacity) && strokeOpacity !== undefined) {
+      if (!isNumber(strokeOpacity)) {
         // 数据映射
-        cellProperties.push({ attr: 'strokeOpacity', flag: true, count: 1 });
+        this.cellProperties.push({ attr: 'strokeOpacity', count: 1 });
-        hasStrokeOpacity = 1;
+        this.hasStrokeOpacity = 1;
-        cellLength += 1;
+        this.cellLength += 1;
-      } else {
-        // 常量
-        hasStrokeOpacity = 0;
       }
 
-      if (!isNumber(strokeWidth) && strokeWidth !== undefined) {
+      if (!isNumber(strokeWidth)) {
         // 数据映射
-        cellProperties.push({ attr: 'strokeWidth', flag: true, count: 1 });
+        this.cellProperties.push({ attr: 'strokeWidth', count: 1 });
-        hasStrokeWidth = 1;
+        this.hasStrokeWidth = 1;
-        cellLength += 1;
+        this.cellLength += 1;
-      } else {
-        // 常量
-        hasStrokeWidth = 0;
       }
-      // console.log('stroke', stroke);
+
-      // if((!isString(stroke) || !isColor(stroke)) && stroke !== undefined) { // 数据映射
+      if (!isColor(stroke)) {
-      if (!this.isColorStatic(stroke)) {
         // 数据映射
-        cellProperties.push({ attr: 'stroke', flag: true, count: 4 });
+        this.cellProperties.push({ attr: 'stroke', count: 4 });
-        cellLength += 4;
+        this.cellLength += 4;
-        hasStroke = 1;
+        this.hasStroke = 1;
-      } else {
-        // 常量
-        hasStroke = 0;
       }
 
       if (!this.isOffsetStatic(offsets)) {
-        cellProperties.push({ attr: 'offsets', flag: true, count: 2 });
+        // 数据映射
-        cellLength += 2;
+        this.cellProperties.push({ attr: 'offsets', count: 2 });
-        hasOffsets = 1;
+        this.cellLength += 2;
-      } else {
+        this.hasOffsets = 1;
-        hasOffsets = 0;
       }
 
-      // console.log('cellProperties', cellProperties);
-      // console.log('cellLength', cellLength);
-      // console.log('hasStrokeOpacity', hasStrokeOpacity)
-      // console.log('hasStrokeWidth', hasStrokeWidth)
-
       const encodeData = this.layer.getEncodedData();
-      // console.log('encodeData', encodeData)
+      if (this.cellLength > 0) {
-      // let {data, width, height } = calDataFrame(cellLength, encodeData, cellPropertiesLayout)
+        // 需要构建数据纹理
-      if (cellLength > 0) {
+        const { data, width, height } = this.calDataFrame(
-        const { data, width, height } = calDataFrame(
+          this.cellLength,
-          cellLength,
           encodeData,
-          cellProperties,
+          this.cellProperties,
         );
-        calHeight = height;
+        this.rowCount = height; // 当前数据纹理有多少行
 
-        this.testDataTexture = this.createTexture2D({
+        this.dataTexture = this.createTexture2D({
           flipY: true,
           data,
           format: gl.LUMINANCE,
@@ -260,7 +182,8 @@ export default class FillModel extends BaseModel {
           height,
         });
       } else {
-        this.testDataTexture = this.createTexture2D({
+        // 不需要构建数据纹理 - 构建一个空纹理
+        this.dataTexture = this.createTexture2D({
           flipY: true,
           data: [1],
           format: gl.LUMINANCE,
@@ -269,27 +192,24 @@ export default class FillModel extends BaseModel {
           height: 1,
         });
       }
-
-      // console.log('strokeOpacity', strokeOpacity, isNumber(strokeOpacity)? strokeOpacity : 1.0)
-      testTexture = false;
     }
 
     return {
-      u_testTexture: this.testDataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
+      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
       u_cellTypeLayout: [
         // 传递样式数据映射信息 - 当前纹理大小以及有哪些字段需要映射
-        calHeight,
+        this.rowCount, // 数据纹理有几行
-        WIDTH,
+        this.DATA_TEXTURE_WIDTH, // 数据纹理有几列
-        0.0,
+        0.0,
-        0.0, // rowCount columnCount - 几行几列
+        0.0,
-        hasOpacity,
+        this.hasOpacity, // cell 中是否存在 opacity
-        hasStrokeOpacity,
+        this.hasStrokeOpacity, // cell 中是否存在 strokeOpacity
-        hasStrokeWidth,
+        this.hasStrokeWidth, // cell 中是否存在 strokeWidth
-        hasStroke, // opacity strokeOpacity strokeWidth stroke
+        this.hasStroke, // cell 中是否存在 stroke
-        hasOffsets,
+        this.hasOffsets, // cell 中是否存在 offsets
+        0.0,
         0.0,
         0.0,
-        0.0, // offsets
         0.0,
         0.0,
         0.0,
@@ -327,36 +247,6 @@ export default class FillModel extends BaseModel {
   }
 
   public initModels(): IModel[] {
-    // if(cellLength < 1) {
-    //   console.log('err')
-    // }
-    // let encodeData = this.layer.getEncodedData()
-
-    // dataFrameArr = []
-
-    // let mod = WIDTH%cellLength
-    // let rowCellCount = (WIDTH-mod)/cellLength
-    // let encodeDatalength = encodeData.length
-    // let heightCount = Math.ceil(encodeDatalength * cellLength / (WIDTH - mod))
-
-    // let heightStep = 1/heightCount
-    // let heightStart = heightStep/2
-    // let widthStart = (1/WIDTH)/2
-    // let widthStep = (1/WIDTH) * (cellLength - 1.0)
-
-    // for(let i = 0; i < heightCount; i++) { // 行
-    //   for(let j = 0; j < rowCellCount; j++) {
-
-    //     let startU = widthStart + widthStep * j
-    //     let startV = 1 - (heightStart + heightStep * i)
-    //     let endU = startU + widthStep
-    //     let endV = startV
-
-    //     dataFrameArr.push({ startU, startV, endU, endV })
-
-    //   }
-    // }
-    // console.log('dataFrameArr', dataFrameArr)
     return this.buildModels();
   }
 

packages/layers/src/point/shaders/fill_vert.glsl

@@ -6,7 +6,7 @@ attribute float a_Shape;
 
 attribute float a_vertexId;
 uniform mat4 u_cellTypeLayout;
-uniform sampler2D u_testTexture;
+uniform sampler2D u_dataTexture;
 varying mat4 styleMappingMat;
 
 uniform mat4 u_ModelMatrix;
@@ -49,7 +49,7 @@ vec2 nextPos(float currentRow, float currentColumn, float columnCount, float nex
 float pos2value(vec2 pos, float columnWidth, float rowHeight) {
   float u = (pos.r - 1.0) * columnWidth + columnWidth/2.0;
   float v = 1.0 - ((pos.g - 1.0) * rowHeight + rowHeight/2.0);
-  return texture2D(u_testTexture, vec2(u, v)).r;
+  return texture2D(u_dataTexture, vec2(u, v)).r;
 }
 
 bool hasOpacity() { // 判断 cell 中是否存在 opacity 的数据

packages/layers/src/utils/dataMappingStyle.ts

@@ -39,6 +39,11 @@ function registerStyleAttribute(
   layer.updateStyleAttribute(fieldName, field, values, updateOptions);
 }
 
+/**
+ * 当样式发生变化时判断是否需要进行数据映射
+ * @param configToUpdate
+ * @param layer
+ */
 function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
   if (configToUpdate.opacity) {
     // 处理 style 中 opacity 属性的数据映射
@@ -64,12 +69,13 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
   }
 
   if (configToUpdate.offsets) {
+    // 处理 style 中 offsets 属性的数据映射
     handleStyleOffsets('offsets', layer, configToUpdate.offsets);
   }
 }
 
 /**
- * 根据传入参数 opacity 的类型和值做相应的操作
+ * 根据传入参数 float 的类型和值做相应的操作
  */
 function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any) {
   if (isString(styleFloat)) {
@@ -99,7 +105,12 @@ function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any) {
     registerStyleAttribute(fieldName, layer, [1.0], undefined);
   }
 }
-
+/**
+ * 根据传入参数 offsets 的类型和值做相应的操作
+ * @param fieldName
+ * @param layer
+ * @param styleOffsets
+ */
 function handleStyleOffsets(
   fieldName: string,
   layer: ILayer,
@@ -157,129 +168,4 @@ function handleStyleColor(fieldName: string, layer: ILayer, styleColor: any) {
   }
 }
 
-/**
+export { handleStyleDataMapping, handleStyleFloat, handleStyleColor };
- * 根据输入的 feature 的长度以及默认的宽度计算画布的大小
- * @param encodeDatalength
- * @returns
- */
-function getSize(encodeDatalength: number) {
-  const width = WIDTH;
-  const height = Math.ceil(encodeDatalength / width);
-  return { width, height };
-}
-
-/**
- * 根据输入的宽高边距信息，为需要为 index 的 feature 计算在画布上对应的 uv 值
- * @param widthStep
- * @param widthStart
- * @param heightStep
- * @param heightStart
- * @param id
- * @returns
- */
-function getUvPosition(
-  widthStep: number,
-  widthStart: number,
-  heightStep: number,
-  heightStart: number,
-  index: number,
-) {
-  // index 从零开始
-  const row = Math.ceil((index + 1) / WIDTH); // 当前 index 所在的行
-  let column = (index + 1) % WIDTH;
-  if (column === 0) {
-    // 取余等于零
-    column = WIDTH;
-  }
-  const u = widthStart + (column - 1) * widthStep;
-  const v = 1 - (heightStart + (row - 1) * heightStep);
-  return [u, v];
-}
-
-/**
- * 1、根据输入的 field 字段从 originData 中取值 （style 样式用于数据映射的值）
- * 2、根据输入的 heightCount 以及默认的 WIDTH 为纹理对象提供数据 (float)
- * 3、根据输入的 createTexture2D 构建纹理对象
- * 4、存储
- * @param heightCount
- * @param createTexture2D
- * @param originData
- * @param field
- * @returns
- */
-function initTextureFloatData(
-  heightCount: number,
-  createTexture2D: any,
-  originData: any,
-  field: string,
-): ITexture2D {
-  const d = [];
-
-  for (let i = 0; i < WIDTH * heightCount; i++) {
-    if (originData[i] && originData[i][field]) {
-      const v = originData[i][field];
-      d.push(v);
-    } else {
-      d.push(0);
-    }
-  }
-
-  const texture = createTexture2D({
-    flipY: true,
-    data: d,
-    format: gl.LUMINANCE,
-    type: gl.FLOAT,
-    width: WIDTH,
-    height: heightCount,
-  });
-
-  return texture;
-}
-
-/**
- * 1、根据输入的 field 字段从 originData 中取值 （style 样式用于数据映射的值）
- * 2、根据输入的 heightCount 以及默认的 WIDTH 为纹理对象提供数据 (color)
- * 3、根据输入的 createTexture2D 构建纹理对象
- * @param heightCount
- * @param createTexture2D
- * @param originData
- * @param field
- * @returns
- */
-function initTextureVec4Data(
-  heightCount: number,
-  createTexture2D: any,
-  originData: any,
-  field: string,
-): ITexture2D {
-  const d = [];
-  for (let i = 0; i < WIDTH * heightCount; i++) {
-    if (originData[i] && originData[i][field]) {
-      const [r, g, b, a] = rgb2arr(originData[i][field]);
-      d.push(r * 255, g * 255, b * 255, a * 255);
-    } else {
-      d.push(0, 0, 0, 0);
-    }
-  }
-  const arr = new Uint8ClampedArray(d);
-  const imageData = new ImageData(arr, WIDTH, heightCount); // (arr, width, height)
-
-  const texture = createTexture2D({
-    flipY: true,
-    data: new Uint8Array(imageData.data),
-    width: imageData.width,
-    height: imageData.height,
-  });
-
-  return texture;
-}
-
-export {
-  handleStyleDataMapping,
-  handleStyleFloat,
-  getSize,
-  getUvPosition,
-  initTextureFloatData,
-  initTextureVec4Data,
-  handleStyleColor,
-};

stories/Map/components/amap2demo.tsx

@@ -90,9 +90,9 @@ export default class Amap2demo extends React.Component {
               .size(10)
               .style({
                 opacity: 'customOpacity',
-                strokeOpacity: 'customStrokeOpacity',
+                // strokeOpacity: 'customStrokeOpacity',
-                strokeWidth: 'customStrokeWidth',
+                // strokeWidth: 'customStrokeWidth',
-                stroke: 'customStroke',
+                // stroke: 'customStroke',
               });
             scene.addLayer(layer);
           });
@@ -114,7 +114,7 @@ export default class Amap2demo extends React.Component {
         //   .style({
         //     // stroke: '#000',
         //     // stroke: 'rgba(0, 255, 0, 1)',
-        //     // stroke: 'strokeColor',
+        //     stroke: 'strokeColor',
         //     // stroke: ['strokeColor', (d: any) => {
         //     //   return d
         //     // }],
@@ -123,9 +123,9 @@ export default class Amap2demo extends React.Component {
         //     // strokeWidth: 4,
         //     // strokeWidth: "strokeWidth",
         //     // strokeWidth: ["strokeWidth", [1, 2]],
-        //     // strokeWidth: ["strokeWidth", (d: any) => {
+        //     strokeWidth: ["strokeWidth", (d: any) => {
-        //     //   return d * 2
+        //       return d * 2
-        //     // }],
+        //     }],
 
         //     // strokeOpacity: 0.5,
         //     // strokeOpacity: 'strokeOpacity2',
@@ -140,10 +140,10 @@ export default class Amap2demo extends React.Component {
         //     // strokeOpacity: ['opacity2', [0.2, 0.6]],
 
         //     // offsets: [100, 100],
-        //     // offsets: 'offsets2',
+        //     offsets: 'offsets2',
         //     // offsets: ['offsets2', (d: any) => d],
 
-        //     // opacity: 'opacity2',
+        //     opacity: 'opacity2',
         //     // opacity: 0.2
         //     // opacity: 0,
         //     // opacity: ['opacity2', (d: any) => {