mirror of https://gitee.com/antv-l7/antv-l7
YiQianYao
GitHub
parent
0b56dc8019
commit
d6cb7da3a7
|
|
@ -95,6 +95,9 @@ export interface IPolygonLayerStyleOptions {
|
|||
// water
|
||||
waterTexture?: string;
|
||||
speed?: number;
|
||||
// ocean
|
||||
watercolor?: string;
|
||||
watercolor2?: string;
|
||||
}
|
||||
|
||||
export interface IImageLayerStyleOptions {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
|
|||
return 'extrude';
|
||||
} else if (shape === 'water') {
|
||||
return 'water';
|
||||
} else if (shape === 'ocean') {
|
||||
return 'ocean';
|
||||
} else if (shape === 'line') {
|
||||
return 'line';
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import NormalModel from '../../point/models/normal';
|
|||
import TextModel from '../../point/models/text';
|
||||
import ExtrudeModel from './extrude';
|
||||
import FillModel from './fill';
|
||||
import Ocean from './ocean';
|
||||
import Water from './water';
|
||||
|
||||
export type PolygonModelType =
|
||||
|
|
@ -17,7 +18,8 @@ export type PolygonModelType =
|
|||
| 'point_normal'
|
||||
| 'point_extrude'
|
||||
| 'text'
|
||||
| 'water';
|
||||
| 'water'
|
||||
| 'ocean';
|
||||
|
||||
const PolygonModels: { [key in PolygonModelType]: any } = {
|
||||
fill: FillModel,
|
||||
|
|
@ -29,7 +31,7 @@ const PolygonModels: { [key in PolygonModelType]: any } = {
|
|||
point_normal: NormalModel,
|
||||
point_extrude: PointExtrudeModel,
|
||||
water: Water,
|
||||
|
||||
ocean: Ocean,
|
||||
// point_fill: PointModels.fill,
|
||||
};
|
||||
export default PolygonModels;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,186 @@
|
|||
import {
|
||||
AttributeType,
|
||||
gl,
|
||||
IEncodeFeature,
|
||||
IModel,
|
||||
IModelUniform,
|
||||
ITexture2D,
|
||||
} from '@antv/l7-core';
|
||||
import { getMask, rgb2arr } from '@antv/l7-utils';
|
||||
import { create, isNumber } from 'lodash';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { IPolygonLayerStyleOptions } from '../../core/interface';
|
||||
import { polygonTriangulation } from '../../core/triangulation';
|
||||
import ocean_frag from '../shaders/water/polygon_ocean_frag.glsl';
|
||||
import ocean_vert from '../shaders/water/polygon_ocean_vert.glsl';
|
||||
export default class OceanModel extends BaseModel {
|
||||
private texture1: ITexture2D;
|
||||
private texture2: ITexture2D;
|
||||
private texture3: ITexture2D;
|
||||
public getUninforms() {
|
||||
const {
|
||||
opacity = 1,
|
||||
watercolor = '#6D99A8',
|
||||
watercolor2 = '#0F121C',
|
||||
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
|
||||
if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
|
||||
this.judgeStyleAttributes({ opacity });
|
||||
const encodeData = this.layer.getEncodedData();
|
||||
const { data, width, height } = this.calDataFrame(
|
||||
this.cellLength,
|
||||
encodeData,
|
||||
this.cellProperties,
|
||||
);
|
||||
this.rowCount = height; // 当前数据纹理有多少行
|
||||
|
||||
this.dataTexture =
|
||||
this.cellLength > 0 && data.length > 0
|
||||
? this.createTexture2D({
|
||||
flipY: true,
|
||||
data,
|
||||
format: gl.LUMINANCE,
|
||||
type: gl.FLOAT,
|
||||
width,
|
||||
height,
|
||||
})
|
||||
: this.createTexture2D({
|
||||
flipY: true,
|
||||
data: [1],
|
||||
format: gl.LUMINANCE,
|
||||
type: gl.FLOAT,
|
||||
width: 1,
|
||||
height: 1,
|
||||
});
|
||||
}
|
||||
return {
|
||||
u_texture1: this.texture1,
|
||||
u_texture2: this.texture2,
|
||||
u_texture3: this.texture3,
|
||||
u_watercolor: rgb2arr(watercolor),
|
||||
u_watercolor2: rgb2arr(watercolor2),
|
||||
u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
|
||||
u_cellTypeLayout: this.getCellTypeLayout(),
|
||||
u_opacity: isNumber(opacity) ? opacity : 1.0,
|
||||
};
|
||||
}
|
||||
|
||||
public getAnimateUniforms(): IModelUniform {
|
||||
return {
|
||||
u_time: this.layer.getLayerAnimateTime(),
|
||||
};
|
||||
}
|
||||
|
||||
public initModels(): IModel[] {
|
||||
this.loadTexture();
|
||||
return this.buildModels();
|
||||
}
|
||||
|
||||
public buildModels(): IModel[] {
|
||||
const {
|
||||
mask = false,
|
||||
maskInside = true,
|
||||
} = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
|
||||
return [
|
||||
this.layer.buildLayerModel({
|
||||
moduleName: 'polygon_ocean',
|
||||
vertexShader: ocean_vert,
|
||||
fragmentShader: ocean_frag,
|
||||
triangulation: polygonTriangulation,
|
||||
depth: { enable: false },
|
||||
|
||||
stencil: getMask(mask, maskInside),
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
public clearModels() {
|
||||
this.texture1.destroy();
|
||||
this.texture2.destroy();
|
||||
this.texture3.destroy();
|
||||
this.dataTexture?.destroy();
|
||||
}
|
||||
|
||||
protected registerBuiltinAttributes() {
|
||||
const bbox = this.layer.getSource().extent;
|
||||
const [minLng, minLat, maxLng, maxLat] = bbox;
|
||||
const lngLen = maxLng - minLng;
|
||||
const latLen = maxLat - minLat;
|
||||
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'linear',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_uv',
|
||||
buffer: {
|
||||
// give the WebGL driver a hint that this buffer may change
|
||||
usage: gl.STATIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 2,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
normal: number[],
|
||||
) => {
|
||||
const [lng, lat] = vertex;
|
||||
return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private loadTexture() {
|
||||
const { createTexture2D } = this.rendererService;
|
||||
const defaultTextureOptions = { height: 0, width: 0 };
|
||||
// 默认索引为 undefined，所以单独赋值
|
||||
this.texture1 = createTexture2D(defaultTextureOptions);
|
||||
this.texture2 = createTexture2D(defaultTextureOptions);
|
||||
this.texture3 = createTexture2D(defaultTextureOptions);
|
||||
|
||||
// 加载完 image 后单独给 texture f赋值
|
||||
initImage((images: HTMLImageElement[]) => {
|
||||
this.texture1 = initTex(images[0]);
|
||||
this.texture2 = initTex(images[1]);
|
||||
this.texture3 = initTex(images[2]);
|
||||
this.layerService.updateLayerRenderList();
|
||||
this.layerService.renderLayers();
|
||||
});
|
||||
|
||||
function initImage(callback: (loadedImages: HTMLImageElement[]) => void) {
|
||||
let loadedCount = 0;
|
||||
const loadedImages: HTMLImageElement[] = [];
|
||||
const images = [
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ',
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MJ22QbpuCzIAAAAAAAAAAAAAARQnAQ',
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*-z2HSIVDsHIAAAAAAAAAAAAAARQnAQ',
|
||||
];
|
||||
images.map((imgSrc: string) => {
|
||||
const image = new Image();
|
||||
image.crossOrigin = '';
|
||||
image.src = imgSrc;
|
||||
loadedImages.push(image);
|
||||
image.onload = () => {
|
||||
loadedCount++;
|
||||
if (loadedCount === 3) {
|
||||
callback(loadedImages);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function initTex(image: HTMLImageElement) {
|
||||
return createTexture2D({
|
||||
data: image,
|
||||
width: image.width,
|
||||
height: image.height,
|
||||
wrapS: gl.MIRRORED_REPEAT,
|
||||
wrapT: gl.MIRRORED_REPEAT,
|
||||
min: gl.LINEAR,
|
||||
mag: gl.LINEAR,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
|
||||
uniform float u_time;
|
||||
uniform float u_opacity: 1.0;
|
||||
|
||||
varying vec4 v_Color;
|
||||
varying vec2 v_uv;
|
||||
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
|
||||
|
||||
#pragma include "picking"
|
||||
|
||||
float coast2water_fadedepth = 0.10;
|
||||
float large_waveheight = .750; // change to adjust the "heavy" waves
|
||||
float large_wavesize = 3.4; // factor to adjust the large wave size
|
||||
float small_waveheight = 0.6; // change to adjust the small random waves
|
||||
float small_wavesize = 0.5; // factor to ajust the small wave size
|
||||
float water_softlight_fact = 15.; // range [1..200] (should be << smaller than glossy-fact)
|
||||
float water_glossylight_fact= 120.; // range [1..200]
|
||||
float particle_amount = 70.;
|
||||
// vec3 watercolor = vec3(0.43, 0.60, 0.66); // 'transparent' low-water color (RGB)
|
||||
// vec3 watercolor2 = vec3(0.06, 0.07, 0.11); // deep-water color (RGB, should be darker than the low-water color)
|
||||
uniform vec4 u_watercolor;
|
||||
uniform vec4 u_watercolor2;
|
||||
vec3 water_specularcolor = vec3(1.3, 1.3, 0.9); // specular Color (RGB) of the water-highlights
|
||||
#define light vec3(-0., sin(u_time*0.5)*.5 + .35, 2.8) // position of the sun
|
||||
|
||||
uniform sampler2D u_texture1;
|
||||
uniform sampler2D u_texture2;
|
||||
uniform sampler2D u_texture3;
|
||||
|
||||
|
||||
|
||||
float hash( float n ) {
|
||||
return fract(sin(n)*43758.5453123);
|
||||
}
|
||||
|
||||
// 2d noise function
|
||||
float noise1( in vec2 x ) {
|
||||
vec2 p = floor(x);
|
||||
vec2 f = smoothstep(0.0, 1.0, fract(x));
|
||||
float n = p.x + p.y*57.0;
|
||||
return mix(mix( hash(n+ 0.0), hash(n+ 1.0),f.x),
|
||||
mix( hash(n+ 57.0), hash(n+ 58.0),f.x),f.y);
|
||||
}
|
||||
|
||||
float noise(vec2 p) {
|
||||
return texture2D(u_texture2,p*vec2(1./256.)).x;
|
||||
}
|
||||
|
||||
vec4 highness(vec2 p) {
|
||||
vec4 t = texture2D(u_texture1,fract(p));
|
||||
float clipped = -2.0-smoothstep(3.,10.,t.a)*6.9-smoothstep(10.,100.,t.a)*89.9-smoothstep(0.,10000.,t.a)*10000.0;
|
||||
return clamp(t, 0.0,3.0)+clamp(t/3.0-1.0, 0.0,1.0)+clamp(t/16.0-1.0, 0.0,1.0);
|
||||
}
|
||||
|
||||
float height_map( vec2 p ) {
|
||||
vec4 height=highness(p);
|
||||
/*
|
||||
height = -0.5+
|
||||
0.5*smoothstep(-100.,0.,-height)+
|
||||
2.75*smoothstep(0.,2.,height)+
|
||||
1.75*smoothstep(2.,4.,height)+
|
||||
2.75*smoothstep(4.,16.,height)+
|
||||
1.5*smoothstep(16.,1000.,height);
|
||||
*/
|
||||
|
||||
mat2 m = mat2( 0.9563*1.4, -0.2924*1.4, 0.2924*1.4, 0.9563*1.4 );
|
||||
//p = p*6.;
|
||||
float f = 0.6000*noise1( p ); p = m*p*1.1*6.;
|
||||
f += 0.2500*noise( p ); p = m*p*1.32;
|
||||
f += 0.1666*noise( p ); p = m*p*1.11;
|
||||
f += 0.0834*noise( p ); p = m*p*1.12;
|
||||
f += 0.0634*noise( p ); p = m*p*1.13;
|
||||
f += 0.0444*noise( p ); p = m*p*1.14;
|
||||
f += 0.0274*noise( p ); p = m*p*1.15;
|
||||
f += 0.0134*noise( p ); p = m*p*1.16;
|
||||
f += 0.0104*noise( p ); p = m*p*1.17;
|
||||
f += 0.0084*noise( p );
|
||||
f = .25*f+dot(height,vec4(-.03125,-.125,.25,.25))*.5;
|
||||
const float FLAT_LEVEL = 0.92525;
|
||||
//f = f*0.25+height*0.75;
|
||||
if (f<FLAT_LEVEL)
|
||||
f = f;
|
||||
else
|
||||
f = pow((f-FLAT_LEVEL)/(1.-FLAT_LEVEL), 2.)*(1.-FLAT_LEVEL)*2.0+FLAT_LEVEL; // makes a smooth coast-increase
|
||||
return clamp(f, 0., 10.);
|
||||
}
|
||||
|
||||
vec3 plasma_quintic( float x ) {
|
||||
x = clamp( x, 0.0, 1.0);
|
||||
vec4 x1 = vec4( 1.0, x, x * x, x * x * x ); // 1 x x2 x3
|
||||
vec4 x2 = x1 * x1.w * x; // x4 x5 x6 x7
|
||||
return vec3(
|
||||
dot( x1.xyzw, vec4( +0.063861086, +1.992659096, -1.023901152, -0.490832805 ) ) + dot( x2.xy, vec2( +1.308442123, -0.914547012 ) ),
|
||||
dot( x1.xyzw, vec4( +0.049718590, -0.791144343, +2.892305078, +0.811726816 ) ) + dot( x2.xy, vec2( -4.686502417, +2.717794514 ) ),
|
||||
dot( x1.xyzw, vec4( +0.513275779, +1.580255060, -5.164414457, +4.559573646 ) ) + dot( x2.xy, vec2( -1.916810682, +0.570638854 ) ) );
|
||||
}
|
||||
|
||||
vec4 color(vec2 p){
|
||||
vec4 c1 = vec4(1.7,1.6,.9,1);
|
||||
vec4 c2 = vec4(.2,.94,.1,1);
|
||||
vec4 c3 = vec4(.3,.2,.0,1);
|
||||
vec4 c4 = vec4(.99,.99,1.6,1);
|
||||
vec4 v = highness(p);
|
||||
float los = smoothstep(0.1,1.1,v.b);
|
||||
float his = smoothstep(3.5,6.5,v.b);
|
||||
float ces = smoothstep(1.,5.,v.a);
|
||||
vec4 lo = mix(c1,c2,los);
|
||||
vec4 hi = mix(c3,c4,his);
|
||||
vec4 ce = mix(lo,hi,ces);
|
||||
|
||||
return vec4(plasma_quintic(ces),1).ragb;
|
||||
}
|
||||
|
||||
vec3 terrain_map( vec2 p )
|
||||
{
|
||||
return color(p).rgb*0.75+0.25*vec3(0.7, .55, .4)+texture2D(u_texture3, fract(p*5.)).rgb*.5; // test-terrain is simply 'sandstone'
|
||||
}
|
||||
|
||||
const mat2 m = mat2( 0.72, -1.60, 1.60, 0.72 );
|
||||
|
||||
float water_map( vec2 p, float height ) {
|
||||
vec2 p2 = p*large_wavesize;
|
||||
vec2 shift1 = 0.001*vec2( u_time*160.0*2.0, u_time*120.0*2.0 );
|
||||
vec2 shift2 = 0.001*vec2( u_time*190.0*2.0, -u_time*130.0*2.0 );
|
||||
|
||||
// coarse crossing 'ocean' waves...
|
||||
float f = 0.6000*noise( p );
|
||||
f += 0.2500*noise( p*m );
|
||||
f += 0.1666*noise( p*m*m );
|
||||
float wave = sin(p2.x*0.622+p2.y*0.622+shift2.x*4.269)*large_waveheight*f*height*height ;
|
||||
|
||||
p *= small_wavesize;
|
||||
f = 0.;
|
||||
float amp = 1.0, s = .5;
|
||||
for (int i=0; i<9; i++)
|
||||
{ p = m*p*.947; f -= amp*abs(sin((noise( p+shift1*s )-.5)*2.)); amp = amp*.59; s*=-1.329; }
|
||||
|
||||
return wave+f*small_waveheight;
|
||||
}
|
||||
|
||||
float nautic(vec2 p) {
|
||||
p *= 18.;
|
||||
float f = 0.;
|
||||
float amp = 1.0, s = .5;
|
||||
for (int i=0; i<3; i++)
|
||||
{ p = m*p*1.2; f += amp*abs(smoothstep(0., 1., noise( p+u_time*s ))-.5); amp = amp*.5; s*=-1.227; }
|
||||
return pow(1.-f, 5.);
|
||||
}
|
||||
|
||||
float particles(vec2 p) {
|
||||
p *= 200.;
|
||||
float f = 0.;
|
||||
float amp = 1.0, s = 1.5;
|
||||
for (int i=0; i<3; i++)
|
||||
{ p = m*p*1.2; f += amp*noise( p+u_time*s ); amp = amp*.5; s*=-1.227; }
|
||||
return pow(f*.35, 7.)*particle_amount;
|
||||
}
|
||||
|
||||
float test_shadow( vec2 xy, float height) {
|
||||
vec3 r0 = vec3(xy, height);
|
||||
vec3 rd = normalize( light - r0 );
|
||||
|
||||
float hit = 1.0;
|
||||
float t = 0.001;
|
||||
for (int j=1; j<25; j++)
|
||||
{
|
||||
vec3 p = r0 + t*rd;
|
||||
float h = height_map( p.xy );
|
||||
float height_diff = p.z - h;
|
||||
if (height_diff<0.0)
|
||||
{
|
||||
return 0.0;
|
||||
}
|
||||
t += 0.01+height_diff*.02;
|
||||
hit = min(hit, 2.*height_diff/t); // soft shaddow
|
||||
}
|
||||
return hit;
|
||||
}
|
||||
|
||||
vec3 CalcTerrain(vec2 uv, float height) {
|
||||
vec3 col = terrain_map( uv );
|
||||
vec2 iResolution = vec2(512.);
|
||||
float h1 = height_map(uv-vec2(0., 0.5)/ iResolution.xy);
|
||||
float h2 = height_map(uv+vec2(0., 0.5)/ iResolution.xy);
|
||||
float h3 = height_map(uv-vec2(0.5, 0.)/ iResolution.xy);
|
||||
float h4 = height_map(uv+vec2(0.5, 0.)/ iResolution.xy);
|
||||
vec3 norm = normalize(vec3(h3-h4, h1-h2, 1.));
|
||||
vec3 r0 = vec3(uv, height);
|
||||
vec3 rd = normalize( light - r0 );
|
||||
float grad = dot(norm, rd);
|
||||
col *= grad+pow(grad, 8.);
|
||||
float terrainshade = test_shadow( uv, height );
|
||||
col = mix(col*.25, col, terrainshade);
|
||||
return col;
|
||||
}
|
||||
|
||||
|
||||
void main() {
|
||||
vec3 watercolor = u_watercolor.rgb;
|
||||
vec3 watercolor2 = u_watercolor2.rgb;
|
||||
vec2 uv = v_uv;
|
||||
float WATER_LEVEL = 0.84; // Water level (range: 0.0 - 2.0)
|
||||
float deepwater_fadedepth = 0.4 + coast2water_fadedepth;
|
||||
float height = height_map( uv );
|
||||
vec3 col;
|
||||
|
||||
float waveheight = clamp(WATER_LEVEL*3.-1.5, 0., 1.);
|
||||
float level = WATER_LEVEL + .2*water_map(uv*15. + vec2(u_time*.1), waveheight);
|
||||
if (height > level)
|
||||
{
|
||||
col = CalcTerrain(uv, height);
|
||||
}
|
||||
if (height <= level)
|
||||
{
|
||||
vec2 dif = vec2(.0, .01);
|
||||
vec2 pos = uv*15. + vec2(u_time*.01);
|
||||
float h1 = water_map(pos-dif,waveheight);
|
||||
float h2 = water_map(pos+dif,waveheight);
|
||||
float h3 = water_map(pos-dif.yx,waveheight);
|
||||
float h4 = water_map(pos+dif.yx,waveheight);
|
||||
vec3 normwater = normalize(vec3(h3-h4, h1-h2, .125)); // norm-vector of the 'bumpy' water-plane
|
||||
uv += normwater.xy*.002*(level-height);
|
||||
|
||||
col = CalcTerrain(uv, height);
|
||||
|
||||
float coastfade = clamp((level-height)/coast2water_fadedepth, 0., 1.);
|
||||
float coastfade2= clamp((level-height)/deepwater_fadedepth, 0., 1.);
|
||||
float intensity = col.r*.2126+col.g*.7152+col.b*.0722;
|
||||
watercolor = mix(watercolor*intensity, watercolor2, smoothstep(0., 1., coastfade2));
|
||||
|
||||
vec3 r0 = vec3(uv, WATER_LEVEL);
|
||||
vec3 rd = normalize( light - r0 ); // ray-direction to the light from water-position
|
||||
float grad = dot(normwater, rd); // dot-product of norm-vector and light-direction
|
||||
float specular = pow(grad, water_softlight_fact); // used for soft highlights
|
||||
float specular2= pow(grad, water_glossylight_fact); // used for glossy highlights
|
||||
float gradpos = dot(vec3(0., 0., 1.), rd);
|
||||
float specular1= smoothstep(0., 1., pow(gradpos, 5.)); // used for diffusity (some darker corona around light's specular reflections...)
|
||||
float watershade = test_shadow( uv, level );
|
||||
watercolor *= 2.2+watershade;
|
||||
watercolor += (.2+.8*watershade) * ((grad-1.0)*.5+specular) * .25;
|
||||
watercolor /= (1.+specular1*1.25);
|
||||
watercolor += watershade*specular2*water_specularcolor;
|
||||
watercolor += watershade*coastfade*(1.-coastfade2)*(vec3(.5, .6, .7)*nautic(uv)+vec3(1., 1., 1.)*particles(uv));
|
||||
|
||||
col = mix(col, watercolor, coastfade);
|
||||
}
|
||||
|
||||
|
||||
float opacity = styleMappingMat[0][0];
|
||||
gl_FragColor = vec4(col, opacity);
|
||||
|
||||
// gl_FragColor = v_Color;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
attribute vec4 a_Color;
|
||||
attribute vec2 a_uv;
|
||||
attribute vec3 a_Position;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
uniform mat4 u_Mvp;
|
||||
|
||||
varying vec4 v_Color;
|
||||
varying vec2 v_uv;
|
||||
uniform float u_opacity: 1.0;
|
||||
varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
|
||||
|
||||
#pragma include "styleMapping"
|
||||
#pragma include "styleMappingCalOpacity"
|
||||
|
||||
#pragma include "projection"
|
||||
#pragma include "picking"
|
||||
|
||||
void main() {
|
||||
v_uv = a_uv;
|
||||
// cal style mapping - 数据纹理映射部分的计算
|
||||
styleMappingMat = mat4(
|
||||
0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
|
||||
0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
|
||||
0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
|
||||
0.0, 0.0, 0.0, 0.0
|
||||
);
|
||||
|
||||
float rowCount = u_cellTypeLayout[0][0]; // 当前的数据纹理有几行
|
||||
float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
|
||||
float columnWidth = 1.0/columnCount; // 列宽
|
||||
float rowHeight = 1.0/rowCount; // 行高
|
||||
float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
|
||||
float id = a_vertexId; // 第n个顶点
|
||||
float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
|
||||
float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
|
||||
|
||||
// cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ...
|
||||
// 按顺序从 cell 中取值、若没有则自动往下取值
|
||||
float textureOffset = 0.0; // 在 cell 中取值的偏移量
|
||||
|
||||
vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
|
||||
styleMappingMat[0][0] = opacityAndOffset.r;
|
||||
textureOffset = opacityAndOffset.g;
|
||||
// cal style mapping - 数据纹理映射部分的计算
|
||||
|
||||
v_Color = a_Color;
|
||||
vec4 project_pos = project_position(vec4(a_Position, 1.0));
|
||||
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
|
||||
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
|
||||
gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
|
||||
} else {
|
||||
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
|
||||
}
|
||||
|
||||
setPickingColor(a_PickingColor);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import { PolygonLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class Amap2demo_polygon extends React.Component {
|
||||
private scene: Scene;
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
public async componentDidMount() {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
center: [-44.40673828125, -18.375379094031825],
|
||||
zoom: 13,
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
testOpacity: 0.4,
|
||||
},
|
||||
geometry: {
|
||||
type: 'MultiPolygon',
|
||||
coordinates: [
|
||||
[
|
||||
[
|
||||
[111.26953125, 33.52307880890422],
|
||||
[111.26953125, 34.03445260967645],
|
||||
[112.03857421875, 34.03445260967645],
|
||||
[112.03857421875, 33.52307880890422],
|
||||
[111.26953125, 33.52307880890422],
|
||||
],
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
|
||||
)
|
||||
.then((data) => data.json())
|
||||
.then(({ lakeData }) => {
|
||||
const lakeLayer = new PolygonLayer({ autoFit: true })
|
||||
.source(lakeData)
|
||||
.shape('ocean')
|
||||
.color('#1E90FF')
|
||||
.style({
|
||||
watercolor: '#6D99A8',
|
||||
// watercolor: '#0f0',
|
||||
})
|
||||
.animate(true);
|
||||
|
||||
scene.addLayer(lakeLayer);
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
import { storiesOf } from '@storybook/react';
|
||||
import * as React from 'react';
|
||||
import Water from './components/water';
|
||||
import Ocean from './components/ocean';
|
||||
import Taifong from './components/taifeng'
|
||||
import Radar from './components/radar';
|
||||
|
||||
storiesOf('Object', module)
|
||||
.add('water', () => <Water />)
|
||||
.add('Ocean', () => <Ocean />)
|
||||
.add('Taifong', () => <Taifong />)
|
||||
.add('Radar', () => <Radar/>)
|
||||
Loading…
Reference in New Issue