zoomin and zoomout with animation

maptalks · Jul 4, 2017 · db691f4 · db691f4
1 parent 008e0f6
commit db691f4
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 35 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -2,18 +2,22 @@
 <html>
 <head>
     <title>maptalks.markercluster demo</title>
-    <link type="text/css" rel="stylesheet" href="https://unpkg.com/maptalks@<2.0.0/dist/maptalks.css">
-    <script type="text/javascript" src="https://unpkg.com/maptalks@<2.0.0/dist/maptalks.min.js"></script>
+    <!--<link type="text/css" rel="stylesheet" href="https://unpkg.com/maptalks@<2.0.0/dist/maptalks.css">
+    <script type="text/javascript" src="https://unpkg.com/maptalks@<2.0.0/dist/maptalks.min.js"></script>-->
+    <link href="../node_modules/maptalks/dist/maptalks.css" rel="stylesheet" />
+    <script src="../node_modules/maptalks/dist/maptalks.js"></script>
     <script type="text/javascript" src="../dist/maptalks.markercluster.js"></script>
     <script type="text/javascript" src="realworld.50000.1.js"></script>
     <script type="text/javascript" src="realworld.50000.2.js"></script>
-    <style>
+    <style> 
         html,body{
             margin:0px;
+            height: 100%;
+            width: 100%;
         }
         #map {
-            width: 960px;
-            height:600px;
+            width: 100%;
+            height:100%;
         }
     </style>
 </head>
@@ -51,22 +55,18 @@
         'forceRenderOnZooming' : true,
         'maxClusterZoom' : 16,
         //"count" is an internal variable: marker count in the cluster.
-        'symbol' :{
-            'markerType' : 'ellipse',
-            'markerFill' : { property:'count', type:'interval', stops: [[0, 'rgb(135, 196, 240)'], [9, 'rgba(222, 125, 44, 1)'], [99, 'rgb(156, 38, 50)']] },
-            'markerFillOpacity' : 1,
-            'markerLineOpacity' : 1,
-            'markerLineWidth' : 3,
-            'markerLineColor' : '#fff',
-            'markerWidth'  : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] },
-            'markerHeight' : { property:'count', type:'interval', stops: [[0, 40], [9, 60], [99, 80]] }
+        'symbol': {
+            'markerType': 'ellipse',
+            'markerFill': { property: 'count', type: 'interval', stops: [[0, '#00F5FF'], [9, '#98FB98'], [99, '#EEEE00'], [300, '#FF6EB4']] },
+            'markerFillOpacity': 0.9,
+            'markerLineOpacity': 0.3,
+            'markerLineWidth': 10,
+            'markerLineColor': { property: 'count', type: 'interval', stops: [[0, '#00F5FF'], [9, '#98FB98'], [99, '#EEEE00'], [300, '#FF6EB4']] },
+            'markerWidth': { property: 'count', type: 'interval', stops: [[0, 25], [9, 30], [99, 35], [500, 40]] },
+            'markerHeight': { property: 'count', type: 'interval', stops: [[0, 25], [9, 30], [99, 35], [500, 40]] }
         },
-        'textSymbol' : {
-            'textFaceName' : 'monospace',
-            'textSize'  : 20,
-            'textFill'  : '#fff'
-        },
-        'drawClusterText' : true
+        'drawClusterText': true,
+        'single': true
     });
 
     map.addLayer(clusterLayer);

diff --git a/dist/maptalks.markercluster.js b/dist/maptalks.markercluster.js
@@ -28,7 +28,8 @@ var options = {
     'textSymbol': null,
     'animation': true,
     'animationDuration': 450,
-    'maxClusterZoom': null
+    'maxClusterZoom': null,
+    'single': true
 };
 
 var ClusterLayer = function (_maptalks$VectorLayer) {
@@ -114,6 +115,19 @@ var ClusterLayer = function (_maptalks$VectorLayer) {
         json['type'] = 'ClusterLayer';
         return json;
     };
+    /**
+     * Get the ClusterLayer's current clusters
+     * @return {Object} layer's clusters
+     **/
+
+
+    ClusterLayer.prototype.getClusters = function getClusters() {
+        var renderer$$1 = this._getRenderer();
+        if (renderer$$1) {
+            return renderer$$1._currentClusters || [];
+        }
+        return [];
+    };
 
     return ClusterLayer;
 }(maptalks.VectorLayer);
