mirror of https://gitee.com/antv-l7/antv-l7
Shihuidev (#892)
* feat: 增加着色器的拾取计算控制、完善 arcmini * feat: 完善 enableShaderPick/disableShaderPick 功能 * style: lint style * feat: 补充调用高德地图公交线路查询 demo * style: lint style * feat: 优化弧线的纹理动画 * style: lint style * feat: 去除greatCircle 的纹理动画优化 * feat: 扩展点图层圆柱效果 * feat: 增加几何体的径向渐变配置 * style: lint style * fix: 修复bug 图层触发的事件跟图层设置的zIndex无关，只跟插入图层先后顺序有关 * style: lint style * feat: 补全挤出几何体拾取颜色的光照配置 * style: lint style * fix: 修复圆柱 cull 问题 mapbox amap 不同 * feat: 图层销毁时的内存泄漏 * style: lint style * feat: 平面弧线新增弧线偏移量的数据映射能力 * style: lint style * fix: 修复重复销毁bug * style: lint style * feat: 修复 texture 重复销毁问题 * style: lint style * fix: 修复图层叠加模式下的拾取失效问题 * style: lint style * fix: 修复纹理贴图在 zoom 大于 12 时存在的问题 * fix: 修复水波点颜色偏暗 * feat: 优化点图层的渲染效果，叠加渲染效果 * style: lint style * fix: 修复 layer contextmenu 事件丢失 * fix: 修复 map 类型 resize 失效 * style: lint style * feat: 增加瓦片地图的请求节流 * style: lint style * feat: 优化热力图在 radius 数值比较大时热力点边缘发生裁剪的现象 * style: lint style * fix: 修复resize 后 picking shiqu 拾取失败的问题 * feat: 优化 marker/popup 在容器边缘的表现 * feat: 增加 setEnableRender 方法 * style: lint style * feat: 增加城市图层扫光特效 * style: lint style * feat: 补全拾取色混合配置 * style: lint style * feat: 增加高德地图的面积大小点 * style: lint style * feat: 点优化边缘锯齿 * fix: 修复pointLayer stroke 变暗问题 * fix: 修复混合导致的拾取错误 * feat: add simple point 1.0 * style: lint style * feat: simple point support stroke * style: lint style * feat: 优化 simple point 边缘的锯齿 * style: lint style * feat: add point cylinder raising animate * style: lint style
This commit is contained in:
YiQianYao
GitHub
parent
14d6525f8e
commit
b8b9b9f50e
|
|
@ -1,6 +1,12 @@
|
|||
import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
|
||||
import {
|
||||
AttributeType,
|
||||
gl,
|
||||
IAnimateOption,
|
||||
IEncodeFeature,
|
||||
IModel,
|
||||
} from '@antv/l7-core';
|
||||
import { rgb2arr } from '@antv/l7-utils';
|
||||
import { isNumber } from 'lodash';
|
||||
import { isBoolean, isNumber } from 'lodash';
|
||||
import BaseModel, { styleOffset, styleSingle } from '../../core/BaseModel';
|
||||
import { PointExtrudeTriangulation } from '../../core/triangulation';
|
||||
import { lglt2xyz } from '../../earth/utils';
|
||||
|
|
@ -8,6 +14,7 @@ import { calculateCentroid } from '../../utils/geo';
|
|||
import pointExtrudeFrag from '../shaders/extrude_frag.glsl';
|
||||
import pointExtrudeVert from '../shaders/extrude_vert.glsl';
|
||||
interface IPointLayerStyleOptions {
|
||||
animateOption: IAnimateOption;
|
||||
depth: boolean;
|
||||
opacity: styleSingle;
|
||||
offsets: styleOffset;
|
||||
|
|
@ -22,8 +29,15 @@ interface IPointLayerStyleOptions {
|
|||
lightEnable: boolean;
|
||||
}
|
||||
export default class ExtrudeModel extends BaseModel {
|
||||
private raiseCount: number = 0;
|
||||
private raiserepeat: number = 0;
|
||||
public getUninforms() {
|
||||
const {
|
||||
animateOption = {
|
||||
enable: false,
|
||||
speed: 0.01,
|
||||
repeat: false,
|
||||
},
|
||||
opacity = 1,
|
||||
|
||||
sourceColor,
|
||||
|
|
@ -83,7 +97,23 @@ export default class ExtrudeModel extends BaseModel {
|
|||
useLinearColor = 1;
|
||||
}
|
||||
|
||||
if (this.raiseCount < 1 && this.raiserepeat > 0) {
|
||||
if (animateOption.enable) {
|
||||
const { speed = 0.01, repeat = false } = animateOption;
|
||||
this.raiseCount += speed;
|
||||
if (this.raiseCount >= 1) {
|
||||
if (this.raiserepeat > 1) {
|
||||
this.raiseCount = 0;
|
||||
this.raiserepeat--;
|
||||
} else {
|
||||
this.raiseCount = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
u_r: animateOption.enable && this.raiserepeat > 0 ? this.raiseCount : 1.0,
|
||||
// TODO: 判断当前的点图层的模型是普通地图模式还是地球模式
|
||||
u_globel: this.mapService.version === 'GLOBEL' ? 1 : 0,
|
||||
|
||||
|
|
@ -114,7 +144,9 @@ export default class ExtrudeModel extends BaseModel {
|
|||
// GAODE1.x GAODE2.x MAPBOX
|
||||
const {
|
||||
depth = true,
|
||||
animateOption: { repeat = 1 },
|
||||
} = this.layer.getLayerConfig() as IPointLayerStyleOptions;
|
||||
this.raiserepeat = repeat;
|
||||
return [
|
||||
this.layer.buildLayerModel({
|
||||
moduleName: 'pointExtrude2',
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ attribute vec3 a_Size;
|
|||
attribute vec3 a_Normal;
|
||||
|
||||
uniform float u_globel;
|
||||
uniform float u_r;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
uniform mat4 u_Mvp;
|
||||
varying vec4 v_color;
|
||||
|
|
@ -83,8 +84,9 @@ void main() {
|
|||
|
||||
vec4 project_pos = project_position(vec4(a_Pos.xy, 0., 1.0));
|
||||
|
||||
vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z), 1.0);
|
||||
vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z) * u_r, 1.0);
|
||||
|
||||
// 圆柱光照效果
|
||||
float lightWeight = u_lightEnable > 0.0 ? calc_lighting(pos): 1.0;
|
||||
v_lightWeight = lightWeight;
|
||||
v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default class Amapdemo_extrude extends React.Component {
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [121.107846, 30.267069],
|
||||
pitch: 35.210526315789465,
|
||||
pitch: 40,
|
||||
style: 'normal',
|
||||
zoom: 8,
|
||||
animateEnable: false,
|
||||
|
|
@ -42,7 +42,7 @@ export default class Amapdemo_extrude extends React.Component {
|
|||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [1, 2, level * 2 + 20];
|
||||
return [4, 4, level * 4 + 20];
|
||||
})
|
||||
.active(true)
|
||||
.color('t', [
|
||||
|
|
@ -57,6 +57,12 @@ export default class Amapdemo_extrude extends React.Component {
|
|||
'#A1EDB8',
|
||||
'#CEF8D6',
|
||||
])
|
||||
.animate(true)
|
||||
// .animate({
|
||||
// enable: false,
|
||||
// // speed: 0.1,
|
||||
// // repeat: Infinity
|
||||
// })
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,17 +21,15 @@ export default class GaodeMapComponent extends React.Component {
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: aspaceLnglat,
|
||||
pitch: 0,
|
||||
// pitch: 0,
|
||||
pitch: 40,
|
||||
// style: 'dark',
|
||||
zoom: 17,
|
||||
}),
|
||||
});
|
||||
// normal = 'normal',
|
||||
// additive = 'additive',
|
||||
// subtractive = 'subtractive',
|
||||
// min = 'min',
|
||||
// max = 'max',
|
||||
// none = 'none',
|
||||
// cylinder circle
|
||||
// blend: 'additive'
|
||||
var circleRadius = 100;
|
||||
var radius = circleRadius;
|
||||
|
|
@ -79,7 +77,7 @@ export default class GaodeMapComponent extends React.Component {
|
|||
)
|
||||
.shape('circle')
|
||||
.color('#0f9')
|
||||
.size(circleRadius)
|
||||
.size([10, 10, 100])
|
||||
.style({
|
||||
stroke: '#f00',
|
||||
// strokeWidth: 10,
|
||||
|
|
@ -87,7 +85,12 @@ export default class GaodeMapComponent extends React.Component {
|
|||
strokeOpacity: 1,
|
||||
// unit: 'meter',
|
||||
})
|
||||
// .animate(true)
|
||||
.animate(true)
|
||||
// .animate({
|
||||
// enable: true,
|
||||
// speed: 0.02,
|
||||
// repeat: 1
|
||||
// })
|
||||
.active({ color: '#00f' });
|
||||
|
||||
this.scene = scene;
|
||||
|
|
|
|||
Loading…
Reference in New Issue