Skip to content

Commit

Permalink
feat: 优化风场图层的显示效果 (antvis#1263)
Browse files Browse the repository at this point in the history 
* feat: 优化风场图层效果

* style: lint style
  • Loading branch information
@yiiiiiiqianyao
yiiiiiiqianyao authored Jul 29, 2022
1 parent 9c9fa85 commit 1a78586
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 65 deletions.
51 changes: 39 additions & 12 deletions packages/layers/src/wind/models/wind.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,10 @@ export default class WindModel extends BaseModel {
// source: 'http://nomads.ncep.noaa.gov',

private frequency = new FrequencyController(7.2);
private cacheZoom: number;

public render() {
// TODO: 控制风场的平均更新频率
// Tip: 控制风场的平均更新频率
this.frequency.run(() => {
this.drawWind();
});
Expand Down Expand Up @@ -71,12 +72,13 @@ export default class WindModel extends BaseModel {
height: 0,
width: 0,
});
this.cacheZoom = Math.floor(this.mapService.getZoom());

const glContext = this.rendererService.getGLContext();
this.imageCoords = source.data.dataArray[0].coordinates as [Point, Point];
this.imageCoords = source.data?.dataArray[0].coordinates as [Point, Point];

source.data.images.then((imageData: HTMLImageElement[]) => {
this.sizeScale = sizeScale;
source.data?.images?.then((imageData: HTMLImageElement[]) => {
this.sizeScale = sizeScale * this.getZoomScale();

const { imageWidth, imageHeight } = this.getWindSize();

Expand All @@ -101,11 +103,11 @@ export default class WindModel extends BaseModel {
vMax,
image: imageData[0],
});
this.texture?.destroy();

this.texture = createTexture2D({
data: imageData[0],
width: imageData[0].width,
height: imageData[0].height,
width: imageWidth,
height: imageHeight,
});

this.layerService.updateLayerRenderList();
Expand All @@ -120,7 +122,7 @@ export default class WindModel extends BaseModel {
primitive: gl.TRIANGLES,
depth: { enable: false },
blend: this.getBlend(),
// stencil: getMask(mask, maskInside),
stencil: getMask(mask, maskInside),
});

return [this.colorModel];
Expand All @@ -130,8 +132,14 @@ export default class WindModel extends BaseModel {
const p1 = this.mapService.lngLatToPixel(this.imageCoords[0]);
const p2 = this.mapService.lngLatToPixel(this.imageCoords[1]);

const imageWidth = Math.floor((p2.x - p1.x) * this.sizeScale);
const imageHeight = Math.floor((p1.y - p2.y) * this.sizeScale);
const imageWidth = Math.min(
Math.floor((p2.x - p1.x) * this.sizeScale),
2048,
);
const imageHeight = Math.min(
Math.floor((p1.y - p2.y) * this.sizeScale),
2048,
);
return { imageWidth, imageHeight };
}

Expand Down Expand Up @@ -182,6 +190,10 @@ export default class WindModel extends BaseModel {
});
}

private getZoomScale() {
return Math.min(((this.cacheZoom + 4) / 30) * 2, 2);
}

private drawWind() {
if (this.wind) {
const {
Expand All @@ -197,15 +209,23 @@ export default class WindModel extends BaseModel {
rampColors = defaultRampColors,
sizeScale = 0.5,
} = this.layer.getLayerConfig() as IWindLayerStyleOptions;
if (typeof sizeScale === 'number' && sizeScale !== this.sizeScale) {
let newNumParticles = numParticles;
const currentZoom = Math.floor(this.mapService.getZoom());
if (
(typeof sizeScale === 'number' && sizeScale !== this.sizeScale) ||
currentZoom !== this.cacheZoom
) {
const zoomScale = this.getZoomScale();
this.sizeScale = sizeScale;
newNumParticles *= zoomScale;
const { imageWidth, imageHeight } = this.getWindSize();
this.wind.reSize(imageWidth, imageHeight);
this.cacheZoom = currentZoom;
}

this.wind.updateWindDir(uMin, uMax, vMin, vMax);

this.wind.updateParticelNum(numParticles);
this.wind.updateParticelNum(newNumParticles);

this.wind.updateColorRampTexture(rampColors);

Expand All @@ -227,6 +247,13 @@ export default class WindModel extends BaseModel {

private drawColorMode() {
const { opacity } = this.layer.getLayerConfig() as IWindLayerStyleOptions;

this.layer.masks.map((m) => {
m.hooks.beforeRenderData.call();
m.hooks.beforeRender.call();
m.render();
m.hooks.afterRender.call();
});
this.colorModel.draw({
uniforms: {
u_opacity: opacity || 1.0,
Expand Down
4 changes: 1 addition & 3 deletions packages/layers/src/wind/models/windRender.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,6 @@ export class Wind {
);
}
}

public draw() {
if (this.windData?.image) {
const gl = this.gl;
Expand All @@ -393,11 +392,10 @@ export class Wind {

gl.viewport(0, 0, this.width, this.height);

gl.disable(gl.BLEND);
this.drawFullTexture(this.backgroundTexture, this.fadeOpacity);
this.drawParticles();

gl.disable(gl.BLEND);

this.pixels = new Uint8Array(4 * this.width * this.height);
gl.readPixels(
0,
Expand Down
102 changes: 52 additions & 50 deletions stories/Map/components/amap2demo_wind.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,64 +19,63 @@ export default class WindMap extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
center: [40, 30.3628],
center: [105, 35],
pitch: 0,
style: 'normal',
zoom: 2,
viewMode: '3D',
zoom: 4,
}),
});
this.scene = scene;

const pointLayer = new PointLayer({ zIndex: 1 })
.source(
[
{
lng: 121.107846,
lat: 30.267069,
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
.shape('circle')
.color('#f00')
.active(true)
.size(40)
.style({
stroke: '#fff',
storkeWidth: 2,
});
const styleOptions = {
uMin: -21.32,
uMax: 26.8,
vMin: -21.57,
vMax: 21.42,
numParticles: 65535 / 2,
fadeOpacity: 0.996,
rampColors: {
0.0: '#3288bd',
0.1: '#66c2a5',
0.2: '#abdda4',
0.3: '#e6f598',
0.4: '#fee08b',
0.5: '#fdae61',
0.6: '#f46d43', // f46d43
1.0: '#d53e4f',
},
sizeScale: 1,
};

// const pointLayer = new PointLayer({ zIndex: 1 })
// .source(
// [
// {
// lng: 121.107846,
// lat: 30.267069,
// },
// ],
// {
// parser: {
// type: 'json',
// x: 'lng',
// y: 'lat',
// },
// },
// )
// .shape('circle')
// .color('#f00')
// .active(true)
// .size(40)
// .style({
// stroke: '#fff',
// storkeWidth: 2,
// });

scene.on('loaded', () => {
scene.addLayer(pointLayer);

const styleOptions = {
uMin: -21.32,
uMax: 26.8,
vMin: -21.57,
vMax: 21.42,
numParticles: 65535,
fadeOpacity: 0.996,
rampColors: {
0.0: '#3288bd',
0.1: '#66c2a5',
0.2: '#abdda4',
0.3: '#e6f598',
0.4: '#fee08b',
0.5: '#fdae61',
0.6: '#f46d43', // f46d43
1.0: '#d53e4f',
},
sizeScale: 0.5,
};

// scene.addLayer(pointLayer);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
)
Expand All @@ -85,14 +84,17 @@ export default class WindMap extends React.Component {
const layer = new WindLayer({
mask: true,
maskfence: maskData,
// maskColor: '#fff',
// maskOpacity: 0.5,
});
layer
.source(
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image',
extent: [-180, -85, 180, 85],
// extent: [-180, -85, 180, 85],
extent: [70, 16, 136, 54],
},
},
)
Expand Down

0 comments on commit 1a78586

Please sign in to comment.