mirror of https://gitee.com/antv-l7/antv-l7
feat: 样式数据映射 1.1 调整代码，提取公共部分到 BaseModel
This commit is contained in:
2912401452
parent
cb626e6f59
commit
535665ba31
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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<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.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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 的数据
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue