feat(scene): 按需进行渲染刷新

src/core/engine/index.js

@@ -31,7 +31,6 @@ export default class Engine extends EventEmitter {
 
   }
   run() {
-
     this.update();
     this.engineID = requestAnimationFrame(this.run.bind(this));
   }

src/core/layer.js

@@ -112,6 +112,8 @@ export default class Layer extends Base {
     if (type === 'fill') {
       this._addPickMesh(object);// 不对边界线进行拾取
     }
+    this.scene._engine.update();
+    setTimeout(() => this.scene._engine.update(), 500);
   }
   remove(object) {
     if (object.type === 'composer') {

src/core/scene.js

@@ -19,11 +19,12 @@ export default class Scene extends Base {
     this.addImage();
     this.fontAtlasManager = new FontAtlasManager();
     this._layers = [];
+    this.animateCount = 0;
   }
 
   _initEngine(mapContainer) {
     this._engine = new Engine(mapContainer, this);
-    this._engine.run();
+    this.registerMapEvent();
     // this.workerPool = new WorkerPool();
     compileBuiltinModules();
   }
@@ -40,8 +41,8 @@ export default class Scene extends Base {
     this._container = document.getElementById(Map.container);
     // const Map = new MapProvider(this.mapContainer, this._attrs);
     Map.on('mapLoad', () => {
-      this._initEngine(Map.renderDom);
       this.map = Map.map;
+      this._initEngine(Map.renderDom);
       Map.asyncCamera(this._engine);
       this.initLayer();
       this._registEvents();
@@ -117,5 +118,31 @@ export default class Scene extends Base {
     layer.destroy();
     layer = null;
   }
+  startAnimate() {
+    if (this.animateCount === 0) {
+      this.unRegsterMapEvent();
+      this._engine.run();
+    }
+    this.animateCount++;
+  }
+  stopAnimate() {
+    if (this.animateCount === 1) {
+      this._engine.stop();
+      this.registerMapEvent();
+    }
+    this.animateCount++;
+  }
+  // 地图状态变化时更新可视化渲染
+  registerMapEvent() {
+    this._updateRender = () => this._engine.update();
+    this.map.on('mousemove', this._updateRender);
+    this.map.on('mapmove', this._updateRender);
+    this.map.on('camerachange', this._updateRender);
+  }
+  unRegsterMapEvent() {
+    this.map.off('mousemove', this._updateRender);
+    this.map.off('mapmove', this._updateRender);
+    this.map.off('camerachange', this._updateRender);
+  }
 
 }

src/geom/shader/text_vert2.glsl

@@ -19,10 +19,11 @@ void main(){
   mat4 matModelViewProjection=projectionMatrix*modelViewMatrix;
   vec4 cur_position=matModelViewProjection*vec4(a_position.xy,0,1);
   gl_Position=cur_position / cur_position.w+ vec4(a_textSize*position.xy/u_glSize, 0., 0.)+vec4(a_textOffset/u_glSize * 2.0,0,0);
-  v_color=vec4(a_color.rgb,a_color.a*u_opacity);
+  // v_color=vec4(a_color.rgb,a_color.a*u_opacity);
-  if(pickingId == u_activeId) {
+  // if(pickingId == u_activeId) {
-     v_color = u_activeColor;
+  //    v_color = u_activeColor;
-   }
+  //  }
+  v_color = a_color;
   v_texcoord=(textUv.xy + vec2(uv.x,1.-uv.y) * textUv.zw)/u_textTextureSize;
   worldId = id_toPickColor(pickingId);
   

src/layer/lineLayer.js

@@ -61,6 +61,7 @@ export default class LineLayer extends Layer {
         if (animateOptions.enable) {
 
           material.setDefinesvalue('ANIMATE', true);
+          this.scene.startAnimate();
           const { duration, interval, trailLength, repeat = Infinity } = animateOptions;
           this.animateDuration = this.scene._engine.clock.getElapsedTime() + duration * repeat;
           material.upDateUninform({
@@ -92,6 +93,7 @@ export default class LineLayer extends Layer {
       });
       if (animateOptions.enable) {
         material.setDefinesvalue('ANIMATE', true);
+        this.scene.startAnimate();
       }
 
       const mesh = new THREE.LineSegments(geometry, material);
@@ -99,10 +101,11 @@ export default class LineLayer extends Layer {
     }
     return this;
   }
-  _preRender() {
+  preRender() {
     if (this.animateDuration > 0 && this.animateDuration < this.scene._engine.clock.getElapsedTime()) {
       this.layerMesh.material.setDefinesvalue('ANIMATE', false);
       this.emit('animateEnd');
+      this.scene.stopAnimate();
       this.animateDuration = Infinity;
     }
   }

src/layer/polygonLayer.js

@@ -44,6 +44,7 @@ export default class PolygonLayer extends Layer {
       return drawPolygon.DrawLine(attributes, style);
     } else if (animateOptions.enable) {
       const { near, far } = this.map.getCameraState();
+      this.scene.startAnimate();
       return drawPolygon.DrawAnimate(attributes, { ...style, near, far });
     }
     return drawPolygon.DrawFill(attributes, config);