From aaba3c521ef9e3a02df5d9b7538a0d7a124d58ea Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 21 Aug 2019 16:59:27 +0800 Subject: [PATCH] fix(text): shader defines --- demos/vector2.html | 17 ++++++++++++----- src/component/popup.js | 9 ++++++--- src/core/scene.js | 3 +++ src/geom/material/textMaterial.js | 3 ++- src/geom/shader/meshline_frag.glsl | 7 ++++--- src/geom/shader/text_frag.glsl | 7 ++----- src/global.js | 3 ++- 7 files changed, 31 insertions(+), 18 deletions(-) diff --git a/demos/vector2.html b/demos/vector2.html index 45db086525..69e0647023 100644 --- a/demos/vector2.html +++ b/demos/vector2.html @@ -38,18 +38,18 @@ const scene = new L7.Scene({ // 高德数据服务 https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=608d75903d29ad471362f8c58c550daf scene.on('loaded', () => { - const attributeCtr = new L7.Control.Attribution(); - attributeCtr.addTo(scene); scene.addTileSource('test',{ url:' https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=608d75903d29ad471362f8c58c550daf', type:'vector', minZoom: 0, maxZoom:9 + }) const layer = scene.PolygonLayer({ zIndex:0, + attribution:'高德地图' }) .source('test',{ parser:{ @@ -66,13 +66,20 @@ scene.on('loaded', () => { opacity:1.0 }) .render(); + let id =0; + layer.on('click',(e) => { const { lnglat, feature } = e; - const popup = new L7.Popup() + console.log(lnglat); + const popup = new L7.Popup({ + id:id++ + }) .setLnglat([lnglat.lng, lnglat.lat]) - .setHTML(feature.properties.NAME_CHN.toString()).addTo(scene); + .setText(feature.properties.NAME_CHN.toString()).addTo(scene); }) - +scene.on('click',(e)=>{ + console.log(e); +}) const layer2 = scene.LineLayer({ zIndex:10, }) diff --git a/src/component/popup.js b/src/component/popup.js index d88c1457e4..1de80ff6f4 100644 --- a/src/component/popup.js +++ b/src/component/popup.js @@ -11,15 +11,18 @@ export default class Popup extends Base { anchor: 'bottom', ...cfg }); + bindAll([ '_update', '_onClickClose', 'remove' ], this); } addTo(scene) { this._scene = scene; - if (this.get('closeOnClick')) { - this._scene.on('click', this._onClickClose); - } this._scene.on('camerachange', this._update); this._update(); + if (this.get('closeOnClick')) { + setTimeout(() => { // TODO 事件冲突 + this._scene.on('click', this._onClickClose); + }, 30); + } } setLnglat(lngLat) { this.lngLat = lngLat; diff --git a/src/core/scene.js b/src/core/scene.js index 4bb6039989..0b04128292 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -41,6 +41,9 @@ export default class Scene extends Base { if (this.get('scaleControl')) { new Control.Scale().addTo(this); } + if (this.get('attributionControl')) { + new Control.Attribution().addTo(this); + } } // 为pickup场景添加 object 对象 addPickMesh(object) { diff --git a/src/geom/material/textMaterial.js b/src/geom/material/textMaterial.js index 267ee808bd..2387d4099d 100644 --- a/src/geom/material/textMaterial.js +++ b/src/geom/material/textMaterial.js @@ -6,7 +6,8 @@ export default function TextMaterial(_uniforms) { const { vs, fs, uniforms } = getModule('text'); const material = new Material({ defines: { - DEVICE_PIXEL_RATIO: window.devicePixelRatio + SDF_PX: '8.0', + EDGE_GAMMA: 0.105 / window.devicePixelRatio }, uniforms: wrapUniforms(merge(uniforms, _uniforms)), vertexShader: vs, diff --git a/src/geom/shader/meshline_frag.glsl b/src/geom/shader/meshline_frag.glsl index 6f166df631..c5fd5565ca 100644 --- a/src/geom/shader/meshline_frag.glsl +++ b/src/geom/shader/meshline_frag.glsl @@ -42,14 +42,15 @@ void main() { #endif #ifdef DASHLINE - float time = 0; + float time = 0.; #ifdef ANIMATE - time =u_time; + time = u_time / 1000. ; #endif - gl_FragColor.a *= u_opacity * ceil(mod(v_distance_ratio + u_dash_offset + time / 10., v_dash_array) - (v_dash_array * u_dash_ratio)); + gl_FragColor.a *= u_opacity * ceil(mod(v_distance_ratio + u_dash_offset + time, v_dash_array) - (v_dash_array * u_dash_ratio)); #else gl_FragColor.a *= u_opacity; #endif + #ifdef ANIMATE float alpha =1.0 - fract( mod(1.0- v_distance_ratio,u_interval)* (1.0/u_interval) + u_time / u_duration); alpha = (alpha + u_trailLength -1.0) / u_trailLength; diff --git a/src/geom/shader/text_frag.glsl b/src/geom/shader/text_frag.glsl index 35c284c2c5..58b50b4152 100644 --- a/src/geom/shader/text_frag.glsl +++ b/src/geom/shader/text_frag.glsl @@ -1,6 +1,3 @@ -#define SDF_PX 8.0 -#define EDGE_GAMMA 0.205 / float(DEVICE_PIXEL_RATIO) - uniform sampler2D u_sdf_map; uniform float u_gamma_scale : 0.5; uniform float u_font_size : 24; @@ -15,7 +12,7 @@ varying float v_gamma_scale; void main() { // get sdf from atlas - float dist = texture2D(u_sdf_map, v_uv).w; + float dist = texture2D(u_sdf_map, v_uv).a; float fontScale = u_font_size / 24.0; @@ -28,4 +25,4 @@ void main() { gl_FragColor = mix(v_color * u_font_opacity, u_halo_color, smoothstep(0., .5, 1. - dist)) * alpha; #pragma include "pick" -} +} \ No newline at end of file diff --git a/src/global.js b/src/global.js index 7161b52d5b..90bc9b840a 100644 --- a/src/global.js +++ b/src/global.js @@ -16,7 +16,8 @@ const Global = { pitch: 0, hash: false, zoomControl: true, - scaleControl: true + scaleControl: true, + attributionControl: true }, animate: true, height: 0,