@@ -126,7 +140,7 @@ ClusterLayer.registerJSONType('ClusterLayer');
 
 var defaultTextSymbol = {
     'textFaceName': '"microsoft yahei"',
-    'textSize': 16,
+    'textSize': 12,
     'textDx': 0,
     'textDy': 0
 };
@@ -200,7 +214,7 @@ ClusterLayer.registerRenderer('canvas', function (_maptalks$renderer$Ve) {
             font = void 0;
         for (var p in zoomClusters) {
             this._currentGrid = zoomClusters[p];
-            if (zoomClusters[p]['count'] === 1) {
+            if (zoomClusters[p]['count'] === 1 && this.layer.options['single']) {
                 var marker = zoomClusters[p]['children'][0];
                 marker._cluster = zoomClusters[p];
                 this._markersToDraw.push(marker);
@@ -307,11 +321,20 @@ ClusterLayer.registerRenderer('canvas', function (_maptalks$renderer$Ve) {
     _class.prototype._drawLayer = function _drawLayer(clusters) {
         var _this4 = this;
 
-        this._currentClusters = clusters;
+        //this._currentClusters = clusters;
+        this._currentClusters = this.layer._currentClusters = clusters;
         delete this._clusterMaskExtent;
         var layer = this.layer;
-        if (layer.options['animation'] && this._animated && this._inout === 'out') {
-            this._player = maptalks.animation.Animation.animate({ 'd': [0, 1] }, { 'speed': layer.options['animationDuration'], 'easing': 'inAndOut' }, function (frame) {
+        var dr = [0, 1];
+        //if (layer.options['animation'] && this._animated && this._inout === 'out') {
+        if (layer.options['animation'] && this._animated && this._inout) {
+            if (this._inout === 'in') {
+                dr = [1, 0];
+                clusters = this._zoomInClusters;
+            } else if (this._inout === 'out') {
+                dr = [0, 1];
+            }
+            this._player = maptalks.animation.Animation.animate({ 'd': dr }, { 'speed': layer.options['animationDuration'], 'easing': 'inAndOut' }, function (frame) {
                 if (frame.state.playState === 'finished') {
                     _this4._animated = false;
                     _this4._drawMarkers();
@@ -321,7 +344,7 @@ ClusterLayer.registerRenderer('canvas', function (_maptalks$renderer$Ve) {
                     _this4.setCanvasUpdated();
                 }
             }).play();
-            this._drawClusters(clusters, 0);
+            this._drawClusters(clusters, dr[0]);
             this.setCanvasUpdated();
         } else {
             this._animated = false;
@@ -582,8 +605,19 @@ ClusterLayer.registerRenderer('canvas', function (_maptalks$renderer$Ve) {
     };
 
     _class.prototype.onZoomEnd = function onZoomEnd() {
+        var zoom = this.getMap().getZoom();
         this._animated = true;
         this._computeGrid();
+        if (this._inout === 'in') {
+            if (!this._clusterCache[zoom + 1]) {
+                this._clusterCache[zoom + 1] = this._computeZoomGrid(zoom + 1);
+            }
+            var tempCluster = this._clusterCache[zoom + 1].clusters;
+            this._zoomInClusters = [];
+            for (var p in tempCluster) {
+                this._zoomInClusters.push(tempCluster[p]);
+            }
+        }
         _maptalks$renderer$Ve.prototype.onZoomEnd.apply(this, arguments);
     };