add Tween

build/version.js

@@ -1 +1 @@
-export var version = "2.0.2";
+export var version = "2.0.3";

examples/baidu-map-forceEdgeBundling.html

@@ -257,9 +257,12 @@
             size: 1.5,
             animation: {
                 type: 'time',
-                steps: 100,
+                stepsRange: {
+                    start: 0,
+                    end: 100
+                },
                 trails: 1,
-                duration: 5
+                duration: 5,
             },
             draw: 'simple'
         }

examples/baidu-map-point-heatmap-time.html

@@ -72,7 +72,7 @@
                     end: 100
                 },
                 trails: 10,
-                duration: 5,
+                duration: 4,
             },
             draw: 'heatmap'
         }

examples/baidu-map-polyline-time.html

@@ -184,9 +184,13 @@
 
             rs = rs.split("\n");
             console.log(rs.length);
+            var maxLength = 0;
             for (var i = 0; i < rs.length; i++) {
                 var item = rs[i].split(',');
                 var coordinates = [];
+                if (item.length > maxLength) {
+                    maxLength = item.length;
+                }
                 for (j = 0; j < item.length; j += 2) {
                     coordinates.push([item[j], item[j + 1]]);
                     timeData.push({
@@ -202,8 +206,7 @@
                     geometry: {
                         type: 'LineString',
                         coordinates: coordinates
-                    },
-                    count: 30 * Math.random()
+                    }
                 });
 
             }
@@ -233,9 +236,9 @@
                 animation: {
                     stepsRange: {
                         start: 0,
-                        end: 100
+                        end: 100 
                     },
-                    trails: 1,
+                    trails: 3,
                     duration: 5,
                 },
                 draw: 'simple'

examples/qianxi.html

@@ -366,7 +366,7 @@
                         end: 50
                     },
                     trails: 10,
-                    duration: 3,
+                    duration: 2,
                 },
                 draw: 'simple'
             }

nodeCanvasExamples/showLineCsvData.js

@@ -4,7 +4,7 @@ var fs = require("fs");
 var width = 1300;
 var height = 800;
 var center = [121.489723, 31.248408];
-var zoom = 10;
+var zoom = 8;
 //var center = [118.489723, 31.248408];
 
 var Canvas = require('canvas')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapv",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "a library of geography visualization",
   "main": "build/mapv.js",
   "scripts": {
@@ -36,5 +36,6 @@
     "rollup": "^0.25.8",
     "rollup-plugin-babel": "^2.4.0",
     "uglify-js": "^2.6.2"
-  }
+  },
+  "dependencies": {}
 }

src/canvas/draw/heatmap.js

@@ -119,12 +119,12 @@ function draw(context, dataSet, options) {
     var data = dataSet.get();
 
     context.save();
-    console.time('drawGray')
+    //console.time('drawGray')
     drawGray(context, data, options);
-    console.timeEnd('drawGray');
+    //console.timeEnd('drawGray');
     // return false;
     if (!options.absolute) {
-        console.time('changeColor');
+        //console.time('changeColor');
         var colored = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
         colorize(colored.data, utilsColorPalette.getImageData({
             defaultGradient: options.gradient || { 
@@ -134,7 +134,7 @@ function draw(context, dataSet, options) {
                 1.0: "rgba(255, 0, 0, 1)"
             }
         }), options);
-        console.timeEnd('changeColor');
+        //console.timeEnd('changeColor');
         context.putImageData(colored, 0, 0);
 
         context.restore();

src/map/baidu-map/Layer.js

@@ -15,8 +15,18 @@ import Intensity from "../../utils/data-range/Intensity";
 import Category from "../../utils/data-range/Category";
 import Choropleth from "../../utils/data-range/Choropleth";
 import Animator from "../../utils/animation/Animator";
+import TWEEN from "../../utils/animation/Tween";
 import pathSimple from "../../canvas/path/simple";
 
+if (typeof window !== 'undefined') {
+    requestAnimationFrame(animate);
+}
+
+function animate(time) {
+    requestAnimationFrame(animate);
+    TWEEN.update(time);
+}
+
 function Layer(map, dataSet, options) {
     if (!(dataSet instanceof DataSet)) {
         dataSet = new DataSet(dataSet);
@@ -28,11 +38,11 @@ function Layer(map, dataSet, options) {
     var data = null;
     options = options || {};
 
+    self.map = map;
+
     self.init(options);
     self.argCheck(options);
 
-    self.map = map;
-
     var canvasLayer = this.canvasLayer = new CanvasLayer({
         map: map,
         paneName: options.paneName,
@@ -90,6 +100,7 @@ Layer.prototype._canvasUpdate = function(time) {
 
     if (self.isEnabledTime()) {
         if (time === undefined) {
+            clear(context);
             return;
         }
         context.save();
@@ -287,30 +298,41 @@ Layer.prototype.init = function(options) {
     var animationOptions = self.options.animation;
 
     if (self.options.draw == 'time' || self.isEnabledTime()) {
-        if (!self.animator) {
-            self.animator = new Animator(function(time) {
-                self._canvasUpdate(time);
-            }, {
-                steps: animationOptions.steps || 100,
-                stepsRange: animationOptions.stepsRange || 100,
-                animationDuration: animationOptions.duration || 10
-            });
+        //if (!self.animator) {
+            if (!animationOptions.stepsRange) {
+                animationOptions.stepsRange = {
+                    start: this.dataSet.getMin('time') || 0,
+                    end: this.dataSet.getMax('time') || 0
+                }
+            }
+
+            var steps = { step: animationOptions.stepsRange.start };
+            self.animator = new TWEEN.Tween(steps)
+                .onUpdate(function() {
+                    self._canvasUpdate(this.step);
+                })
+                .repeat(Infinity);
 
-            map.addEventListener('movestart', function() {
+            self.map.addEventListener('movestart', function() {
                 if (self.isEnabledTime() && self.animator) {
-                    self.animator.pause();
+                    self.animator.stop();
                 }
             });
 
-            map.addEventListener('moveend', function() {
+            self.map.addEventListener('moveend', function() {
                 if (self.isEnabledTime() && self.animator) {
                     self.animator.start();
                 }
             });
-        }
+        //}
+
+        var duration = animationOptions.duration * 1000 || 5000;
+
+        self.animator.to({ step: animationOptions.stepsRange.end }, duration);
         self.animator.start();
+
     } else {
-        self.animator && self.animator.pause();
+        self.animator && self.animator.stop();
     }
 }
 

src/map/baidu-map/Layer.md

@@ -269,5 +269,8 @@ dataSet中添加字段
 ### mapvLayer.update({
     options: {} // 修改配置
 }); 
+### mapvLayer.setOptions({
+    size: 1
+}); // 重新设置配置
 ### mapvLayer.show(); // 显示图层
 ### mapvLayer.hide(); // 删除图层