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:
YiQianYao 2021-12-23 19:20:28 +08:00 committed by GitHub
parent 725d2f8fa2
commit 139a034709
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 127 additions and 15 deletions

View File

@ -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() {

View File

@ -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;

View File

@ -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) {

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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);

View File

@ -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);
});
}

View File

@ -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(() => {

View File

@ -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);
// });