fix(text): shader defines

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()
-          .setLnglat([lnglat.lng, lnglat.lat])
-          .setHTML(feature.properties.NAME_CHN.toString()).addTo(scene);
+           console.log(lnglat);
+         const popup = new L7.Popup({
+           id:id++
+         })
+          .setLnglat([lnglat.lng, lnglat.lat])
+          .setText(feature.properties.NAME_CHN.toString()).addTo(scene);
+  }) 
+scene.on('click',(e)=>{
+  console.log(e);
 })
-
  const layer2 = scene.LineLayer({
     zIndex:10,
   }) 

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;

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

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,

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;

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;
 

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,