fix: 修复样式数据映射失效 (#1143)

* fix: 修复样式数据映射失效

* style: lint style
This commit is contained in:
YiQianYao 2022-06-07 17:47:56 +08:00 committed by GitHub
parent 41ef82713d
commit a405cac6b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 79 additions and 80 deletions

View File

@ -8,8 +8,8 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
@ -98,8 +98,8 @@ export default class ArcModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_thetaOffset: Number(thetaOffset),
u_opacity: Number(opacity),
u_thetaOffset: isNumber(thetaOffset) ? thetaOffset : 0.0,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber,
u_line_type: lineStyleObj[lineType || 'solid'],

View File

@ -9,6 +9,7 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
@ -95,7 +96,7 @@ export default class Arc3DModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber,
u_line_type: lineStyleObj[lineType as string] || 0.0,

View File

@ -7,8 +7,8 @@ import {
IModel,
IModelUniform,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
@ -39,7 +39,7 @@ export default class ArcMiniModel extends BaseModel {
return {
u_thetaOffset: thetaOffset,
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
segmentNumber,
u_blur: 0.9,

View File

@ -8,8 +8,8 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface';
import { LineArcTriangulation } from '../../core/triangulation';
@ -86,7 +86,7 @@ export default class GreatCircleModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
segmentNumber,
u_line_type: lineStyleObj[lineType as string] || 0.0,

View File

@ -9,8 +9,8 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
@ -101,7 +101,7 @@ export default class LineModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
u_line_type: lineStyleObj[lineType],
u_dash_array: dashArray,

View File

@ -6,8 +6,8 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
@ -61,7 +61,7 @@ export default class LinearLineModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
// 纹理支持参数
u_texture: this.colorTexture, // 贴图

View File

@ -7,8 +7,8 @@ import {
IModel,
IModelUniform,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { SimpleLineTriangulation } from '../../core/triangulation';
@ -68,7 +68,7 @@ export default class SimpleLineModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
// 渐变色支持参数
u_linearColor: useLinearColor,

View File

@ -8,8 +8,8 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { ILineLayerStyleOptions } from '../../core/interface';
import { LineTriangulation } from '../../core/triangulation';
@ -79,7 +79,7 @@ export default class LineWallModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
// 纹理支持参数

View File

@ -6,6 +6,7 @@ import {
IModel,
} from '@antv/l7-core';
import { getCullFace, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointExtrudeTriangulation } from '../../core/triangulation';
@ -116,7 +117,7 @@ export default class ExtrudeModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
// 渐变色支持参数
u_linearColor: useLinearColor,

View File

@ -10,6 +10,7 @@ import {
IModelUniform,
} from '@antv/l7-core';
import { getCullFace, getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import {
@ -96,9 +97,9 @@ export default class FillModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_stroke_opacity: Number(strokeOpacity),
u_stroke_width: Number(strokeWidth),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 1.0,
u_stroke_color: this.getStrokeColor(stroke),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])

View File

@ -10,6 +10,7 @@ import {
} from '@antv/l7-core';
import { Version } from '@antv/l7-maps';
import { getCullFace, getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointFillTriangulation } from '../../core/triangulation';
@ -107,7 +108,7 @@ export default class FillImageModel extends BaseModel {
u_texture: this.texture,
u_textSize: [1024, this.iconService.canvasHeight || 128],
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],

View File

@ -7,6 +7,7 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointImageTriangulation } from '../../core/triangulation';
@ -68,7 +69,7 @@ export default class ImageModel extends BaseModel {
u_texture: this.texture,
u_textSize: [1024, this.iconService.canvasHeight || 128],
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],

View File

@ -7,6 +7,7 @@ import {
IModelUniform,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import normalFrag from '../shaders/normal_frag.glsl';
@ -75,7 +76,7 @@ export default class NormalModel extends BaseModel {
return {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],

View File

@ -10,6 +10,7 @@ import {
IModelUniform,
} from '@antv/l7-core';
import { getCullFace, getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointFillTriangulation } from '../../core/triangulation';
@ -77,7 +78,7 @@ export default class RadarModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],

View File

@ -6,8 +6,8 @@ import {
IModel,
IModelUniform,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
@ -83,12 +83,12 @@ export default class SimplePointModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],
u_stroke_opacity: Number(strokeOpacity),
u_stroke_width: Number(strokeWidth),
u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 1.0,
u_stroke_color: this.getStrokeColor(stroke),
};
}

View File

@ -7,6 +7,7 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { boundsContains, getMask, padBounds } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import CollisionIndex from '../../utils/collision-index';
@ -160,8 +161,8 @@ export default class TextModel extends BaseModel {
u_cellTypeLayout: this.getCellTypeLayout(),
u_raisingHeight: Number(raisingHeight),
u_opacity: Number(opacity),
u_stroke_width: Number(strokeWidth),
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 1.0,
u_stroke_color: this.getStrokeColor(stroke),
u_sdf_map: this.texture,

View File

@ -6,6 +6,7 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import { PolygonExtrudeTriangulation } from '../../core/triangulation';
@ -82,7 +83,7 @@ export default class ExtrudeModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_raisingHeight: Number(raisingHeight),
u_opacity: Number(opacity),
u_opacity: isNumber(opacity) ? opacity : 1.0,
// 渐变色支持参数
u_linearColor: useLinearColor,

View File

@ -6,6 +6,7 @@ import {
Triangulation,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import {
@ -61,7 +62,7 @@ export default class FillModel extends BaseModel {
u_raisingHeight: Number(raisingHeight),
u_opacity: opacity,
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_opacitylinear: Number(opacityLinear.enable),
u_dir: opacityLinear.dir === 'in' ? 1.0 : 0.0,

View File

@ -7,6 +7,7 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import { polygonTriangulation } from '../../core/triangulation';
@ -59,7 +60,7 @@ export default class OceanModel extends BaseModel {
u_watercolor2: rgb2arr(watercolor2),
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_opacity: opacity,
u_opacity: isNumber(opacity) ? opacity : 1.0,
};
}

View File

@ -7,6 +7,7 @@ import {
ITexture2D,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPolygonLayerStyleOptions } from '../../core/interface';
import { polygonTriangulation } from '../../core/triangulation';
@ -53,7 +54,7 @@ export default class WaterModel extends BaseModel {
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据,若没有任何数据映射时纹理是 [1]
u_cellTypeLayout: this.getCellTypeLayout(),
u_speed: speed,
u_opacity: opacity,
u_opacity: isNumber(opacity) ? opacity : 1.0,
};
}

View File

@ -38,58 +38,45 @@ export default class Amap2demo extends React.Component {
this.scene = scene;
scene.on('loaded', () => {
// var xyzTileLayer = new window.AMap.TileLayer({
// // 图块取图地址
// getTileUrl:
// 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11',
// zIndex: 100,
// });
// scene.getMapService().map.add(xyzTileLayer);
addMarkers();
scene.render();
});
function addMarkers() {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
)
.then((res) => res.json())
.then((nodes) => {
const markerLayer = new MarkerLayer({
cluster: true,
.then((data) => {
data.features = data.features.filter((item) => {
return item.properties.capacity > 800;
});
for (let i = 0; i < nodes.features.length; i++) {
const { coordinates } = nodes.features[i].geometry;
const marker = new Marker().setLnglat({
lng: coordinates[0],
lat: coordinates[1],
data.features.forEach((item) => {
// console.log(item.properties.capacity);
});
const pointLayer = new PointLayer({})
.source(data)
.shape('capacity', (capacity) =>
capacity < 5000 ? 'circle' : 'triangle',
)
.size('capacity', [0, 16])
.color('capacity', [
'#34B6B7',
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6',
])
.active(true)
.style({
opacity: 0.5,
// strokeWidth: ["capacity", (capacity) => (capacity < 5000 ? 2 : 4)],
strokeWidth: ['capacity', [1, 2]],
stroke: [
'capacity',
(capacity) => (capacity < 5000 ? '#ff0000' : '#0000ff'),
],
});
markerLayer.addMarker(marker);
}
scene.addMarkerLayer(markerLayer);
// 模拟第二次查询8条数据坐标点是兰州
// 注意看地图上兰州的位置原本是3放大后会变成11
const data = [
{ coordinates: [103.823305441, 36.064225525] },
{ coordinates: [103.823305441, 36.064225525] },
{ coordinates: [103.823305441, 36.064225525] },
{ coordinates: [103.823305441, 36.064225525] },
{ coordinates: [103.823305441, 36.064225525] },
{ coordinates: [103.823305441, 36.064225525] },
{ coordinates: [103.823305441, 36.064225525] },
{ coordinates: [103.823305441, 36.064225525] },
];
for (let i = 0; i < data.length; i++) {
const { coordinates } = data[i];
const marker = new Marker().setLnglat({
lng: coordinates[0],
lat: coordinates[1],
});
markerLayer.addMarker(marker);
}
scene.addLayer(pointLayer);
});
}
});
}
public render() {