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

Shihui (#1027) 

* fix: 修复 layer 在触发 dataUpdate 时映射没有完成的问题

* style: lint style

* feat: lineLayer 支持动态配置 depth （是否开始深度）

* feat: 各个图层开启背面剔除，提高运行性能

* feat: 增加 getCullFace 方法统一处理 cull

* style: lint style
This commit is contained in:
YiQianYao 2022-03-30 16:05:05 +08:00 committed by GitHub
parent 1f833c268a
commit 2fff09ca2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 154 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/layers/src/Geometry/models/plane.ts
View File

@ -172,6 +172,10 @@ export default class PlaneModel extends BaseModel {
depth: { enable: true },
blend: this.getBlend(),
stencil: getMask(mask, maskInside),
cull: {
enable: true,
face: gl.BACK, // gl.FRONT | gl.BACK;
},
}),
];
}
@ -245,6 +249,10 @@ export default class PlaneModel extends BaseModel {
depth: { enable: true },
blend: this.getBlend(),
stencil: getMask(mask, maskInside),
cull: {
enable: true,
face: gl.BACK,
},
}),
];
this.layerService.renderLayers();

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

@ -85,6 +85,10 @@ export default class CityBuildModel extends BaseModel {
vertexShader: buildVert,
fragmentShader: buildFrag,
triangulation: PolygonExtrudeTriangulation,
cull: {
enable: true,
face: gl.BACK,
},
}),
];
}

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

@ -1197,8 +1197,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
if (autoFit) {
this.fitBounds(fitBoundsOptions);
}
// 对外暴露事件
this.emit('dataUpdate');
// 对外暴露事件 迁移到 DataMappingPlugin generateMapping，保证在重新重新映射后触发
// this.emit('dataUpdate');
this.reRender();
};

1
packages/layers/src/core/interface.ts
View File

@ -13,6 +13,7 @@ export interface ILineLayerStyleOptions {
dashArray?: [number, number]; // 可选参数、虚线间隔
segmentNumber?: number;
depth?: boolean;
forward?: boolean; // 可选参数、是否反向(arcLine)
lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all)
iconStep?: number; // 可选参数、纹理贴图步长(all)

11
packages/layers/src/heatmap/models/heatmap.ts
View File

