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

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
2912401452 2021-12-27 19:11:51 +08:00
parent b1882ab660 9727081810
commit 6585268116
8 changed files with 189 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -189,6 +189,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// TODO: layer 保底颜色
private bottomColor = 'rgba(0, 0, 0, 0)';
private isDestroied: boolean = false;
// private pickingPassRender: IPass<'pixelPicking'>;
constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
@ -789,12 +791,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
}
public destroy() {
// debugger
if (this.isDestroied) {
return;
}
this.hooks.beforeDestroy.call();
// 清除sources事件
this.layerSource.off('update', this.sourceEvent);
this.multiPassRenderer.destroy();
// console.log(this.styleAttributeService.getAttributes())
// 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
this.styleAttributeService.clearAllAttributes();
@ -803,7 +809,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.hooks.afterDestroy.call();
// TODO: 清除各个图层自定义的 models 资源
this.layerModel?.clearModels();
// this.layerModel?.clearModels();
this.models = [];
@ -822,6 +828,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.removeAllListeners();
// 解绑图层容器中的服务
// this.container.unbind(TYPES.IStyleAttributeService);
this.isDestroied = true;
}
public clear() {
this.styleAttributeService.clearAllAttributes();

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

@ -20,4 +20,7 @@ export interface ILineLayerStyleOptions {
globalArcHeight?: number; // 可选参数、地球模式下 3D 弧线的高度
vertexHeightScale?: number; // 可选参数、lineLayer vertex height scale
borderWidth?: number; // 可选参数 线边框宽度
borderColor?: string; // 可选参数 线边框颜色
}

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

@ -34,6 +34,8 @@ export default class LineModel extends BaseModel {
lineTexture = false,
iconStep = 100,
vertexHeightScale = 20.0,
borderWidth = 0.0,
borderColor = '#ccc',
} = this.layer.getLayerConfig() as ILineLayerStyleOptions;
if (dashArray.length === 2) {
dashArray.push(0, 0);
@ -98,6 +100,10 @@ export default class LineModel extends BaseModel {
u_icon_step: iconStep,
u_textSize: [1024, this.iconService.canvasHeight || 128],
// line border 参数
u_borderWidth: borderWidth,
u_borderColor: rgb2arr(borderColor),
// 渐变色支持参数
u_linearColor: useLinearColor,
u_sourceColor: sourceColorArr,

41
packages/layers/src/line/shaders/line_frag.glsl
View File

@ -6,8 +6,10 @@ uniform float u_blur : 0.99;
uniform float u_line_type: 0.0;
uniform float u_opacity : 1.0;
uniform float u_textureBlend;
uniform float u_borderWidth: 0.0;
uniform vec4 u_borderColor;
varying vec4 v_color;
// varying vec2 v_normal;
// line texture
uniform float u_line_texture;
@ -69,7 +71,7 @@ void main() {
float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
float v = styleMappingMat[3].a; // 线图层贴图部分的 v 坐标值
v = max(smoothstep(0.95, 1.0, v), v);
// v = max(smoothstep(0.95, 1.0, v), v);
vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
@ -87,19 +89,34 @@ void main() {
gl_FragColor = filterColor(pattern);
}
} else {
float v = styleMappingMat[3].a;
float borderWidth = min(0.5, u_borderWidth);
// 绘制 border
if(borderWidth > 0.0) {
float borderOuterWidth = borderWidth/2.0;
if(v >= 1.0 - borderWidth || v <= borderWidth) {
if(v > borderWidth) {
float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
} else if(v <= borderWidth) {
float linear = smoothstep(0.0, 1.0, v/borderWidth);
gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
}
}
if(v < borderOuterWidth) {
gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
} else if(v > 1.0 - borderOuterWidth) {
gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
}
}
gl_FragColor = filterColor(gl_FragColor);
}
// gl_FragColor = (vec4(1.0, 0.0, 0.0, 1.0));
// if(rV < r || rV > 1.0 - r) {
// gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
// }
// if(v > 0.9) {
// gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
// } else if(v < 0.1) {
// gl_FragColor = vec4(0.17647, 0.43921568, 0.2, 1.0);
// }
// gl_FragColor = filterColor(gl_FragColor);
}

3
packages/layers/src/line/shaders/line_vert.glsl
View File

@ -28,7 +28,6 @@ uniform float u_vertexScale: 1.0;
varying vec4 v_color;
varying vec4 v_dash_array;
varying vec2 v_normal;
// texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
varying vec2 v_iconMapUV;
@ -85,8 +84,6 @@ void main() {
if(u_aimate.x == Animate || u_linearColor == 1.0) {
d_distance_ratio = a_Distance / a_Total_Distance;
}
v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
v_color = a_Color;
vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);

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

@ -15,9 +15,10 @@ export default class Amap2demo_road2 extends React.Component {
id: 'map',
map: new GaodeMap({
center: [120.165, 30.25],
pitch: 50,
zoom: 16.8,
pitch: 0,
zoom: 15,
viewMode: '3D',
style: 'dark',
}),
});
this.scene = scene;
@ -37,7 +38,7 @@ export default class Amap2demo_road2 extends React.Component {
.source(data)
.size(5)
.shape('line')
.texture('02')
// .texture('02')
// .color('#ccc')
.color('rgb(20, 180, 90)')
// .animate({
@ -46,10 +47,13 @@ export default class Amap2demo_road2 extends React.Component {
// trailLength: 2, // 流线长度
// })
.style({
borderWidth: 0.35,
borderColor: '#fff',
// opacity: 0.5,
lineTexture: true, // 开启线的贴图功能
iconStep: 80, // 设置贴图纹理的间距
});
// lineTexture: true, // 开启线的贴图功能
// iconStep: 80, // 设置贴图纹理的间距
})
.active(true);
scene.addLayer(layer);
});
});

14
stories/React/components/world_ncov_fill.tsx
View File

@ -65,6 +65,7 @@ function joinData(geodata: any, ncovData: any) {
}
export default React.memo(function Map() {
const [showScene, setShowScene] = React.useState(true);
const [data, setData] = React.useState();
const [popupInfo, setPopupInfo] = React.useState<{
lnglat: number[];
@ -92,8 +93,14 @@ export default React.memo(function Map() {
};
fetchData();
}, []);
setTimeout(() => {
// setShowScene(false)
}, 3000);
return (
<>
{showScene && (
<AMapScene
map={{
center: [110.19382669582967, 50.258134],
@ -108,6 +115,12 @@ export default React.memo(function Map() {
right: 0,
bottom: 0,
}}
onSceneLoaded={(scene) => {
// setTimeout(() => {
// scene.removeAllLayer()
// }, 3000)
// setTimeout(() => scene.destroy(), 5000)
}}
>
{popupInfo && (
<Popup lnglat={popupInfo.lnglat}>
@ -201,6 +214,7 @@ export default React.memo(function Map() {
/>,
]}
</AMapScene>
)}
</>
);
});

11
tbeta.sh Normal file
View File

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