mirror of https://gitee.com/antv-l7/antv-l7
Shihuidev (#896)
* 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 * feat: 优化点图层 icon 在小尺寸下的锯齿问题 * style: lint style * feat: 修复 layer destroy 报错、未清理、未重绘、补充触发 destroy 事件 * fix: 修复 marker 在 cluster getMakers 失效 * style: lint style * feat: 清除 marker layer cluster fix * style: lint style * fix: 修复 markerLayer hide show 方法缺少 cluster 模式下的控制 * style: lint style
This commit is contained in:
parent
725d2f8fa2
commit
139a034709
|
@ -106,6 +106,10 @@ export default class MarkerLayer extends EventEmitter {
|
|||
this.markers.map((m) => {
|
||||
m.getElement().style.opacity = '0';
|
||||
});
|
||||
|
||||
this.clusterMarkers.map((m) => {
|
||||
m.getElement().style.opacity = '0';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -115,6 +119,10 @@ export default class MarkerLayer extends EventEmitter {
|
|||
this.markers.map((m) => {
|
||||
m.getElement().style.opacity = '1';
|
||||
});
|
||||
|
||||
this.clusterMarkers.map((m) => {
|
||||
m.getElement().style.opacity = '1';
|
||||
});
|
||||
}
|
||||
|
||||
public getMarkers() {
|
||||
|
|
|
@ -392,6 +392,7 @@ export interface ILayerService {
|
|||
getRenderList(): ILayer[];
|
||||
getLayer(id: string): ILayer | undefined;
|
||||
getLayerByName(name: string): ILayer | undefined;
|
||||
cleanRemove(layer: ILayer, parentLayer?: ILayer): void;
|
||||
remove(layer: ILayer, parentLayer?: ILayer): void;
|
||||
removeAllLayers(): void;
|
||||
updateLayerRenderList(): void;
|
||||
|
|
|
@ -73,6 +73,23 @@ export default class LayerService implements ILayerService {
|
|||
return this.layers.find((layer) => layer.name === name);
|
||||
}
|
||||
|
||||
public cleanRemove(layer: ILayer, parentLayer?: ILayer) {
|
||||
// Tip: layer.layerChildren 当 layer 存在子图层的情况
|
||||
if (parentLayer) {
|
||||
const layerIndex = parentLayer.layerChildren.indexOf(layer);
|
||||
if (layerIndex > -1) {
|
||||
parentLayer.layerChildren.splice(layerIndex, 1);
|
||||
}
|
||||
} else {
|
||||
const layerIndex = this.layers.indexOf(layer);
|
||||
if (layerIndex > -1) {
|
||||
this.layers.splice(layerIndex, 1);
|
||||
}
|
||||
}
|
||||
this.updateLayerRenderList();
|
||||
this.renderLayers();
|
||||
}
|
||||
|
||||
public remove(layer: ILayer, parentLayer?: ILayer): void {
|
||||
// Tip: layer.layerChildren 当 layer 存在子图层的情况
|
||||
if (parentLayer) {
|
||||
|
|
|
@ -793,16 +793,22 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
|
||||
// TODO: 清除各个图层自定义的 models 资源
|
||||
this.layerModel?.clearModels();
|
||||
// @ts-ignore
|
||||
this.encodedData = null;
|
||||
|
||||
this.models = [];
|
||||
|
||||
this.layerService.cleanRemove(this);
|
||||
|
||||
this.emit('remove', {
|
||||
target: this,
|
||||
type: 'remove',
|
||||
});
|
||||
|
||||
this.removeAllListeners();
|
||||
this.emit('destroy', {
|
||||
target: this,
|
||||
type: 'destroy',
|
||||
});
|
||||
|
||||
this.removeAllListeners();
|
||||
// 解绑图层容器中的服务
|
||||
// this.container.unbind(TYPES.IStyleAttributeService);
|
||||
}
|
||||
|
|
|
@ -8,16 +8,56 @@ uniform float u_opacity : 1;
|
|||
varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
|
||||
|
||||
#pragma include "picking"
|
||||
|
||||
void main(){
|
||||
float opacity = styleMappingMat[0][0];
|
||||
vec2 pos= v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;
|
||||
vec4 textureColor=texture2D(u_texture,pos);
|
||||
float size = styleMappingMat[1][0];
|
||||
vec2 pos = v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;
|
||||
vec4 textureColor;
|
||||
|
||||
// Y = 0.299R + 0.587G + 0.114B // 亮度提取
|
||||
if(size < 13.0) { // 尺寸过小时使用 bloom 卷积模糊采样
|
||||
float h = 1.0/ 512.0;
|
||||
vec4 color11 = texture2D( u_texture, vec2( pos.x - 1.0 * h, pos.y + 1.0 * h) );
|
||||
vec4 color12 = texture2D( u_texture, vec2( pos.x - 0.0 * h, pos.y + 1.0 * h) );
|
||||
vec4 color13 = texture2D( u_texture, vec2( pos.x + 1.0 * h, pos.y + 1.0 * h) );
|
||||
|
||||
vec4 color21 = texture2D( u_texture, vec2( pos.x - 1.0 * h, pos.y) );
|
||||
vec4 color22 = texture2D( u_texture, vec2( pos.x , pos.y) );
|
||||
vec4 color23 = texture2D( u_texture, vec2( pos.x + 1.0 * h, pos.y) );
|
||||
|
||||
vec4 color31 = texture2D( u_texture, vec2( pos.x - 1.0 * h, pos.y-1.0*h) );
|
||||
vec4 color32 = texture2D( u_texture, vec2( pos.x - 0.0 * h, pos.y-1.0*h) );
|
||||
vec4 color33 = texture2D( u_texture, vec2( pos.x + 1.0 * h, pos.y-1.0*h) );
|
||||
|
||||
vec4 bloomPixels = (
|
||||
1.0*color11 +
|
||||
1.0*color12 +
|
||||
1.0*color13 +
|
||||
1.0*color21 +
|
||||
1.0*color21 +
|
||||
2.0*color22 +
|
||||
1.0*color23 +
|
||||
1.0*color31 +
|
||||
1.0*color32 +
|
||||
1.0*color33
|
||||
)/10.0;
|
||||
// luma 去除黑点
|
||||
float bloomluma = 0.299 * bloomPixels.r + 0.587 * bloomPixels.g + 0.114 * bloomPixels.b;
|
||||
// 弥补透明度
|
||||
bloomPixels.a *= bloomluma * 1.5;
|
||||
textureColor = bloomPixels;
|
||||
} else {
|
||||
textureColor = texture2D(u_texture, pos);
|
||||
}
|
||||
|
||||
|
||||
if(all(lessThan(v_color, vec4(1.0+0.00001))) && all(greaterThan(v_color, vec4(1.0-0.00001))) || v_color==vec4(1.0)){
|
||||
gl_FragColor= textureColor;
|
||||
}else {
|
||||
gl_FragColor= step(0.01, textureColor.z) * v_color;
|
||||
}
|
||||
// gl_FragColor.a =gl_FragColor.a * u_opacity;
|
||||
gl_FragColor.a =gl_FragColor.a * opacity;
|
||||
|
||||
gl_FragColor.a = gl_FragColor.a * opacity;
|
||||
gl_FragColor = filterColor(gl_FragColor);
|
||||
}
|
||||
|
|
|
@ -46,6 +46,8 @@ void main() {
|
|||
styleMappingMat[0][0] = opacityAndOffset.r;
|
||||
textureOffset = opacityAndOffset.g;
|
||||
|
||||
styleMappingMat[1][0] = a_Size;
|
||||
|
||||
vec2 textrueOffsets = vec2(0.0, 0.0);
|
||||
if(hasOffsets()) {
|
||||
vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
|
||||
|
|
|
@ -73,8 +73,9 @@ export default class Amap2demo_image extends React.Component {
|
|||
];
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
// "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*qYtMTanpMOcAAAAAAAAAAAAAARQnAQ"
|
||||
// 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
// 'https://gw.alipayobjects.com/zos/bmw-prod/a5b94b2e-f01f-4a18-aade-4b41070cff55.svg'
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*qYtMTanpMOcAAAAAAAAAAAAAARQnAQ',
|
||||
// 'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*nGW2RZ3j8c8AAAAAAAAAAAAAARQnAQ'
|
||||
// 'https://gw.alipayobjects.com/zos/bmw-prod/8eee5dbd-c3f5-4806-a9b5-5c8e90d8510c.svg'
|
||||
);
|
||||
|
@ -107,7 +108,7 @@ export default class Amap2demo_image extends React.Component {
|
|||
color: '#00f',
|
||||
mix: 0.22,
|
||||
})
|
||||
.size(20);
|
||||
.size(8);
|
||||
scene.addLayer(this.imageLayer);
|
||||
});
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ export default class Amap2demo_markerlayer extends React.Component {
|
|||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json',
|
||||
);
|
||||
const nodes = await response.json();
|
||||
const markerLayer = new MarkerLayer();
|
||||
const markerLayer = new MarkerLayer({ cluster: true });
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
|
@ -57,9 +57,37 @@ export default class Amap2demo_markerlayer extends React.Component {
|
|||
markerLayer.addMarker(marker);
|
||||
}
|
||||
scene.addMarkerLayer(markerLayer);
|
||||
// scene.on('loaded', () => {
|
||||
// markerLayer.hide()
|
||||
// })
|
||||
// console.log('markerLayer', markerLayer);
|
||||
|
||||
// console.log(markerLayer.getClusterMarker())
|
||||
// console.log('markerLayer', markerLayer.getMarkers());
|
||||
scene.on('loaded', () => {
|
||||
// markerLayer.hide()
|
||||
// console.log('markerLayer', markerLayer.getMarkers());
|
||||
// const markerList = markerLayer.getMarkers();
|
||||
// markerList.map((m) => {
|
||||
// // @ts-ignore
|
||||
// const { lngLat } = m;
|
||||
// m.setLnglat({
|
||||
// lng: lngLat.lng,
|
||||
// lat: lngLat.lat + 10,
|
||||
// });
|
||||
// });
|
||||
// // @ts-ignore
|
||||
// markerLayer.markers.map(m => {
|
||||
// // @ts-ignore
|
||||
// const { lngLat } = m;
|
||||
// console.log(m)
|
||||
// // m.setLnglat({
|
||||
// // lng: lnglat.lng,
|
||||
// // lat: +(lnglat.lat) + 10
|
||||
// // })
|
||||
// })
|
||||
// setTimeout(() => {
|
||||
// markerLayer.clear()
|
||||
// console.log('markerLayer', markerLayer.getMarkers());
|
||||
// }, 2000)
|
||||
});
|
||||
|
||||
let f = 0;
|
||||
// setInterval(() => {
|
||||
|
|
|
@ -85,7 +85,7 @@ export default class GaodeMapComponent extends React.Component {
|
|||
strokeOpacity: 1,
|
||||
// unit: 'meter',
|
||||
})
|
||||
.animate(true)
|
||||
// .animate(true)
|
||||
// .animate({
|
||||
// enable: true,
|
||||
// speed: 0.02,
|
||||
|
@ -114,6 +114,15 @@ export default class GaodeMapComponent extends React.Component {
|
|||
c = 0;
|
||||
});
|
||||
layer.on('contextmenu', () => console.log('contextmenu'));
|
||||
layer.on('destroy', (e) => console.log('destroy', e));
|
||||
layer.on('remove', (e) => {
|
||||
console.log('remove', e);
|
||||
console.log(scene.getLayers());
|
||||
});
|
||||
|
||||
// setTimeout(() => {
|
||||
// layer.destroy();
|
||||
// }, 2000);
|
||||
// layer.on('mousemove', (e) => {
|
||||
// console.log(e.feature);
|
||||
// });
|
||||
|
|
Loading…
Reference in New Issue