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

Merge pull request #264 from antvis/fix_bugs 

fix: 修复文本更新bug fixes #232
This commit is contained in:
@thinkinggis 2020-03-26 12:41:42 +08:00 committed by GitHub
parent 5a95ecf667 a7729639a7
commit cd2a37d100
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 168 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/layers/src/citybuliding/models/build.ts
View File

@ -85,7 +85,7 @@ export default class CityBuildModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 10 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

2
packages/layers/src/line/models/arc.ts
View File

@ -73,7 +73,7 @@ export default class ArcModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 1 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

2
packages/layers/src/line/models/arc_3d.ts
View File

@ -69,7 +69,7 @@ export default class Arc3DModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 1 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

2
packages/layers/src/line/models/great_circle.ts
View File

@ -71,7 +71,7 @@ export default class GreatCircleModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 1 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

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

@ -67,8 +67,9 @@ export default class DataMappingPlugin implements ILayerPlugin {
),
);
}
this.logger.debug('remapping finished');
// 处理文本更新
layer.emit('remapping', null);
}
});
}
@ -88,11 +89,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
return this.applyAttributeMapping(filter, record)[0];
});
}
// TODO: FIXME
// if (!filterData) {
// return;
// }
// mapping with source data
layer.setEncodedData(this.mapping(attributes, filterData));
}

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

@ -86,7 +86,7 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
size: 4,
update: (feature: IEncodeFeature, featureIdx: number) => {
const { color } = feature;
return !color || !color.length ? [0, 0, 0, 0] : color;
return !color || !color.length ? [1, 1, 1, 1] : color;
},
},
});

1
packages/layers/src/plugins/UpdateModelPlugin.ts
View File

