mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of https://github.com/antvis/L7
This commit is contained in:
2912401452
commit
0239894f2f
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) 是为了兼容地球模式
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue