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 #732 from antvis/shihui_dev 

fix: 修复引入数据纹理导致的一些bug
This commit is contained in:
YiQianYao 2021-07-29 17:50:48 +08:00 committed by GitHub
parent ab0abf7cf4 59ce5632bd
commit f2af4a8740
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 267 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
beta.sh Normal file
View File

@ -0,0 +1,11 @@
npm dist-tag add @antv/l7-component@2.5.4 beta
npm dist-tag add @antv/l7-core@2.5.4 beta
npm dist-tag add @antv/l7@2.5.4 beta
npm dist-tag add @antv/l7-layers@2.5.4 beta
npm dist-tag add @antv/l7-map@2.5.4 beta
npm dist-tag add @antv/l7-maps@2.5.4 beta
npm dist-tag add @antv/l7-renderer@2.5.4 beta
npm dist-tag add @antv/l7-scene@2.5.4 beta
npm dist-tag add @antv/l7-source@2.5.4 beta
npm dist-tag add @antv/l7-three@2.5.4 beta
npm dist-tag add @antv/l7-utils@2.5.4 beta

11
latest.sh Normal file
View File

@ -0,0 +1,11 @@
npm dist-tag add @antv/l7-component@2.4.4 latest
npm dist-tag add @antv/l7-core@2.4.4 latest
npm dist-tag add @antv/l7@2.4.4 latest
npm dist-tag add @antv/l7-layers@2.4.4 latest
npm dist-tag add @antv/l7-map@2.4.4 latest
npm dist-tag add @antv/l7-maps@2.4.4 latest
npm dist-tag add @antv/l7-renderer@2.4.4 latest
npm dist-tag add @antv/l7-scene@2.4.4 latest
npm dist-tag add @antv/l7-source@2.4.4 latest
npm dist-tag add @antv/l7-three@2.4.4 latest
npm dist-tag add @antv/l7-utils@2.4.4 latest

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

@ -526,7 +526,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// } else {
// this.renderModels();
// }
this.renderModels();
// TODO: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
if (this.getEncodedData().length !== 0) {
this.renderModels();
}
// this.renderModels();
// this.multiPassRenderer.render();
// this.renderModels();
return this;
@ -938,16 +943,19 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
public renderModels() {
if (this.layerModelNeedUpdate && this.layerModel) {
this.models = this.layerModel.buildModels();
this.hooks.beforeRender.call();
this.layerModelNeedUpdate = false;
}
this.models.forEach((model) => {
model.draw({
uniforms: this.layerModel.getUninforms(),
// TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
if (this.getEncodedData().length > 0) {
if (this.layerModelNeedUpdate && this.layerModel) {
this.models = this.layerModel.buildModels();
this.hooks.beforeRender.call();
this.layerModelNeedUpdate = false;
}
this.models.forEach((model) => {
model.draw({
uniforms: this.layerModel.getUninforms(),
});
});
});
}
return this;
}

17
packages/layers/src/core/BaseModel.ts
View File

@ -159,13 +159,16 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
hasOffsets: 0,
};
this.dataTextureTest = this.layerService.getOESTextureFloat();
this.dataTexture = this.createTexture2D({
data: new ImageData(1, 1).data,
mag: gl.NEAREST,
min: gl.NEAREST,
width: 1,
height: 1,
});
// 只有在不支持数据纹理的情况下进行赋值
if (!this.dataTextureTest) {
this.dataTexture = this.createTexture2D({
data: new ImageData(1, 1).data,
mag: gl.NEAREST,
min: gl.NEAREST,
width: 1,
height: 1,
});
}
}
// style datatexture mapping

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

