p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: shape 更新,filter 优化

This commit is contained in:
lzxue 2022-12-20 20:05:35 +08:00
parent 6242f3c0ff
commit 1c62c5c9ea
12 changed files with 5127 additions and 1300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dev-demos/bugs/point/demos/shape.tsx
View File

@ -55,13 +55,11 @@ export default () => {
.size(20);
scene.addLayer(imageLayer);
setTimeout(()=>{
shapeType = '02';
// imageLayer.shape('type', (v: any) => {
// console.log(1111,shapeType)
// return shapeType;
// })
imageLayer.shape('02');
// scene.render()
shapeType = '02';
imageLayer.shape('type', (v: any) => {
return shapeType;
})
scene.render()
},2000)

6272
dev-demos/bugs/polygon/demos/scale.tsx
View File

File diff suppressed because it is too large Load Diff

1
dev-demos/gallery/scale/diverging.tsx
View File

@ -16,6 +16,7 @@ export default () => {
style: 'light',
center: [-96, 37.8],
zoom: 3,
interactive: true,
}),
});
setScene(mapScene);

1
packages/core/src/services/layer/StyleAttributeService.ts
View File

@ -76,6 +76,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
let attributeToUpdate = this.getLayerStyleAttribute(attributeName);
if (!attributeToUpdate) {
attributeToUpdate = this.registerStyleAttribute({

10
packages/layers/src/core/BaseLayer.ts
View File

@ -65,7 +65,6 @@ import {
createMultiPassRenderer,
normalizePasses,
} from '../utils/multiPassRender';
import { updateShape } from '../utils/updateShape';
import LayerPickService from './LayerPickService';
import TextureService from './TextureService';
/**
@ -540,6 +539,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
this.updateStyleAttribute('filter', field, values, updateOptions);
this.dataState.dataSourceNeedUpdate = true;
return this;
}
@ -548,18 +548,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
const lastShape =
this.styleAttributeService?.getLayerStyleAttribute('shape')?.scale?.field;
const currentShape = field;
this.shapeOption = {
field,
values,
};
this.updateStyleAttribute('shape', field, values, updateOptions);
// Tip: 根据 shape 判断是否需要更新 model
if (!this.tileLayer) {
updateShape(this, lastShape, currentShape);
}
this.dataState.dataSourceNeedUpdate = true; // 通过数据更新驱动shape 更新
return this;
}
public label(

45
packages/layers/src/plugins/DataMappingPlugin.ts
View File

@ -62,7 +62,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
if (Array.isArray(dataArray) && dataArray.length === 0) {
return;
}
const attributesToRemapping = attributes.filter(
(attribute) => attribute.needRemapping, // 如果filter变化
);
@ -76,27 +75,16 @@ export default class DataMappingPlugin implements ILayerPlugin {
if (attributesToRemapping.length) {
// 过滤数据
if (filter?.needRemapping) {
const encodeData = this.mapping(
layer,
attributes,
filterData,
undefined,
);
layer.setEncodedData(encodeData);
filter.needRemapping = false;
} else {
const encodeData = this.mapping(
layer,
attributesToRemapping,
filterData,
layer.getEncodedData(),
);
layer.setEncodedData(encodeData);
}
// 处理文本更新，更新文字形状
// layer.emit('remapping', null);
const encodeData = this.mapping(
layer,
attributesToRemapping,
filterData,
layer.getEncodedData(),
);
layer.setEncodedData(encodeData);
}
// 处理文本更新，更新文字形状
// layer.emit('remapping', null);
});
}
private generateMaping(
@ -119,6 +107,7 @@ export default class DataMappingPlugin implements ILayerPlugin {
// Tip: layer 对数据做处理
// 数据处理 在数据进行 mapping 生成 encodeData 之前对数据进行处理
// 在各个 layer 中继承
filterData = layer.processData(filterData);
const encodeData = this.mapping(layer, attributes, filterData, undefined);
layer.setEncodedData(encodeData);
@ -139,9 +128,9 @@ export default class DataMappingPlugin implements ILayerPlugin {
},
} = layer.getLayerConfig() as ILineLayerStyleOptions;
const usedAttributes = attributes.filter(
(attribute) => attribute.scale !== undefined,
);
const usedAttributes = attributes
.filter((attribute) => attribute.scale !== undefined)
.filter((attribute) => attribute.name !== 'filter');
const mappedData = data.map((record: IParseDataItem, i) => {
const preRecord = predata ? predata[i] : {};
const encodeRecord: IEncodeFeature = {
@ -149,10 +138,9 @@ export default class DataMappingPlugin implements ILayerPlugin {
coordinates: record.coordinates,
...preRecord,
};
usedAttributes.forEach((attribute: IStyleAttribute) => {
let values = this.applyAttributeMapping(attribute, record);
attribute.needRemapping = false;
// TODO: 支持每个属性配置 postprocess
if (attribute.name === 'color') {
values = values.map((c: unknown) => {
@ -188,12 +176,15 @@ export default class DataMappingPlugin implements ILayerPlugin {
}
return encodeRecord;
}) as IEncodeFeature[];
attributes.forEach((attribute) => {
attribute.needRemapping = false;
});
// 调整数据兼容 Amap2.0
this.adjustData2Amap2Coordinates(mappedData, layer);
// 调整数据兼容 SimpleCoordinates
this.adjustData2SimpleCoordinates(mappedData);
return mappedData;
}

2
packages/layers/src/plugins/RegisterStyleAttributePlugin.ts
View File

@ -42,7 +42,7 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
}
// Tip: normal render layer
this.registerPositionAttribute(styleAttributeService);
this.registerFilterAttribute(styleAttributeService);
// this.registerFilterAttribute(styleAttributeService);//数据层数据过滤
this.registerColorAttribute(styleAttributeService);
this.registerVertexIdAttribute(styleAttributeService);
}

1
packages/layers/src/point/models/fillmage.ts
View File

@ -197,7 +197,6 @@ export default class FillImageModel extends BaseModel {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
const model = await this.layer
.buildLayerModel({
moduleName: 'pointFillImage',

1
packages/layers/src/point/models/image.ts
View File

@ -83,7 +83,6 @@ export default class ImageModel extends BaseModel {
public async initModels(): Promise<IModel[]> {
this.iconService.on('imageUpdate', this.updateTexture);
this.updateTexture();
return await this.buildModels();
}

43
packages/layers/src/utils/updateShape.ts
View File

@ -1,43 +0,0 @@
import { ILayer, StyleAttributeField } from '@antv/l7-core';
// shapeUpdateList 存储一系列的 shape 类型
// 当这一系列的 shape 相互切换的时候需要重构 layer 的 model (顶点数据集)
const shapeUpdateList = [
// PointLayer
['circle', 'cylinder'],
['square', 'cylinder'],
['triangle', 'cylinder'],
['pentagon', 'cylinder'],
['hexagon', 'cylinder'],
['octogon', 'cylinder'],
['hexagram', 'cylinder'],
['rhombus', 'cylinder'],
['vesica', 'cylinder'],
];
export async function updateShape(
layer: ILayer,
lastShape: StyleAttributeField | undefined,
currentShape: StyleAttributeField | undefined,
) {
if (
typeof lastShape === 'string' &&
typeof currentShape === 'string' &&
lastShape !== currentShape
) {
if (layer.type === 'PointLayer') {
layer.dataState.dataSourceNeedUpdate = true;
await layer.hooks.beforeRenderData.promise();
layer.renderLayers();
return;
}
shapeUpdateList.map(async (shapes) => {
if (shapes.includes(lastShape) && shapes.includes(currentShape)) {
// dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
layer.dataState.dataSourceNeedUpdate = true;
await layer.hooks.beforeRenderData.promise();
layer.renderLayers();
return;
}
});
}
}

1
packages/site/docs/api/scene.zh.md
View File

@ -92,6 +92,7 @@ const scene = new L7.Scene({
是否保留缓冲区数据 `boolean` `false`。
### isMini
<description> _boolean_ **可选** _default: false_ </description>
是否小程序模式 `boolean` `false`,目前仅支持支付宝

38
packages/utils/src/workers/triangulation.ts
View File

@ -63,16 +63,24 @@ export function PointFillTriangulation(feature: IEncodeFeature) {
}
export function polygonFillTriangulation(feature: IEncodeFeature) {
const { coordinates } = feature;
const { coordinates, version } = feature;
const flattengeo = earcut.flatten(coordinates as number[][][]);
const { vertices, dimensions, holes } = flattengeo;
for (let i = 0; i < vertices.length; i += dimensions) {
vertices[i + 1] = project_y(vertices[i + 1]);
if (version !== 'GAODE2.x') {
for (let i = 0; i < vertices.length; i += dimensions) {
const mer = project_mercator(vertices[i + 0], vertices[i + 1]);
vertices[i] = mer[0];
vertices[i + 1] = mer[1];
}
}
// https://github.com/mapbox/earcut/issues/159
const triangles = earcut(vertices, holes, dimensions);
for (let i = 0; i < vertices.length; i += dimensions) {
vertices[i + 1] = un_project_y(vertices[i + 1]);
if (version !== 'GAODE2.x') {
for (let i = 0; i < vertices.length; i += dimensions) {
const ll = mercator_lnglat(vertices[i + 0], vertices[i + 1]);
vertices[i] = ll[0];
vertices[i + 1] = ll[1];
}
}
return {
@ -82,16 +90,16 @@ export function polygonFillTriangulation(feature: IEncodeFeature) {
};
}
function project_y(y: number) {
if (y > 85 || y < -85) {
return y;
}
return Math.log(Math.tan((Math.PI * y) / 360));
function project_mercator(x: number, y: number) {
return [
(Math.PI * x) / 180 + Math.PI,
Math.PI - Math.log(Math.tan(Math.PI * 0.25 + ((Math.PI * y) / 180) * 0.5)),
];
}
function un_project_y(y: number) {
if (y > 85 || y < -85) {
return y;
}
return (Math.atan(Math.exp(y)) * 360) / Math.PI;
function mercator_lnglat(x: number, y: number) {
return [
((x - Math.PI) * 180) / Math.PI,
((Math.atan(Math.exp(Math.PI - y)) - Math.PI * 0.25) * 2 * 180) / Math.PI,
];
}