From 69ff3093793ebdfa22051d38ededcaeb6db20285 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 9 Sep 2019 15:25:10 +0800 Subject: [PATCH] =?UTF-8?q?fix=20pointlayer=20image=20shape=20event=20fix?= =?UTF-8?q?=20#30=20fix=202d=20=E5=9B=BE=E5=BD=A2,=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E7=9A=84APi=20strokeColor=20->=20stroke?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demos/01_circle.html | 2 +- demos/01_point_circle.html | 2 +- demos/06_text.html | 2 +- demos/point.html | 2 +- demos/pointImage.html | 55 ++++++++++++++++++++++++++++ demos/text.html | 2 +- package.json | 2 +- src/core/controller/event.js | 1 - src/core/layer.js | 2 +- src/geom/shader/circle_frag.glsl | 12 +++--- src/geom/shader/line_frag.glsl | 2 +- src/geom/shader/point_frag.glsl | 2 + src/geom/shader/text_frag.glsl | 4 +- src/layer/render/point/drawCircle.js | 6 +-- src/layer/render/text/drawText.js | 6 +-- 15 files changed, 79 insertions(+), 23 deletions(-) create mode 100644 demos/pointImage.html diff --git a/demos/01_circle.html b/demos/01_circle.html index 3236c5aa79..7301f999ef 100644 --- a/demos/01_circle.html +++ b/demos/01_circle.html @@ -65,7 +65,7 @@ textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] spacing: 2, // 字符间距 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - strokeColor: 'white', // 描边颜色 + stroke: 'white', // 描边颜色 strokeWidth: 1, // 描边宽度 opacity: 1.0 }) diff --git a/demos/01_point_circle.html b/demos/01_point_circle.html index dd49aafa4c..62f8e26010 100644 --- a/demos/01_point_circle.html +++ b/demos/01_point_circle.html @@ -85,7 +85,7 @@ scene.on('loaded', () => { textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] spacing: 2, // 字符间距 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - strokeColor: 'white', // 描边颜色 + stroke: 'white', // 描边颜色 strokeWidth: 1, // 描边宽度 opacity: 1.0 }) diff --git a/demos/06_text.html b/demos/06_text.html index 074a8f1d4a..d97ec184cc 100644 --- a/demos/06_text.html +++ b/demos/06_text.html @@ -60,7 +60,7 @@ scene.on('loaded', () => { textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] spacing: 2, // 字符间距 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - strokeColor: 'white', // 描边颜色 + stroke: 'white', // 描边颜色 strokeWidth: 2, // 描边宽度 opacity: 1.0 }) diff --git a/demos/point.html b/demos/point.html index c6e4e37bfb..e5fee90c62 100644 --- a/demos/point.html +++ b/demos/point.html @@ -71,7 +71,7 @@ textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] spacing: 2, // 字符间距 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - strokeColor: '#fff', // 描边颜色 + stroke: '#fff', // 描边颜色 strokeWidth: 4, // 描边宽度 opacity: 1.0 }) diff --git a/demos/pointImage.html b/demos/pointImage.html new file mode 100644 index 0000000000..94868110ca --- /dev/null +++ b/demos/pointImage.html @@ -0,0 +1,55 @@ + + + + + + 气泡图 + + + +
+ + + + + + + + diff --git a/demos/text.html b/demos/text.html index c0541ef7e3..8dd55ee83a 100644 --- a/demos/text.html +++ b/demos/text.html @@ -72,7 +72,7 @@ scene.on('loaded', () => { textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] spacing: 2, // 字符间距 padding: [ 4, 4 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - strokeColor: 'white', // 描边颜色 + stroke: 'white', // 描边颜色 strokeWidth: 1, // 描边宽度 opacity: 1.0 }) diff --git a/package.json b/package.json index 5739cec597..0b12b2ad36 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "1.3.3-beta.3", + "version": "1.3.4", "description": "Large-scale WebGL-powered Geospatial Data Visualization", "main": "build/L7.js", "homepage": "https://github.com/antvis/l7", diff --git a/src/core/controller/event.js b/src/core/controller/event.js index b36339eb1a..5a6a858e7f 100644 --- a/src/core/controller/event.js +++ b/src/core/controller/event.js @@ -8,7 +8,6 @@ export default class EventContoller { } _init() { this.layer.scene.on('pick-' + this.layer.layerId, e => { - let { featureId, point2d, type } = e; if (type === 'click') { return; diff --git a/src/core/layer.js b/src/core/layer.js index 99b18beb18..6b739d20bd 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -211,7 +211,7 @@ export default class Layer extends Base { } style(field, cfg) { - const colorItem = [ 'fill', 'stroke', 'color', 'baseColor', 'brightColor', 'windowColor' ]; + const colorItem = [ 'fill', 'stroke', 'strokeColor', 'color', 'baseColor', 'brightColor', 'windowColor' ]; let styleOptions = this.get('styleOptions'); if (!styleOptions) { styleOptions = {}; diff --git a/src/geom/shader/circle_frag.glsl b/src/geom/shader/circle_frag.glsl index f2ff28b35e..a615a21f04 100644 --- a/src/geom/shader/circle_frag.glsl +++ b/src/geom/shader/circle_frag.glsl @@ -1,8 +1,8 @@ uniform float u_blur : 0; uniform float u_opacity : 1; -uniform float u_stroke_width : 1; -uniform vec4 u_stroke_color : [1, 1, 1, 1]; -uniform float u_stroke_opacity : 1; +uniform float u_strokeWidth : 1; +uniform vec4 u_stroke : [1, 1, 1, 1]; +uniform float u_strokeOpacity : 1; varying vec4 v_data; varying vec4 v_color; @@ -16,7 +16,7 @@ void main() { 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 + u_strokeWidth); float outer_df; float inner_df; @@ -52,12 +52,12 @@ void main() { float opacity_t = smoothstep(0.0, antialiased_blur, outer_df); - float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep( + float color_t = u_strokeWidth < 0.01 ? 0.0 : smoothstep( antialiased_blur, 0.0, inner_df ); - gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity * v_color.a, color_t); + gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke * u_strokeOpacity * v_color.a, color_t); #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/line_frag.glsl b/src/geom/shader/line_frag.glsl index 9d7b1a04d1..d29bab960e 100644 --- a/src/geom/shader/line_frag.glsl +++ b/src/geom/shader/line_frag.glsl @@ -11,5 +11,5 @@ color.a= color.a * vTime * 1.5; #endif gl_FragColor = color; - #pragma include "pick" + #pragma include "pick" } \ No newline at end of file diff --git a/src/geom/shader/point_frag.glsl b/src/geom/shader/point_frag.glsl index fdf2201ff7..0ac85dfa2f 100644 --- a/src/geom/shader/point_frag.glsl +++ b/src/geom/shader/point_frag.glsl @@ -24,6 +24,7 @@ void main(){ pos.y=1.-pos.y; vec4 textureColor=texture2D(u_texture,pos); gl_FragColor=textureColor; + #pragma include "pick" return; #endif if(v_color.a==0.) @@ -70,6 +71,7 @@ void main(){ }else{ gl_FragColor=pcolor; } + #pragma include "pick" } diff --git a/src/geom/shader/text_frag.glsl b/src/geom/shader/text_frag.glsl index abe10582cd..f5aa14b763 100644 --- a/src/geom/shader/text_frag.glsl +++ b/src/geom/shader/text_frag.glsl @@ -2,7 +2,7 @@ uniform sampler2D u_sdf_map; uniform float u_gamma_scale : 0.5; uniform float u_font_size : 24; uniform float u_opacity : 1.0; -uniform vec4 u_strokeColor : [0, 0, 0, 1]; +uniform vec4 u_stroke : [0, 0, 0, 1]; uniform float u_strokeWidth : 2.0; uniform float u_halo_blur : 0.5; @@ -23,6 +23,6 @@ void main() { highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist); - gl_FragColor = mix(v_color * u_opacity, u_strokeColor, smoothstep(0., 0.5, 1. - dist)) * alpha; + gl_FragColor = mix(v_color * u_opacity, u_stroke, smoothstep(0., 0.5, 1. - dist)) * alpha; #pragma include "pick" } \ No newline at end of file diff --git a/src/layer/render/point/drawCircle.js b/src/layer/render/point/drawCircle.js index 6fcd27979d..1e60c08d6e 100644 --- a/src/layer/render/point/drawCircle.js +++ b/src/layer/render/point/drawCircle.js @@ -34,9 +34,9 @@ export default function drawCircle(layerData, layer, buffer) { u_opacity: style.opacity, u_activeColor: activeOption.fill, u_zoom: layer.scene.getZoom(), - u_stroke_color: style.stroke, - u_stroke_width: style.strokeWidth, - u_stroke_opacity: style.strokeOpacity + u_stroke: style.stroke, + u_strokeWidth: style.strokeWidth, + u_strokeOpacity: style.strokeOpacity }); material.depthTest = false; material.setBending(style.blending); diff --git a/src/layer/render/text/drawText.js b/src/layer/render/text/drawText.js index 234013cb04..05283d5e4d 100644 --- a/src/layer/render/text/drawText.js +++ b/src/layer/render/text/drawText.js @@ -9,7 +9,7 @@ const defaultTextStyle = { textOffset: [ 0, 0 ], spacing: 2, padding: [ 4, 4 ], - strokeColor: 'white', + stroke: 'white', strokeWidth: 2, strokeOpacity: 1.0 }; @@ -20,7 +20,7 @@ export default function DrawText(layerData, layer) { }; layer.set('styleOptions', style); const activeOption = layer.get('activedOptions'); - const { strokeWidth, strokeColor, opacity } = style; + const { strokeWidth, stroke, opacity } = style; const { width, height } = layer.scene.getSize(); const { geometry, texture, fontAtlas } = _updateGeometry(layerData, layer); @@ -34,7 +34,7 @@ export default function DrawText(layerData, layer) { const material = new TextMaterial({ name: layer.layerId, u_sdf_map: texture, - u_strokeColor: ColorUtil.toRGB(strokeColor).map(e => e / 255), + u_stroke: ColorUtil.toRGB(stroke).map(e => e / 255), u_strokeWidth: strokeWidth, u_halo_blur: 0.5, u_opacity: opacity,