Map use center and zoom to locate

src/action/geoRoam.js

@@ -4,11 +4,6 @@ define(function (require) {
     var roamHelper = require('./roamHelper');
 
     var echarts = require('../echarts');
-    var actionInfo = {
-        type: 'geoRoam',
-        event: 'geoRoam',
-        update: 'updateLayout'
-    };
 
     /**
      * @payload
@@ -20,7 +15,11 @@ define(function (require) {
      * @property {number} [originX]
      * @property {number} [originY]
      */
-    echarts.registerAction(actionInfo, function (payload, ecModel) {
+    echarts.registerAction({
+        type: 'geoRoam',
+        event: 'geoRoam',
+        update: 'updateLayout'
+    }, function (payload, ecModel) {
         var componentType = payload.component || 'series';
 
         ecModel.eachComponent(componentType, function (componentModel) {
@@ -30,26 +29,22 @@ define(function (require) {
                     return;
                 }
 
-                var roamDetailModel = componentModel.getModel('roamDetail');
-                var res = roamHelper.calcPanAndZoom(
-                    roamDetailModel, payload, componentModel.get('scaleLimit')
+                var res = roamHelper.updateCenterAndZoom(
+                    geo, payload, componentModel.get('scaleLimit')
                 );
 
-                componentModel.setRoamPan
-                    && componentModel.setRoamPan(res.x, res.y);
-
-                componentModel.setRoamZoom
-                    && componentModel.setRoamZoom(res.zoom);
+                componentModel.setCenter
+                    && componentModel.setCenter(res.center);
 
-                geo && geo.setPan(res.x, res.y);
-                geo && geo.setZoom(res.zoom);
+                componentModel.setZoom
+                    && componentModel.setZoom(res.zoom);
 
                 // All map series with same `map` use the same geo coordinate system
-                // So the roamDetail must be in sync. Include the series not selected by legend
+                // So the center and zoom must be in sync. Include the series not selected by legend
                 if (componentType === 'series') {
                     zrUtil.each(componentModel.seriesGroup, function (seriesModel) {
-                        seriesModel.setRoamPan(res.x, res.y);
-                        seriesModel.setRoamZoom(res.zoom);
+                        seriesModel.setCenter(res.center);
+                        seriesModel.setZoom(res.zoom);
                     });
                 }
             }

src/action/roamHelper.js

@@ -3,26 +3,25 @@ define(function (require) {
     var roamHelper = {};
 
     /**
-     * Calculate pan and zoom which from roamDetail model
-     * @param {module:echarts/model/Model} roamDetailModel
+     * @param {module:echarts/coord/View} view
      * @param {Object} payload
      * @param {Object} [zoomLimit]
      */
-    roamHelper.calcPanAndZoom = function (
-        roamDetailModel, payload, zoomLimit
+    roamHelper.updateCenterAndZoom = function (
+        view, payload, zoomLimit
     ) {
-        var dx = payload.dx;
-        var dy = payload.dy;
+        var previousZoom = view.getZoom();
+        var center = view.getCenter();
         var zoom = payload.zoom;
 
-        var panX = roamDetailModel.get('x') || 0;
-        var panY = roamDetailModel.get('y') || 0;
+        var point = view.dataToPoint(center);
 
-        var previousZoom = roamDetailModel.get('zoom') || 1;
+        if (payload.dx != null && payload.dy != null) {
+            point[0] -= payload.dx;
+            point[1] -= payload.dy;
 
-        if (dx != null && dy != null) {
-            panX += dx;
-            panY += dy;
+            var center = view.pointToData(point);
+            view.setCenter(center);
         }
         if (zoom != null) {
             if (zoomLimit) {
@@ -31,17 +30,26 @@ define(function (require) {
                     zoomLimit.min
                 ) / previousZoom;
             }
-            var fixX = (payload.originX - panX) * (zoom - 1);
-            var fixY = (payload.originY - panY) * (zoom - 1);
-
-            panX -= fixX;
-            panY -= fixY;
+            // var roamTransform = view.getRoamTransform();
+            view.scale[0] *= zoom;
+            view.scale[1] *= zoom;
+            var position = view.position;
+            var fixX = (payload.originX - position[0]) * (zoom - 1);
+            var fixY = (payload.originY - position[1]) * (zoom - 1);
+
+            position[0] -= fixX;
+            position[1] -= fixY;
+
+            view.updateTransform();
+            // Get the new center
+            var center = view.pointToData(point);
+            view.setCenter(center);
+            view.setZoom(zoom * previousZoom);
         }
 
         return {
-            x: panX,
-            y: panY,
-            zoom: (zoom || 1) * previousZoom
+            center: view.getCenter(),
+            zoom: view.getZoom()
         };
     };
 

src/chart/heatmap/HeatmapView.js

@@ -161,7 +161,7 @@ define(function (require) {
             hmLayer.maxOpacity = seriesModel.get('maxOpacity');
 
             var rect = geo.getViewRect().clone();
-            var roamTransform = geo.getRoamTransform();
+            var roamTransform = geo.getRoamTransform().transform;
             rect.applyTransform(roamTransform);
 
             // Clamp on viewport

src/chart/map/MapSeries.js

@@ -168,12 +168,11 @@ define(function (require) {
             // 是否开启缩放及漫游模式
             // roam: false,
 
-            // 在 roam 开启的时候使用
-            roamDetail: {
-                x: 0,
-                y: 0,
-                zoom: 1
-            },
+            // Default on center of map
+            center: null,
+
+            zoom: 1,
+
 
             scaleLimit: null,
 
@@ -204,6 +203,14 @@ define(function (require) {
                     areaColor: 'rgba(255,215, 0, 0.8)'
                 }
             }
+        },
+
+        setZoom: function (zoom) {
+            this.option.zoom = zoom;
+        },
+
+        setCenter: function (center) {
+            this.option.center = center;
         }
     });
 

src/coord/View.js

@@ -36,6 +36,9 @@ define(function (require) {
         this._roamTransform = new TransformDummy();
 
         this._viewTransform = new TransformDummy();
+
+        this._center;
+        this._zoom;
     }
 
     View.prototype = {
@@ -104,37 +107,82 @@ define(function (require) {
         },
 
         /**
-         * @param {number} x
-         * @param {number} y
+         * Set center of view
+         * @param {Array.<number>} [centerCoord]
          */
-        setPan: function (x, y) {
-
-            this._roamTransform.position = [x, y];
+        setCenter: function (centerCoord) {
+            if (!centerCoord) {
+                return;
+            }
+            this._center = centerCoord;
 
-            this._updateTransform();
+            this._updateCenterAndZoom();
         },
 
         /**
          * @param {number} zoom
          */
         setZoom: function (zoom) {
+            if (!zoom) {
+                return;
+            }
             var zoomLimit = this.zoomLimit;
             if (zoomLimit) {
                 zoom = Math.max(
                     Math.min(zoom, zoomLimit.max), zoomLimit.min
                 );
             }
+            this._zoom = zoom;
 
-            this._roamTransform.scale = [zoom, zoom];
+            this._updateCenterAndZoom();
+        },
 
-            this._updateTransform();
+        /**
+         * Get default center without roam
+         */
+        getDefaultCenter: function () {
+            // Rect before any transform
+            var rawRect = this.getBoundingRect();
+            var cx = rawRect.x + rawRect.width / 2;
+            var cy = rawRect.y + rawRect.height / 2;
+
+            return [cx, cy];
+        },
+
+        getCenter: function () {
+            return this._center || this.getDefaultCenter();
+        },
+
+        getZoom: function () {
+            return this._zoom || 1;
         },
 
         /**
          * @return {Array.<number}
          */
         getRoamTransform: function () {
-            return this._roamTransform.transform;
+            return this._roamTransform;
+        },
+
+        _updateCenterAndZoom: function () {
+            // Must update after view transform updated
+            var viewTransformMatrix = this._viewTransform.getLocalTransform();
+            var roamTransform = this._roamTransform;
+            var defaultCenter = this.getDefaultCenter();
+            var center = this.getCenter();
+            var zoom = this.getZoom();
+
+            center = vector.applyTransform([], center, viewTransformMatrix);
+            defaultCenter = vector.applyTransform([], defaultCenter, viewTransformMatrix);
+
+            roamTransform.origin = center;
+            roamTransform.position = [
+                defaultCenter[0] - center[0],
+                defaultCenter[1] - center[1]
+            ];
+            roamTransform.scale = [zoom, zoom];
+
+            this._updateTransform();
         },
 
         /**
@@ -144,7 +192,6 @@ define(function (require) {
         _updateTransform: function () {
             var roamTransform = this._roamTransform;
             var viewTransform = this._viewTransform;
-            // var scale = this.scale;
 
             viewTransform.parent = roamTransform;
             roamTransform.updateTransform();
@@ -153,6 +200,10 @@ define(function (require) {
             viewTransform.transform
                 && matrix.copy(this.transform || (this.transform = []), viewTransform.transform);
 
+            if (this.transform) {
+                this.invTransform = this.invTransform || [];
+                matrix.invert(this.invTransform, this.transform);
+            }
             this.decomposeTransform();
         },
 

src/coord/geo/GeoModel.js

@@ -43,12 +43,10 @@ define(function (require) {
             // Map type
             map: '',
 
-            // 在 roam 开启的时候使用
-            roamDetail: {
-                x: 0,
-                y: 0,
-                zoom: 1
-            },
+            // Default on center of map
+            center: null,
+
+            zoom: 1,
 
             scaleLimit: null,
 
@@ -100,17 +98,12 @@ define(function (require) {
             }
         },
 
-        setRoamZoom: function (zoom) {
-            var roamDetail = this.option.roamDetail;
-            roamDetail && (roamDetail.zoom = zoom);
+        setZoom: function (zoom) {
+            this.option.zoom = zoom;
         },
 
-        setRoamPan: function (x, y) {
-            var roamDetail = this.option.roamDetail;
-            if (roamDetail) {
-                roamDetail.x = x;
-                roamDetail.y = y;
-            }
+        setCenter: function (center) {
+            this.option.center = center;
         }
     });
 });
\ No newline at end of file

src/coord/geo/geoCreator.js

@@ -28,14 +28,8 @@ define(function (require) {
 
         this.setViewRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
 
-        var roamDetailModel = geoModel.getModel('roamDetail');
-
-        var panX = roamDetailModel.get('x') || 0;
-        var panY = roamDetailModel.get('y') || 0;
-        var zoom = roamDetailModel.get('zoom') || 1;
-
-        this.setPan(panX, panY);
-        this.setZoom(zoom);
+        this.setCenter(geoModel.get('center'));
+        this.setZoom(geoModel.get('zoom'));
     }
 
     /**