diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 5614eb799e..b37d23495f 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -1010,12 +1010,6 @@ export default class BaseLayer extends EventEmitter valuesOrCallback?: unknown[], defaultValues?: unknown[], ) { - // console.log({ - // values: isFunction(valuesOrCallback) - // ? undefined - // : valuesOrCallback || defaultValues, - // callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined, - // }) return { values: isFunction(valuesOrCallback) ? undefined diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index 025cd08567..2eead95f32 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/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 IDataLayout { - widthCount: number; - heightCount: number; - widthStep: number; - widthStart: number; - heightStep: number; - heightStart: number; +interface ICellProperty { + attr: string; + count: number; } + export default class BaseModel implements ILayerModel { public triangulation: Triangulation; @@ -43,17 +39,22 @@ export default class BaseModel 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 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 const { createTexture2D } = this.rendererService; this.createTexture2D = createTexture2D; - // 根据数据长度构建样式数据映射到纹理上时需要到布局数值 为纹理贴图映射样式数据做准备工作 - this.initEncodeDataLayout(this.layer.getEncodedData().length); + this.DATA_TEXTURE_WIDTH = 1024; // 数据纹理固定宽度 + 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) { - const { width: widthCount, height: heightCount } = getSize(dataLength); - this.dataLayout.widthCount = widthCount; - this.dataLayout.heightCount = heightCount; + public 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]; - this.dataLayout.widthStep = 1 / widthCount; - this.dataLayout.widthStart = this.dataLayout.widthStep / 2; - this.dataLayout.heightStep = 1 / heightCount; - this.dataLayout.heightStart = this.dataLayout.heightStep / 2; + 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 { + // 若不存在时则补位 + 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; diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 73ede0660f..4ea5d92864 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/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 ( - isArray(stroke) && - stroke.length === 4 && - isNumber(stroke[0]) && - isNumber(stroke[1]) && - isNumber(stroke[2]) && - isNumber(stroke[3]) - ) { - return true; - } else { - return false; + /** + * 判断数据纹理是否需要重新计算 - 每一个layer 对象需要进行判断的条件都不一样,所以需要单独实现 + * @param opacity + * @param strokeOpacity + * @param strokeWidth + * @param stroke + * @param offsets + * @returns + */ + public isDataTextureUpdate( + opacity: any, + 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, - stroke = [0, 0, 0, 0], + strokeWidth = 0, + stroke = 'rgba(0,0,0,0)', offsets = [0, 0], } = this.layer.getLayerConfig() as IPointLayerStyleOptions; - if (testTexture) { - const cellProperties = []; // cell 的布局 - let cellLength = 0; // cell 的长度 + if ( + this.isDataTextureUpdate( + opacity, + strokeOpacity, + strokeWidth, + stroke, + offsets, + ) + ) { + this.clearLastCalRes(); // 清除上一次的计算结果 - if (!isNumber(opacity) && opacity !== undefined) { + if (!isNumber(opacity)) { // 数据映射 - cellProperties.push({ attr: 'opacity', flag: true, count: 1 }); - hasOpacity = 1; - cellLength += 1; - } else { - // 常量 - hasOpacity = 0; + this.cellProperties.push({ attr: 'opacity', count: 1 }); + this.hasOpacity = 1; + this.cellLength += 1; } - if (!isNumber(strokeOpacity) && strokeOpacity !== undefined) { + if (!isNumber(strokeOpacity)) { // 数据映射 - cellProperties.push({ attr: 'strokeOpacity', flag: true, count: 1 }); - hasStrokeOpacity = 1; - cellLength += 1; - } else { - // 常量 - hasStrokeOpacity = 0; + this.cellProperties.push({ attr: 'strokeOpacity', count: 1 }); + this.hasStrokeOpacity = 1; + this.cellLength += 1; } - if (!isNumber(strokeWidth) && strokeWidth !== undefined) { + if (!isNumber(strokeWidth)) { // 数据映射 - cellProperties.push({ attr: 'strokeWidth', flag: true, count: 1 }); - hasStrokeWidth = 1; - cellLength += 1; - } else { - // 常量 - hasStrokeWidth = 0; + this.cellProperties.push({ attr: 'strokeWidth', count: 1 }); + this.hasStrokeWidth = 1; + this.cellLength += 1; } - // console.log('stroke', stroke); - // if((!isString(stroke) || !isColor(stroke)) && stroke !== undefined) { // 数据映射 - if (!this.isColorStatic(stroke)) { + + if (!isColor(stroke)) { // 数据映射 - cellProperties.push({ attr: 'stroke', flag: true, count: 4 }); - cellLength += 4; - hasStroke = 1; - } else { - // 常量 - hasStroke = 0; + this.cellProperties.push({ attr: 'stroke', count: 4 }); + this.cellLength += 4; + this.hasStroke = 1; } if (!this.isOffsetStatic(offsets)) { - cellProperties.push({ attr: 'offsets', flag: true, count: 2 }); - cellLength += 2; - hasOffsets = 1; - } else { - hasOffsets = 0; + // 数据映射 + this.cellProperties.push({ attr: 'offsets', count: 2 }); + this.cellLength += 2; + this.hasOffsets = 1; } - // 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) - // let {data, width, height } = calDataFrame(cellLength, encodeData, cellPropertiesLayout) - if (cellLength > 0) { - const { data, width, height } = calDataFrame( - cellLength, + if (this.cellLength > 0) { + // 需要构建数据纹理 + const { data, width, height } = this.calDataFrame( + this.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, - WIDTH, - 0.0, - 0.0, // rowCount columnCount - 几行几列 - hasOpacity, - hasStrokeOpacity, - hasStrokeWidth, - hasStroke, // opacity strokeOpacity strokeWidth stroke - hasOffsets, + this.rowCount, // 数据纹理有几行 + this.DATA_TEXTURE_WIDTH, // 数据纹理有几列 + 0.0, + 0.0, + this.hasOpacity, // cell 中是否存在 opacity + this.hasStrokeOpacity, // cell 中是否存在 strokeOpacity + this.hasStrokeWidth, // cell 中是否存在 strokeWidth + this.hasStroke, // cell 中是否存在 stroke + 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(); } diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl index 20f94b24e7..314708afaa 100644 --- a/packages/layers/src/point/shaders/fill_vert.glsl +++ b/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 的数据 diff --git a/packages/layers/src/utils/dataMappingStyle.ts b/packages/layers/src/utils/dataMappingStyle.ts index 7d74e081ea..ac1e43c15e 100644 --- a/packages/layers/src/utils/dataMappingStyle.ts +++ b/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) { } } -/** - * 根据输入的 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, -}; +export { handleStyleDataMapping, handleStyleFloat, handleStyleColor }; diff --git a/stories/Map/components/amap2demo.tsx b/stories/Map/components/amap2demo.tsx index 570b3e1d69..eb4edc1741 100644 --- a/stories/Map/components/amap2demo.tsx +++ b/stories/Map/components/amap2demo.tsx @@ -90,9 +90,9 @@ export default class Amap2demo extends React.Component { .size(10) .style({ opacity: 'customOpacity', - strokeOpacity: 'customStrokeOpacity', - strokeWidth: 'customStrokeWidth', - stroke: 'customStroke', + // strokeOpacity: 'customStrokeOpacity', + // strokeWidth: 'customStrokeWidth', + // 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) => { - // // return d * 2 - // // }], + // strokeWidth: ["strokeWidth", (d: any) => { + // 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) => {