diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 758e2524b2..1321611df6 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -171,8 +171,8 @@ export default class PickingService implements IPickingService { } this.alreadyInPicking = true; const t = new Date().getTime(); - // @ts-ignore - if (t - this.lastPickTime > 10) { + // TODO: 优化拾取操作 在右键时 mousedown 和 contextmenu 几乎同时触发，所以不能舍去这一次的触发 + if (t - this.lastPickTime > 10 || target.type === 'contextmenu') { await this.pickingLayers(target); } // await this.pickingLayers(target); @@ -206,8 +206,6 @@ export default class PickingService implements IPickingService { getContainer, } = this.rendererService; - this.resizePickingFBO(); - useFramebuffer(this.pickingFBO, () => { const layers = this.layerService.getRenderList(); layers diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl index ebfb8902b1..6a816d9780 100644 --- a/packages/core/src/shaders/picking.frag.glsl +++ b/packages/core/src/shaders/picking.frag.glsl @@ -11,7 +11,7 @@ uniform float u_shaderPick; /* * Returns highlight color if this item is selected. */ -vec4 filterHighlightColor(vec4 color, float lightWeight) { +vec4 filterHighlightColor(vec4 color, float weight) { bool selected = bool(v_PickingResult.a); if (selected) { @@ -21,7 +21,7 @@ vec4 filterHighlightColor(vec4 color, float lightWeight) { float highLightRatio = highLightAlpha / (highLightAlpha + color.a * (1.0 - highLightAlpha)); vec3 resultRGB = mix(color.rgb, highLightColor.rgb, highLightRatio); - return vec4(resultRGB * lightWeight, color.a); + return vec4(resultRGB * weight, color.a); } else { return color; } @@ -53,6 +53,16 @@ vec4 filterColor(vec4 color) { } +// TODO: 优化水波点 blend additive 模式下有的拾取效果 +vec4 filterColorAnimate(vec4 color) { + // TODO: 过滤多余的 shader 计算 + if(u_shaderPick < 0.5) { + return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题 + } else { + return filterPickingColor(filterHighlightColor(color, color.a)); + } +} + vec4 filterColorWithLight(vec4 color, float lightWeight) { // TODO: 过滤多余的 shader 计算 // return color; diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 718e3079e5..8d6cde9d8f 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -31,6 +31,7 @@ interface IPointLayerStyleOptions { stroke: styleColor; strokeOpacity: styleSingle; offsets: styleOffset; + blend: string; } // 判断当前使用的 style 中的变量属性是否需要进行数据映射 export default class FillModel extends BaseModel { @@ -41,6 +42,7 @@ export default class FillModel extends BaseModel { strokeWidth = 0, stroke = 'rgba(0,0,0,0)', offsets = [0, 0], + blend, } = this.layer.getLayerConfig() as IPointLayerStyleOptions; if ( @@ -90,6 +92,7 @@ export default class FillModel extends BaseModel { }); } return { + u_additive: blend === 'additive' ? 1.0 : 0.0, u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0, u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1] u_cellTypeLayout: this.getCellTypeLayout(), diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl index d05680f25d..2423cec2fd 100644 --- a/packages/layers/src/point/shaders/fill_frag.glsl +++ b/packages/layers/src/point/shaders/fill_frag.glsl @@ -1,8 +1,7 @@ #define Animate 0.0 uniform float u_globel; -uniform float u_blur : 0; -// uniform float u_stroke_width : 1; +uniform float u_additive; varying mat4 styleMappingMat; // 传递从片元中传递的映射数据 @@ -33,8 +32,6 @@ void main() { vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke; lowp float antialiasblur = v_data.z; - float antialiased_blur = -max(u_blur, antialiasblur); - // float r = v_radius / (v_radius + u_stroke_width); float r = v_radius / (v_radius + strokeWidth); float outer_df; @@ -72,18 +69,12 @@ void main() { if(u_globel > 0.0) { // TODO: 地球模式下避免多余片元绘制，同时也能避免有用片元在透明且重叠的情况下无法写入 // 付出的代价是边缘会有一些锯齿 - if(outer_df > antialiased_blur + 0.018) discard; + if(outer_df > antialiasblur + 0.018) discard; } - float opacity_t = smoothstep(0.0, antialiased_blur, outer_df); - - - // float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep( - // antialiased_blur, - // 0.0, - // inner_df - // ); - float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep( - antialiased_blur, + float opacity_t = smoothstep(0.0, antialiasblur, outer_df); + + float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep( + antialiasblur, 0.0, inner_df ); @@ -93,21 +84,26 @@ void main() { gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t); - gl_FragColor.a = gl_FragColor.a * opacity_t; if(u_aimate.x == Animate) { float d = length(v_data.xy); float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_aimate.z - u_aimate.y * u_time)), 0.0, 1.0); - gl_FragColor = vec4(gl_FragColor.xyz, intensity); + + // TODO: 根据叠加模式选择效果 + if(u_additive > 0.0) { + gl_FragColor *= intensity; + } else { + gl_FragColor = vec4(gl_FragColor.xyz, intensity); + } + // TODO: 优化在水波纹情况下的拾取（a == 0 时无法拾取） if(d < 0.7) { gl_FragColor.a = max(gl_FragColor.a, 0.001); } + + gl_FragColor = u_additive > 0.0 ？filterColorAnimate(gl_FragColor) : filterColor(gl_FragColor); + } else { + gl_FragColor = filterColor(gl_FragColor); } - - gl_FragColor = filterColor(gl_FragColor); - if(gl_FragColor.a == 0.00) { - gl_FragColor.rgb *= gl_FragColor.a; - } - // gl_FragColor.rgb *= gl_FragColor.a; - + + gl_FragColor *= opacity_t; } diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl index 7cd11daf46..6d9c52a646 100644 --- a/packages/layers/src/point/shaders/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill_vert.glsl @@ -20,6 +20,8 @@ uniform float u_stroke_width : 2; uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0]; uniform vec2 u_offsets; +uniform float u_blur : 0.0; + #pragma include "styleMapping" #pragma include "styleMappingCalOpacity" #pragma include "styleMappingCalStrokeOpacity" @@ -121,7 +123,8 @@ void main() { // TODO: billboard // anti-alias - float antialiasblur = 1.0 / u_DevicePixelRatio / (newSize + u_stroke_width); + // float antialiased_blur = -max(u_blur, antialiasblur); + float antialiasblur = -max(1.0 / u_DevicePixelRatio / (newSize + u_stroke_width), u_blur); // construct point coords // TODP: /abs(extrude.x) 是为了兼容地球模式 diff --git a/packages/map/src/map.ts b/packages/map/src/map.ts index aec10c00c2..61741efa3e 100644 --- a/packages/map/src/map.ts +++ b/packages/map/src/map.ts @@ -122,7 +122,8 @@ export class Map extends Camera { const height = dimensions[1]; this.transform.resize(width, height); - if (!isMini) { + // TODO: 小程序环境不需要执行后续动作 + if (isMini) { return this; } const fireMoving = !this.moving; diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index fe7c08d7ee..e2930a4f92 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -28,7 +28,9 @@ export default class GaodeMapComponent extends React.Component { // min = 'min', // max = 'max', // none = 'none', - const layer = new PointLayer({ zIndex: 2, blend: 'additive' }) // + // blend: 'additive' + + let layer = new PointLayer({ zIndex: 2, blend: 'additive' }) .source( [ { @@ -49,48 +51,26 @@ export default class GaodeMapComponent extends React.Component { }, ) .shape('circle') - // .shape('normal') .color('#1990FF') - .size(20) + .size(40) .style({ - stroke: '#fff', - storkeWidth: 2, - }); + stroke: '#f00', + strokeWidth: 3, + strokeOpacity: 1, + }) + .animate(true) + .active({ color: '#ff0' }); this.scene = scene; - const linelayer = new LineLayer({ blend: 'additive' }) - .source({ - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: {}, - geometry: { - type: 'MultiLineString', - coordinates: [ - [ - [121.107846, 30.267069], - [121.107, 30.267069], - ], - ], - }, - }, - ], - }) - .shape('line') - .color('#78FFFF') - .size(10); - scene.on('loaded', () => { - // scene.addLayer(linelayer); scene.addLayer(layer); }); layer.on('click', () => console.log('point click')); - layer.on('mousemove', (e) => { - console.log(e.feature); - }); - linelayer.on('click', () => console.log('line click')); + layer.on('contextmenu', () => console.log('contextmenu')); + // layer.on('mousemove', (e) => { + // console.log(e.feature); + // }); } public render() { diff --git a/stories/customMap/components/Map.tsx b/stories/customMap/components/Map.tsx index 6bf8cb55ba..81ea636d6d 100644 --- a/stories/customMap/components/Map.tsx +++ b/stories/customMap/components/Map.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { Scene, PolygonLayer, PointLayer, Map } from '@antv/l7-mini'; // import { Scene } from '@antv/l7'; // import { PolygonLayer, PointLayer } from '@antv/l7-layers'; @@ -8,68 +9,61 @@ export default class ScaleComponent extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Map({ center: [105, 32], pitch: 0, zoom: 3, }), }); // scene.setBgColor('#000'); + scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', + ) + .then((res) => res.json()) + .then((data) => { + let layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true + .source(data) + .size('name', [0, 10000, 50000, 30000, 100000]) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('fill') + .select(true) + .style({ + opacity: 0.8, + opacityLinear: { + enable: true, + dir: 'in', // in - out + }, + }); - fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', - ) - .then((res) => res.json()) - .then((data) => { - const layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true - .source(data) - .size('name', [0, 10000, 50000, 30000, 100000]) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('fill') - .select(true) - .style({ - opacity: 0.8, - opacityLinear: { - enable: true, - dir: 'in', // in - out - }, - }); + let layer2 = new PolygonLayer({ blend: 'normal' }) + .source(data) + .size(1) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('line') + .select(true) + .style({ + opacity: 1.0, + }); - const layer2 = new PolygonLayer({ blend: 'normal' }) - .source(data) - .size(1) - .color('name', [ - '#2E8AE6', - '#69D1AB', - '#DAF291', - '#FFD591', - '#FF7A45', - '#CF1D49', - ]) - .shape('line') - .select(true) - .style({ - opacity: 1.0, - }); - - scene.on('loaded', () => { scene.addLayer(layer); scene.addLayer(layer2); - scene.fitBounds([ - [48.073279, 3.067261], - [160.573279, 54.003394], - ]); - - console.log('getBounds', scene.getBounds()); }); - }); + }); } public render() {