@ -46,7 +46,7 @@ export default class ArcModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -62,7 +62,7 @@ export default class Arc3DModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -65,7 +65,7 @@ export default class GreatCircleModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -63,7 +63,7 @@ export default class LineModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -32,7 +32,7 @@ export default class ExtrudeModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -66,7 +66,7 @@ export default class FillModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -47,7 +47,7 @@ export default class ImageModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -60,7 +60,7 @@ export default class NormalModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,
@ -140,6 +140,7 @@ export default class NormalModel extends BaseModel {
},
});
}
private defaultStyleOptions(): Partial<
IPointLayerStyleOptions & ILayerConfig
> {

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

@ -157,7 +157,7 @@ export default class TextModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -24,7 +24,7 @@ export default class ExtrudeModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

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

@ -36,7 +36,7 @@ export default class FillModel extends BaseModel {
this.rowCount = height; // 当前数据纹理有多少行
this.dataTexture =
this.cellLength > 0
this.cellLength > 0 && data.length > 0
? this.createTexture2D({
flipY: true,
data,

205
stories/Map/components/amap2demo_image.tsx
View File

@ -1,10 +1,56 @@
import { PointLayer, Scene } from '@antv/l7';
import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[110.5224609375, 32.731840896865684],
[113.0712890625, 32.731840896865684],
[113.0712890625, 34.56085936708384],
[110.5224609375, 34.56085936708384],
[110.5224609375, 32.731840896865684],
],
[
[111.26953125, 33.52307880890422],
[111.26953125, 34.03445260967645],
[112.03857421875, 34.03445260967645],
[112.03857421875, 33.52307880890422],
[111.26953125, 33.52307880890422],
],
],
[
[
[115.04882812499999, 34.379712580462204],
[114.9609375, 33.46810795527896],
[115.8837890625, 33.50475906922609],
[115.86181640625001, 34.379712580462204],
[115.04882812499999, 34.379712580462204],
],
],
],
},
},
],
};
export default class Amap2demo_image extends React.Component {
// @ts-ignore
private scene: Scene;
private imageLayer: any;
private imageLayer2: any;
private imageLayer3: any;
private lineLayer: any;
private polygonLayer: any;
private polygonLine: any;
public componentWillUnmount() {
this.scene.destroy();
@ -86,39 +132,132 @@ export default class Amap2demo_image extends React.Component {
);
scene.on('loaded', () => {
// fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
// )
// .then((res) => res.json())
// .then((data) => {
// const imageLayer = new PointLayer()
// .source(data, {
// parser: {
// type: 'json',
// x: 'longitude',
// y: 'latitude',
// },
// })
// .shape('name', ['00', '01', '02'])
// // .color("rgba(255, 0, 0, 0.1)")
// .size(20);
// scene.addLayer(imageLayer);
// this.polygonLayer = new PolygonLayer({
// })
// this.polygonLayer.source({
// type: 'FeatureCollection',
// features: [],
// })
// .shape('fill')
// .color('red')
// .style({
// opacity: 0.5
// });
const imageLayer = new PointLayer()
.source(originData, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.shape('name', ['00', '01', '02'])
.size(20)
.style({
opacity: 'opacity',
offsets: 'offsets',
// scene.addLayer(this.polygonLayer);
// this.polygonLine = new PolygonLayer({
// })
// this.polygonLine.source({
// type: 'FeatureCollection',
// features: [],
// })
// .shape('line')
// .color('#00f')
// .style({
// opacity: 0.8
// });
// scene.addLayer(this.polygonLine);
// this.lineLayer = new LineLayer({
// zIndex: 7,
// pickingBuffer: 4,
// });
// this.lineLayer
// .source({
// type: 'FeatureCollection',
// features: [],
// })
// .shape('line')
// .size(10)
// .color('#f00')
// scene.addLayer(this.lineLayer)
// this.imageLayer = new PointLayer({
// blend: "normal"
// })
// this.imageLayer.source([], {
// parser: {
// type: 'json',
// x: 'longitude',
// y: 'latitude',
// },
// })
// .shape('name', ['00'])
// .size(20)
// .style({
// opacity: 0.5
// });
// scene.addLayer(this.imageLayer);
// this.imageLayer2 = new PointLayer({
// blend: "normal"
// })
// this.imageLayer2.source([], {
// parser: {
// type: 'json',
// x: 'longitude',
// y: 'latitude',
// },
// })
// .shape('name', ['02'])
// .size(20)
// .style({
// opacity: 0.5
// });
// scene.addLayer(this.imageLayer2);
// this.imageLayer3 = new PointLayer({
// blend: "normal"
// })
// this.imageLayer3.source([], {
// parser: {
// type: 'json',
// x: 'longitude',
// y: 'latitude',
// },
// })
// .shape('name', ['00'])
// .size(20)
// .style({
// opacity: 0.5
// });
// scene.addLayer(this.imageLayer3);
for (let i = 0; i < 17; i++) {
// > 16 * 2
// var testdata = [{
// longitude: 121.43 + Math.random() * -0.2 + 0.1,
// latitude: 31.26 + Math.random() + -0.2 + 0.1,
// }]
var testdata: any[] = [];
let layer = new PointLayer({
blend: 'normal',
});
scene.addLayer(imageLayer);
layer
.source(testdata, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
},
})
.color('#ff0')
// .shape('name', ['00'])
.size(20);
scene.addLayer(layer);
// let layer = new PolygonLayer({
// })
// layer.source({
// type: 'FeatureCollection',
// features: [],
// })
// .shape('fill')
// .color('red')
// .style({
// opacity: 0.5
// });
// scene.addLayer(layer);
}
console.log(scene.getLayers());
});
}

35
stories/Map/components/amap2demo_lineLinear.tsx
View File

@ -16,11 +16,41 @@ export default class Amap2demo_lineLinear extends React.Component {
map: new GaodeMap({
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 16,
zoom: 6,
viewMode: '3D',
}),
});
this.scene = scene;
const geoData = {
type: 'FeatureCollection',
features: [
// {
// type: 'Feature',
// properties: {
// testOpacity: 0.8,
// },
// geometry: {
// type: 'Polygon',
// coordinates: [
// [
// [113.8623046875, 30.031055426540206],
// [116.3232421875, 30.031055426540206],
// [116.3232421875, 31.090574094954192],
// [113.8623046875, 31.090574094954192],
// [113.8623046875, 30.031055426540206],
// ],
// [
// [117.26806640625, 32.13840869677249],
// [118.36669921875, 32.13840869677249],
// [118.36669921875, 32.47269502206151],
// [117.26806640625, 32.47269502206151],
// [117.26806640625, 32.13840869677249],
// ],
// ],
// },
// },
],
};
scene.on('loaded', () => {
fetch(
@ -31,7 +61,8 @@ export default class Amap2demo_lineLinear extends React.Component {
.then((data) => {
// @ts-ignore
const layer = new LineLayer({})
.source(data)
// .source(data)
.source(geoData)
.size(5)
.shape('line')
.color('#25d8b7')