@ -9,7 +9,6 @@ export default class UpdateModelPlugin implements ILayerPlugin {
layer.hooks.beforeRender.tap('UpdateModelPlugin', () => {
// 处理文本更新
if (layer.layerModel) {
// console.log(layer.layerModelNeedUpdate);
layer.layerModel.needUpdate();
}
});

2
packages/layers/src/point/models/fill.ts
View File

@ -114,7 +114,7 @@ export default class FillModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 5 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

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

@ -67,7 +67,7 @@ export default class ImageModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 5 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

2
packages/layers/src/point/models/normal.ts
View File

@ -79,7 +79,7 @@ export default class NormalModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 1 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

147
packages/layers/src/point/models/text.ts
View File

@ -36,44 +36,56 @@ interface IPointTextLayerStyleOptions {
textAllowOverlap: boolean;
}
export function TextTriangulation(feature: IEncodeFeature) {
const centroid = feature.centroid as number[]; // 计算中心点
const { glyphQuads } = feature;
// @ts-ignore
const that = this as TextModel;
const id = feature.id as number;
const vertices: number[] = [];
const indices: number[] = [];
if (!that.glyphInfoMap || !that.glyphInfoMap[id]) {
return {
vertices: [], // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
indices: [],
size: 7,
};
}
const centroid = that.glyphInfoMap[id].centroid as number[]; // 计算中心点
const coord =
centroid.length === 2 ? [centroid[0], centroid[1], 0] : centroid;
glyphQuads.forEach((quad: IGlyphQuad, index: number) => {
vertices.push(
...coord,
quad.tex.x,
quad.tex.y + quad.tex.height,
quad.tl.x,
quad.tl.y,
...coord,
quad.tex.x + quad.tex.width,
quad.tex.y + quad.tex.height,
quad.tr.x,
quad.tr.y,
...coord,
quad.tex.x + quad.tex.width,
quad.tex.y,
quad.br.x,
quad.br.y,
...coord,
quad.tex.x,
quad.tex.y,
quad.bl.x,
quad.bl.y,
);
indices.push(
0 + index * 4,
1 + index * 4,
2 + index * 4,
2 + index * 4,
3 + index * 4,
0 + index * 4,
);
});
that.glyphInfoMap[id].glyphQuads.forEach(
(quad: IGlyphQuad, index: number) => {
vertices.push(
...coord,
quad.tex.x,
quad.tex.y + quad.tex.height,
quad.tl.x,
quad.tl.y,
...coord,
quad.tex.x + quad.tex.width,
quad.tex.y + quad.tex.height,
quad.tr.x,
quad.tr.y,
...coord,
quad.tex.x + quad.tex.width,
quad.tex.y,
quad.br.x,
quad.br.y,
...coord,
quad.tex.x,
quad.tex.y,
quad.bl.x,
quad.bl.y,
);
indices.push(
0 + index * 4,
1 + index * 4,
2 + index * 4,
2 + index * 4,
3 + index * 4,
0 + index * 4,
);
},
);
return {
vertices, // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
indices,
@ -82,21 +94,20 @@ export function TextTriangulation(feature: IEncodeFeature) {
}
export default class TextModel extends BaseModel {
private texture: ITexture2D;
private glyphInfo: IEncodeFeature[];
private currentZoom: number = -1;
private extent: [[number, number], [number, number]];
private textureHeight: number = 0;
private textCount: number = 0;
private preTextStyle: Partial<IPointTextLayerStyleOptions> = {};
private glyphInfoMap: {
public glyphInfo: IEncodeFeature[];
public glyphInfoMap: {
[key: string]: {
shaping: any;
glyphQuads: IGlyphQuad[];
centroid: number[];
};
} = {};
private texture: ITexture2D;
private currentZoom: number = -1;
private extent: [[number, number], [number, number]];
private textureHeight: number = 0;
private textCount: number = 0;
private preTextStyle: Partial<IPointTextLayerStyleOptions> = {};
public getUninforms(): IModelUniform {
const {
opacity = 1.0,
@ -130,6 +141,11 @@ export default class TextModel extends BaseModel {
}
public buildModels(): IModel[] {
this.layer.on('remapping', () => {
this.initGlyph();
this.updateTexture();
this.reBuildModel();
});
this.extent = this.textExtent();
const {
textAnchor = 'center',
@ -147,7 +163,7 @@ export default class TextModel extends BaseModel {
moduleName: 'pointText',
vertexShader: textVert,
fragmentShader: textFrag,
triangulation: TextTriangulation,
triangulation: TextTriangulation.bind(this),
depth: { enable: false },
blend: this.getBlend(),
}),
@ -166,17 +182,7 @@ export default class TextModel extends BaseModel {
(!textAllowOverlap && (Math.abs(this.currentZoom - zoom) > 1 || !flag)) ||
textAllowOverlap !== this.preTextStyle.textAllowOverlap
) {
this.filterGlyphs();
this.layer.models = [
this.layer.buildLayerModel({
moduleName: 'pointText',
vertexShader: textVert,
fragmentShader: textFrag,
triangulation: TextTriangulation,
depth: { enable: false },
blend: this.getBlend(),
}),
];
this.reBuildModel();
return true;
}
return false;
@ -225,7 +231,7 @@ export default class TextModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 12 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},
@ -314,13 +320,11 @@ export default class TextModel extends BaseModel {
feature.shaping = shaping;
feature.glyphQuads = glyphQuads;
feature.centroid = calculteCentroid(coordinates);
if (id) {
this.glyphInfoMap[id] = {
shaping,
glyphQuads,
centroid: calculteCentroid(coordinates),
};
}
this.glyphInfoMap[id as number] = {
shaping,
glyphQuads,
centroid: calculteCentroid(coordinates),
};
return feature;
});
}
@ -333,9 +337,11 @@ export default class TextModel extends BaseModel {
textAllowOverlap = false,
} = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
if (textAllowOverlap) {
this.layer.setEncodedData(this.glyphInfo);
// 如果允许文本覆盖
// this.layer.setEncodedData(this.glyphInfo);
return;
}
this.glyphInfoMap = {};
this.currentZoom = this.mapService.getZoom();
this.extent = this.textExtent();
const { width, height } = this.rendererService.getViewportSize();
@ -362,7 +368,11 @@ export default class TextModel extends BaseModel {
return false;
}
});
this.layer.setEncodedData(filterData);
filterData.forEach((item) => {
// @ts-ignore
this.glyphInfoMap[item.id as number] = item;
});
// this.layer.setEncodedData(filterData);
}
/**
* 初始化文字布局
@ -389,15 +399,14 @@ export default class TextModel extends BaseModel {
});
}
private rebuildModel() {
// 避让 anchor,等属性变化时需要重新构建model
private reBuildModel() {
this.filterGlyphs();
return [
this.layer.models = [
this.layer.buildLayerModel({
moduleName: 'pointText',
vertexShader: textVert,
fragmentShader: textFrag,
triangulation: TextTriangulation,
triangulation: TextTriangulation.bind(this),
depth: { enable: false },
blend: this.getBlend(),
}),

2
packages/layers/src/polygon/models/extrude.ts
View File

@ -71,7 +71,7 @@ export default class ExtrudeModel extends BaseModel {
vertex: number[],
attributeIdx: number,
) => {
const { size } = feature;
const { size = 10 } = feature;
return Array.isArray(size) ? [size[0]] : [size as number];
},
},

8
packages/source/src/parser/json.ts
View File

@ -17,11 +17,9 @@ export default function json(data: IJsonData, cfg: IParserCfg): IParserData {
coords = [parseFloat(col[x]), parseFloat(col[y])];
} // 点数据
if (x && y && x1 && y1) {
// 弧线 或者线段
coords = [
[parseFloat(col[x]), parseFloat(col[y])],
[parseFloat(col[x1]), parseFloat(col[y1])],
];
const from = [parseFloat(col[x]), parseFloat(col[y])];
const to = [parseFloat(col[x1]), parseFloat(col[y1])];
coords = [from, to];
}
if (coordinates) {
let type = 'Polygon';

17
stories/Layers/components/Arcline.tsx
View File

@ -12,7 +12,7 @@ export default class ArcLineDemo extends React.Component {
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt',
'https://gw.alipayobjects.com/os/bmw-prod/4ededeaa-f290-46b7-a042-08210433e8f9.csv',
);
const scene = new Scene({
id: 'map',
@ -36,24 +36,17 @@ export default class ArcLineDemo extends React.Component {
y1: 'lat2',
},
})
.size(1)
.shape('arc3d')
// .size(1)
.shape('arc')
.select({
color: 'red',
})
.active({
color: 'red',
})
.color('rgb(13,64,140)')
.animate({
enable: true,
interval: 0.1,
duration: 2,
trailLength: 1.0,
})
// .color('rgb(13,64,140)')
.style({
lineType: 'dash',
opacity: 0.5,
opacity: 1,
});
scene.addLayer(lineLayer);
scene.render();

71
stories/Layers/components/heatmap3d.tsx Normal file
View File

@ -0,0 +1,71 @@
import { HeatmapLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
// @ts-ignore
import * as React from 'react';
export default class HeatMapLayerDemo extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const response = await fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
);
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [121.268, 30.3628],
pitch: 0,
style: 'dark',
zoom: 2,
}),
});
const data = await response.json();
const layer = new HeatmapLayer();
layer
.source(data)
.shape('heatmap3D')
.size('mag', [0, 1.0]) // weight映射通道
.style({
intensity: 2,
radius: 20,
opacity: 1.0,
rampColors: {
colors: [
'#FF4818',
'#F7B74A',
'#FFF598',
'#91EABC',
'#2EA9A1',
'#206C7C',
].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
},
});
scene.addLayer(layer);
scene.on('loaded', () => {
console.log('scene loaded');
});
this.scene = scene;
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}