@ -7,7 +7,12 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
import {
generateColorRamp,
getCullFace,
getMask,
IColorRamp,
} from '@antv/l7-utils';
import { mat4 } from 'gl-matrix';
import { inject, injectable } from 'inversify';
import 'reflect-metadata';
@ -158,6 +163,10 @@ export default class HeatMapModel extends BaseModel {
depth: {
enable: false,
},
cull: {
enable: true,
face: getCullFace(this.mapService.version),
},
blend: {
enable: true,
func: {

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

@ -147,17 +147,19 @@ export default class LineModel extends BaseModel {
const {
mask = false,
maskInside = true,
depth = false,
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
const { frag, vert, type } = this.getShaders();
return [
this.layer.buildLayerModel({
moduleName: 'line' + type,
moduleName: 'line_' + type,
vertexShader: vert,
fragmentShader: frag,
triangulation: LineTriangulation,
primitive: gl.TRIANGLES,
blend: this.getBlend(),
depth: { enable: false },
depth: { enable: depth },
// depth: { enable: true },
stencil: getMask(mask, maskInside),
}),
];

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

@ -106,6 +106,8 @@ export default class DataMappingPlugin implements ILayerPlugin {
layer.setEncodedData(
this.mapping(attributes, filterData, undefined, bottomColor),
);
// 对外暴露事件
layer.emit('dataUpdate', null);
}
private mapping(

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

@ -5,7 +5,7 @@ import {
ILayerConfig,
IModel,
} from '@antv/l7-core';
import { rgb2arr } from '@antv/l7-utils';
import { getCullFace, rgb2arr } from '@antv/l7-utils';
import { isNumber } from 'lodash';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
@ -153,7 +153,7 @@ export default class ExtrudeModel extends BaseModel {
blend: this.getBlend(),
cull: {
enable: true,
face: this.mapService.version === 'MAPBOX' ? gl.FRONT : gl.BACK,
face: getCullFace(this.mapService.version),
},
depth: {
enable: depth,

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

@ -9,7 +9,7 @@ import {
IModel,
IModelUniform,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { getCullFace, getMask } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import {
@ -198,7 +198,7 @@ export default class FillModel extends BaseModel {
const isGlobel = this.mapService.version === 'GLOBEL';
return [
this.layer.buildLayerModel({
moduleName: 'pointfill-' + type,
moduleName: 'pointfill_' + type,
vertexShader: vert,
fragmentShader: frag,
triangulation: isGlobel
@ -208,6 +208,10 @@ export default class FillModel extends BaseModel {
depth: { enable: isGlobel },
blend: this.getBlend(),
stencil: getMask(mask, maskInside),
cull: {
enable: true,
face: getCullFace(this.mapService.version),
},
}),
];
}

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

@ -8,7 +8,7 @@ import {
IModelUniform,
ITexture2D,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { getCullFace, getMask } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointFillTriangulation } from '../../core/triangulation';
@ -218,6 +218,10 @@ export default class FillImageModel extends BaseModel {
depth: { enable: false },
blend: this.getBlend(),
stencil: getMask(mask, maskInside),
cull: {
enable: true,
face: getCullFace(this.mapService.version),
},
}),
];
}

6
packages/layers/src/point/models/radar.ts
View File

@ -9,7 +9,7 @@ import {
IModel,
IModelUniform,
} from '@antv/l7-core';
import { getMask } from '@antv/l7-utils';
import { getCullFace, getMask } from '@antv/l7-utils';
import BaseModel from '../../core/BaseModel';
import { IPointLayerStyleOptions } from '../../core/interface';
import { PointFillTriangulation } from '../../core/triangulation';
@ -192,6 +192,10 @@ export default class RadarModel extends BaseModel {
depth: { enable: false },
blend: this.getBlend(),
stencil: getMask(mask, maskInside),
cull: {
enable: true,
face: getCullFace(this.mapService.version),
},
}),
];
}

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

@ -86,7 +86,10 @@ export default class FillModel extends BaseModel {
: polygonTriangulation,
blend: this.getBlend(),
depth: { enable: false },
cull: {
enable: true,
face: gl.BACK, // gl.FRONT | gl.BACK;
},
stencil: getMask(mask, maskInside),
}),
];

33
packages/utils/src/cull.ts Normal file
View File

@ -0,0 +1,33 @@
import { gl } from '@antv/l7-core';
export function getCullFace(
mapVersion: string | undefined,
): gl.FRONT | gl.BACK {
// 'GAODE1.x' = 'GAODE1.x',
// 'GAODE2.x' = 'GAODE2.x',
// 'MAPBOX' = 'MAPBOX',
// 'L7MAP' = 'L7MAP',
// 'SIMPLE' = 'SIMPLE',
// 'GLOBEL' = 'GLOBEL',
switch (mapVersion) {
case 'GAODE1.x':
return gl.BACK;
break;
case 'GAODE2.x':
return gl.BACK;
break;
case 'MAPBOX':
return gl.FRONT;
break;
case 'SIMPLE':
return gl.FRONT;
break;
case 'GLOBEL':
return gl.BACK;
break;
case 'L7MAP':
return gl.FRONT;
break;
default:
return gl.FRONT;
}
}

1
packages/utils/src/index.ts
View File

@ -9,5 +9,6 @@ export * from './event';
export * from './color';
export * from './anchor';
export * from './stencli';
export * from './cull';
import * as Satistics from './statistics';
export { DOM, Satistics };

28
stories/Map/components/amap2demo_citybuilding.tsx
View File

@ -1,5 +1,5 @@
import { CityBuildingLayer, Scene, LineLayer } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_citybuilding extends React.Component {
@ -13,7 +13,7 @@ export default class Amap2demo_citybuilding extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Mapbox({
style: 'dark',
center: [120.160514, 30.243209],
pitch: 45,
@ -29,24 +29,24 @@ export default class Amap2demo_citybuilding extends React.Component {
.source(await res.json())
.size('floor', [0, 500])
.color('rgba(242,246,250,1.0)')
.animate({
enable: true,
})
// .animate({
// enable: true,
// })
.active({
color: '#0ff',
mix: 0.5,
})
.style({
opacity: 0.7,
// opacity: 0.7,
baseColor: 'rgb(16, 16, 16)',
windowColor: 'rgb(30, 60, 89)',
brightColor: 'rgb(255, 176, 38)',
sweep: {
enable: true,
sweepRadius: 2,
sweepColor: '#1990FF',
sweepSpeed: 0.5,
},
// sweep: {
// enable: true,
// sweepRadius: 2,
// sweepColor: '#1990FF',
// sweepSpeed: 0.5,
// },
});
scene.addLayer(pointLayer);
});
@ -58,11 +58,15 @@ export default class Amap2demo_citybuilding extends React.Component {
.then((data) => {
const layer = new LineLayer({
zIndex: 0,
// depth: true
})
.source(data)
.size(1)
.shape('line')
.color('#1990FF')
.style({
depth: true,
})
.animate({
interval: 1, // 间隔
duration: 2, // 持续时间，延时

4
stories/Map/components/amap2demo_heatmap.tsx
View File

@ -1,5 +1,5 @@
import { Scene, HeatmapLayer } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_heatmap extends React.Component {
@ -13,7 +13,7 @@ export default class Amap2demo_heatmap extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new Map({
// pitch: 0,
// center: [127.5671666579043, 7.445038892195569],
// zoom: 2.632456779444394,

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

@ -1,5 +1,5 @@
import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_image extends React.Component {
// @ts-ignore
@ -13,7 +13,7 @@ export default class Amap2demo_image extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Mapbox({
pitch: 0,
style: 'light',
center: [121.434765, 31.256735],

4
stories/Map/components/amap2demo_polygon.tsx
View File

@ -1,5 +1,5 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_polygon extends React.Component {
@ -17,7 +17,7 @@ export default class Amap2demo_polygon extends React.Component {
);
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Mapbox({
pitch: 0,
// style: 'dark',
center: [-44.40673828125, -18.375379094031825],

4
stories/Map/components/amap2demo_styleMap.tsx
View File

@ -1,5 +1,5 @@
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_styleMap extends React.Component {
// @ts-ignore
@ -12,7 +12,7 @@ export default class Amap2demo_styleMap extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [112, 30.267069],
pitch: 0,
style: 'dark',

152
stories/Map/components/bugfix.tsx
View File

@ -1,96 +1,6 @@
// @ts-nocheck
import React from 'react';
import { Scene, GaodeMap, GaodeMapV2, Mapbox, Map, PointLayer } from '@antv/l7';
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
w: 19.1,
t: 24.6,
s: '海南',
l: 11,
m: '东方',
j: 108.6167,
h: '59838',
id: 1,
},
geometry: {
type: 'Point',
coordinates: [108.6167, 19.1],
},
},
{
type: 'Feature',
properties: {
w: 20,
t: 23.8,
s: '海南',
l: 11,
m: '海口',
j: 110.25,
h: '59758',
id: 2,
},
geometry: {
type: 'Point',
coordinates: [110.25, 20],
},
},
{
type: 'Feature',
properties: {
w: 22.275,
t: 23.6,
s: '广东',
l: 12,
m: '珠海',
j: 113.5669,
h: '59488',
id: 3,
},
geometry: {
type: 'Point',
coordinates: [113.5669, 22.275],
},
},
{
type: 'Feature',
properties: {
w: 20.3372,
t: 23.4,
s: '广东',
l: 12,
m: '徐闻',
j: 110.1794,
h: '59754',
id: 4,
},
geometry: {
type: 'Point',
coordinates: [110.1794, 20.3372],
},
},
{
type: 'Feature',
properties: {
w: 19.2089,
t: 23.2,
s: '海南',
l: 12,
m: '琼海',
j: 110.4819,
h: '59855',
id: 5,
},
geometry: {
type: 'Point',
coordinates: [110.4819, 19.2089],
},
},
],
};
export default class Amap2demo extends React.Component {
// @ts-ignore
@ -108,43 +18,43 @@ export default class Amap2demo extends React.Component {
// zoom: 14.83,
pitch: 0,
style: 'light',
center: [121.434765, 31.256735],
zoom: 14.83,
center: [122.5, 30],
zoom: 4,
}),
});
this.scene = scene;
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.addImage(
'广东',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.addImage(
'海南',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
const layer = new PointLayer()
.source(
[
{ lng: 120, lat: 30, c: '#ff0' },
{ lng: 125, lat: 30, c: '#0f0' },
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
.shape('circle')
.size(20)
.color('c');
scene.on('loaded', () => {
const imageLayer = new PointLayer({ layerType: 'fillImage' })
.source(data)
// .shape('fillImage', s => s)
.shape('s', (s) => s)
// .color('#f00')
.size(100)
.active({
color: '#f00',
mix: 0.5,
})
.style({
// rotation: 90
})
.fitBounds();
scene.addLayer(imageLayer);
scene.addLayer(layer);
// layer.on('dataUpdate', (e) => {
// const le = layer.getLegendItems('color')
// console.log(le)
// })
layer.on('dataUpdate', (e) => {
const le = layer.getLegendItems('color');
console.log('scale', le);
});
layer.setData([{ lng: 121, lat: 30, c: '#000' }]);
// layer.color('#f00')
scene.render();
});
}

2
stories/Map/components/mapCenter.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { PointLayer, Scene, LineLayer, PolygonLayer, ILayer } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
import * as React from 'react';
import * as turf from '@turf/turf';

4
stories/Object/components/radar.tsx
View File

@ -1,5 +1,5 @@
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_polygon extends React.Component {
@ -10,7 +10,7 @@ export default class Amap2demo_polygon extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Mapbox({
pitch: 0,
center: [120, 30],
zoom: 13,

2
stories/Object/components/taifeng.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { PointLayer, Scene, ILayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
import * as React from 'react';
import { animate, easeInOut, linear } from 'popmotion';

16
stories/customMap/components/Map.tsx
View File

@ -10,20 +10,20 @@ export default class ScaleComponent extends React.Component {
const scene = new Scene({
id: 'map',
map: new Map({
// center: [0, 0],
center: [5000, 5000],
center: [120, 30],
// center: [5000, 5000],
pitch: 0,
zoom: 0,
version: 'SIMPLE',
zoom: 1,
// version: 'SIMPLE',
// zoom: 13,
// zoom: 10,
}),
});
// scene.setBgColor('#000');
const data = [
{ x: 5000, y: 5000 },
// { x: 5000, y: 5000 },
// { lng: 120, lat: 30 },
{ lng: 120, lat: 30 },
// { lng: 0, lat: 0 },
// { lng: 0, lat: 85.05112 },
@ -48,8 +48,8 @@ export default class ScaleComponent extends React.Component {
.source(data, {
parser: {
type: 'json',
x: 'x',
y: 'y',
x: 'lng',
y: 'lat',
},
})
.shape('circle')