From df55a4b96dd7dbfdd9775770431b28fefce5339a Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Tue, 4 Jan 2022 19:06:33 +0800 Subject: [PATCH] Shihuidev (#912) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: 增加 pointLayer image mipmap 支持 --- beta.sh | 22 +-- latest.sh | 22 +-- packages/layers/src/point/models/image.ts | 3 + .../layers/src/point/shaders/image_frag.glsl | 45 ++----- stories/Map/components/amap2demo_image.tsx | 127 ++++++------------ 5 files changed, 76 insertions(+), 143 deletions(-) diff --git a/beta.sh b/beta.sh index 07cabb255c..66d13632da 100644 --- a/beta.sh +++ b/beta.sh @@ -1,11 +1,11 @@ -npm dist-tag add @antv/l7-component@2.5.45 beta -npm dist-tag add @antv/l7-core@2.5.45 beta -npm dist-tag add @antv/l7@2.5.45 beta -npm dist-tag add @antv/l7-layers@2.5.45 beta -npm dist-tag add @antv/l7-map@2.5.45 beta -npm dist-tag add @antv/l7-maps@2.5.45 beta -npm dist-tag add @antv/l7-renderer@2.5.45 beta -npm dist-tag add @antv/l7-scene@2.5.45 beta -npm dist-tag add @antv/l7-source@2.5.45 beta -npm dist-tag add @antv/l7-three@2.5.45 beta -npm dist-tag add @antv/l7-utils@2.5.45 beta +npm dist-tag add @antv/l7-component@2.6.31 beta +npm dist-tag add @antv/l7-core@2.6.31 beta +npm dist-tag add @antv/l7@2.6.31 beta +npm dist-tag add @antv/l7-layers@2.6.31 beta +npm dist-tag add @antv/l7-map@2.6.31 beta +npm dist-tag add @antv/l7-maps@2.6.31 beta +npm dist-tag add @antv/l7-renderer@2.6.31 beta +npm dist-tag add @antv/l7-scene@2.6.31 beta +npm dist-tag add @antv/l7-source@2.6.31 beta +npm dist-tag add @antv/l7-three@2.6.31 beta +npm dist-tag add @antv/l7-utils@2.6.31 beta diff --git a/latest.sh b/latest.sh index 50bb4517b0..12ad6decc7 100644 --- a/latest.sh +++ b/latest.sh @@ -1,11 +1,11 @@ -npm dist-tag add @antv/l7-component@2.6.25 latest -npm dist-tag add @antv/l7-core@2.6.25 latest -npm dist-tag add @antv/l7@2.6.25 latest -npm dist-tag add @antv/l7-layers@2.6.25 latest -npm dist-tag add @antv/l7-map@2.6.25 latest -npm dist-tag add @antv/l7-maps@2.6.25 latest -npm dist-tag add @antv/l7-renderer@2.6.25 latest -npm dist-tag add @antv/l7-scene@2.6.25 latest -npm dist-tag add @antv/l7-source@2.6.25 latest -npm dist-tag add @antv/l7-three@2.6.25 latest -npm dist-tag add @antv/l7-utils@2.6.25 latest +npm dist-tag add @antv/l7-component@2.6.31 latest +npm dist-tag add @antv/l7-core@2.6.31 latest +npm dist-tag add @antv/l7@2.6.31 latest +npm dist-tag add @antv/l7-layers@2.6.31 latest +npm dist-tag add @antv/l7-map@2.6.31 latest +npm dist-tag add @antv/l7-maps@2.6.31 latest +npm dist-tag add @antv/l7-renderer@2.6.31 latest +npm dist-tag add @antv/l7-scene@2.6.31 latest +npm dist-tag add @antv/l7-source@2.6.31 latest +npm dist-tag add @antv/l7-three@2.6.31 latest +npm dist-tag add @antv/l7-utils@2.6.31 latest diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts index 47dce98de9..afcace878c 100644 --- a/packages/layers/src/point/models/image.ts +++ b/packages/layers/src/point/models/image.ts @@ -166,6 +166,9 @@ export default class ImageModel extends BaseModel { if (this.texture) { this.texture.update({ data: this.iconService.getCanvas(), + mag: 'linear', + min: 'linear mipmap nearest', + mipmap: true, }); // this.layer.render(); // TODO: 更新完纹理后在更新的图层的时候需要更新所有的图层 diff --git a/packages/layers/src/point/shaders/image_frag.glsl b/packages/layers/src/point/shaders/image_frag.glsl index 0321b048b1..af32b9d0d2 100644 --- a/packages/layers/src/point/shaders/image_frag.glsl +++ b/packages/layers/src/point/shaders/image_frag.glsl @@ -11,47 +11,22 @@ varying mat4 styleMappingMat; // 传递从片元中传递的映射数据 void main(){ float opacity = styleMappingMat[0][0]; - float size = styleMappingMat[1][0]; + float size = max(styleMappingMat[1][0] - 2.0, 0.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); - // } + textureColor = texture2D(u_texture, pos); + + // Tip: 去除边缘部分 mipmap 导致的混合变暗 + float fragmengTocenter = distance(vec2(0.5), gl_PointCoord); + if(fragmengTocenter >= 0.5) { + float luma = 0.299 * textureColor.r + 0.587 * textureColor.g + 0.114 * textureColor.b; + textureColor.a *= luma; + } + if(all(lessThan(v_color, vec4(1.0+0.00001))) && all(greaterThan(v_color, vec4(1.0-0.00001))) || v_color==vec4(1.0)){ diff --git a/stories/Map/components/amap2demo_image.tsx b/stories/Map/components/amap2demo_image.tsx index 8f0d2bc82b..5599c2866f 100644 --- a/stories/Map/components/amap2demo_image.tsx +++ b/stories/Map/components/amap2demo_image.tsx @@ -22,94 +22,49 @@ export default class Amap2demo_image extends React.Component { }), }); this.scene = scene; - let originData = [ - { - id: '5011000000404', - name: '铁路新村(华池路)', - longitude: 121.4316962, - latitude: 31.26082325, - unit_price: 71469.4, - count: 2, - opacity: 0.5, - offsets: [0, 0], - }, - { - id: '5011000002716', - name: '金元坊', - longitude: 121.3810096, - latitude: 31.25302026, - unit_price: 47480.5, - count: 2, - opacity: 0.5, - offsets: [100, 0], - }, - { - id: '5011000003403', - name: '兰溪路231弄', - longitude: 121.4086229, - latitude: 31.25291206, - unit_price: 55218.4, - count: 2, - opacity: 0.8, - }, - { - id: '5011000003652', - name: '兰溪公寓', - longitude: 121.409227, - latitude: 31.251014, - unit_price: 55577.8, - count: 2, - opacity: 0.8, - }, - { - id: '5011000004139', - name: '梅岭新村', - longitude: 121.400946, - latitude: 31.24946565, - unit_price: 63028.1, - count: 2, - opacity: 1.0, - }, - ]; - scene.addImage( - '00', - // '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' - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg', - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg', - ); scene.on('loaded', () => { - this.imageLayer = new PointLayer() - .source(originData, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude', - }, - }) - .shape('name', ['00', '01', '02']) - // .active(true) - .active({ - color: '#00f', - mix: 0.6, - }) - // .select(true) - .select({ - color: '#00f', - mix: 0.22, - }) - .size(8); - scene.addLayer(this.imageLayer); + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', + ) + .then((res) => res.json()) + .then((data) => { + scene.addImage( + '00', + 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', + ); + scene.addImage( + '01', + 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg', + ); + scene.addImage( + '02', + 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg', + ); + + const imageLayer = new PointLayer() + .source(data, { + // .source([ + // { + // longitude: 121.434765, + // latitude: 31.256735, + // name: '' + // } + // ], { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .shape('name', ['00', '01', '02']) + .active({ + color: '#00f', + mix: 0.6, + }) + .size(20); + scene.addLayer(imageLayer); + }); }); }