From ef14099e4eb171e61e5d2e043a85aa3cbd0358c6 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 20 Sep 2019 16:44:21 +0800
Subject: [PATCH] fix(map): map path changed from geo coord to screen coord;
 fix #11055 (#11272)

* WIP(map): map path changed from geo coord to screen position

* WIP(map): works expect clicking map data

* test(map): add test for #11055

* fix(map): use for-loop instead of zrUtil.map

* test(map): test fill pattern in map

* test(map): update test with mousewheel
---
 src/component/helper/MapDraw.js    |  48 ++++++------
 test/geoScatter.html               | 114 ++++++++++++++---------------
 test/runTest/actions/__meta__.json |   2 +-
 test/runTest/actions/map.json      |   2 +-
 4 files changed, 84 insertions(+), 82 deletions(-)

diff --git a/src/component/helper/MapDraw.js b/src/component/helper/MapDraw.js
index 5f4d5d736f..163d3626a5 100644
--- a/src/component/helper/MapDraw.js
+++ b/src/component/helper/MapDraw.js
@@ -25,7 +25,7 @@ import * as graphic from '../../util/graphic';
 import geoSourceManager from '../../coord/geo/geoSourceManager';
 import {getUID} from '../../util/component';
 
-function getFixedItemStyle(model, scale) {
+function getFixedItemStyle(model) {
     var itemStyle = model.getItemStyle();
     var areaColor = model.get('areaColor');
 
@@ -181,20 +181,14 @@ MapDraw.prototype = {
         var regionsGroup = this._regionsGroup;
         var group = this.group;
 
-        var scale = geo.scale;
-        var transform = {
-            position: geo.position,
-            scale: scale
-        };
-
-        // No animation when first draw or in action
-        if (!regionsGroup.childAt(0) || payload) {
-            group.attr(transform);
-        }
-        else {
-            graphic.updateProps(group, transform, mapOrGeoModel);
+        if (geo._roamTransformable.transform) {
+            group.transform = geo._roamTransformable.transform.slice();
+            group.decomposeTransform();
         }
 
+        var scale = geo._rawTransformable.scale;
+        var position = geo._rawTransformable.position;
+
         regionsGroup.removeAll();
 
         var itemStyleAccessPath = ['itemStyle'];
@@ -204,7 +198,6 @@ MapDraw.prototype = {
         var nameMap = zrUtil.createHashMap();
 
         zrUtil.each(geo.regions, function (region) {
-
             // Consider in GeoJson properties.name may be duplicated, for example,
             // there is multiple region named "United Kindom" or "France" (so many
             // colonies). And it is not appropriate to merge them in geo, which
@@ -225,8 +218,8 @@ MapDraw.prototype = {
 
             var itemStyleModel = regionModel.getModel(itemStyleAccessPath);
             var hoverItemStyleModel = regionModel.getModel(hoverItemStyleAccessPath);
-            var itemStyle = getFixedItemStyle(itemStyleModel, scale);
-            var hoverItemStyle = getFixedItemStyle(hoverItemStyleModel, scale);
+            var itemStyle = getFixedItemStyle(itemStyleModel);
+            var hoverItemStyle = getFixedItemStyle(hoverItemStyleModel);
 
             var labelModel = regionModel.getModel(labelAccessPath);
             var hoverLabelModel = regionModel.getModel(hoverLabelAccessPath);
@@ -245,22 +238,34 @@ MapDraw.prototype = {
                 }
             }
 
+            var transformPoint = function (point) {
+                return [
+                    point[0] * scale[0] + position[0],
+                    point[1] * scale[1] + position[1]
+                ];
+            };
+
             zrUtil.each(region.geometries, function (geometry) {
                 if (geometry.type !== 'polygon') {
                     return;
                 }
+                var exterior = [];
+                for (var i = 0; i < geometry.exterior.length; ++i) {
+                    exterior.push(transformPoint(geometry.exterior[i]));
+                }
                 compoundPath.shape.paths.push(new graphic.Polygon({
                     segmentIgnoreThreshold: 1,
                     shape: {
-                        points: geometry.exterior
+                        points: exterior
                     }
                 }));
 
                 for (var i = 0; i < (geometry.interiors ? geometry.interiors.length : 0); i++) {
+                    var interiors = transformPoint(geometry.interiors[i]);
                     compoundPath.shape.paths.push(new graphic.Polygon({
                         segmentIgnoreThreshold: 1,
                         shape: {
-                            points: geometry.interiors[i]
+                            points: interiors
                         }
                     }));
                 }
@@ -269,6 +274,7 @@ MapDraw.prototype = {
             compoundPath.setStyle(itemStyle);
             compoundPath.style.strokeNoScale = true;
             compoundPath.culling = true;
+
             // Label
             var showLabel = labelModel.get('show');
             var hoverShowLabel = hoverLabelModel.get('show');
@@ -292,12 +298,12 @@ MapDraw.prototype = {
                 }
 
                 var textEl = new graphic.Text({
-                    position: region.center.slice(),
+                    position: transformPoint(region.center.slice()),
                     // FIXME
                     // label rotation is not support yet in geo or regions of series-map
                     // that has no data. The rotation will be effected by this `scale`.
                     // So needed to change to RectText?
-                    scale: [1 / scale[0], 1 / scale[1]],
+                    scale: [1 / group.scale[0], 1 / group.scale[1]],
                     z2: 10,
                     silent: true
                 });
@@ -433,4 +439,4 @@ MapDraw.prototype = {
     }
 };
 
-export default MapDraw;
\ No newline at end of file
+export default MapDraw;
diff --git a/test/geoScatter.html b/test/geoScatter.html
index f42b3637fb..36f9990e29 100644
--- a/test/geoScatter.html
+++ b/test/geoScatter.html
@@ -33,7 +33,7 @@
                 margin: 0;
             }
         </style>
-        新疆 should be yellow
+        新疆 should be yellow. The pattern in the right geo should not be blurred.
         <div id="main"></div>
         <script>
 
@@ -273,71 +273,67 @@
                         });
                     }
 
-                    chart.setOption({
-                        legend: {
-                            data: ['scatter', 'scatter2']
-                        },
-                        geo: [{
-                            map: 'china',
-                            roam: true,
-                            left: 100,
-                            width: 300,
-                            // zoom: 1.5,
-                            scaleLimit: {
-                                min: 1.5,
-                                max: 2
+                    var pattern = new Image();
+                    pattern.onload = function () {
+                        chart.setOption({
+                            legend: {
+                                data: ['scatter', 'scatter2']
                             },
-                            regions: [{
-                                name: '新疆',
-                                label: {
-                                    normal: {
-                                        formatter: 'asdf',
-                                        show: true,
-                                        offset: [100, 200]
-                                    }
+                            geo: [{
+                                map: 'china',
+                                roam: true,
+                                left: 100,
+                                width: 300,
+                                // zoom: 1.5,
+                                scaleLimit: {
+                                    min: 1.5,
+                                    max: 2
                                 },
+                                regions: [{
+                                    name: '新疆',
+                                    label: {
+                                        normal: {
+                                            formatter: 'asdf',
+                                            show: true,
+                                            offset: [100, 200]
+                                        }
+                                    },
+                                    itemStyle: {
+                                        normal: {
+                                            areaColor: 'yellow'
+                                        }
+                                    }
+                                }]
+                            }, {
+                                map: 'china',
+                                roam: true,
+                                selectedMode: 'single',
+                                left: null,
+                                right: 100,
+                                width: 300,
                                 itemStyle: {
-                                    normal: {
-                                        areaColor: 'yellow'
+                                    repeat: 'repeat',
+                                    areaColor: {
+                                        image: pattern,
+                                        repeat: 'repeat'
                                     }
                                 }
-                            }]
-                        }, {
-                            map: 'china',
-                            roam: true,
-                            selectedMode: 'single',
-                            left: null,
-                            right: 100,
-                            width: 300
-                        }],
-                        tooltip: {
-                            trigger: 'axis',
-                            axisPointer: {
-                                type: 'cross'
-                            }
-                        },
-                        series: [{
-                            coordinateSystem: 'geo',
-                            name: 'scatter',
-                            type: 'scatter',
-                            symbolSize: function (val) {
-                                return val[2] * 20;
-                            },
-                            data: data
-                        }, {
-                            coordinateSystem: 'geo',
-                            name: 'scatter2',
-                            type: 'scatter',
-                            symbolSize: function (val) {
-                                return val[2] * 20;
+                            }],
+                            tooltip: {
+                                trigger: 'axis',
+                                axisPointer: {
+                                    type: 'cross'
+                                }
                             },
-                            data: data2
-                        }]
-                    });
+                            series: []
+                        });
 
-                    chart.on('click', function (param) {
-                        console.log(param);
-                    });
+                        chart.on('click', function (param) {
+                            console.log(param);
+                        });
+                    };
+
+                    pattern.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAQlBMVEX////y8vL19fXS0dLy8fHi4uLc3Nz5+fnx8fHw8PDp6enr6+v39/fa2trl5OXb29v7+vrv7+/19PT08/P09PTX19dlapQUAAAClElEQVR4Xu3cuWrEMBiF0dizT/bt/V81vxuZFGkUBOJydCqDuGBCCAyT78EBgCTHOh/taTnVWdrj66FO313D/7i8/rV83pb77hrOeT0/kK/2dN2Wr+3xeVvuu2u48/Ja52l/utdZ2+PLuU7H3c5hwwAAADiXOm/701Ln0h7fH+v03TXceflY57M93U51bu3x+1Cn767h/ss+lN2HffxueMLfU8PT/Yk0DAAAAPN8O8zwtF/MNOxD2d/DPn43POW/vxgGAAAAZqF1onVi2OtpnQQNa50YBgAAAEkSrRPDWidaJ4a1TgYMa50YBgAAAEkSrRPDWidaJzHDWieGAQAAABCfEZ8xHPt64jMaMeIzhgEAAEAjRnzGsPiM+Ixh8ZkBw+IzhgEAAEAjRnzGsPiM+EzAsPiMYQAAAGASWidaJ4a9ntZJ0LDWiWEAAACQJNE6Max1onViWOtkwLDWiWEAAACQJNE6Max1onUSM6x1YhgAAAAA8RnxGcOxryc+oxEjPmMYAAAANGLEZwyLz4jPGBafGTAsPmMYAAAANGLEZwyLz4jPBAyLzxgGAAAAJqF1onVi2OtpnQQNa50YBgAAAEkSrRPDWidaJ4a1TgYMa50YBgAAAEkSrRPDWidaJzHDWieGAQAAABCfEZ8xHPt64jMaMeIzhgEAAEAjRnzGsPiM+Ixh8ZkBw+IzhgEAAEAjRnzGsPiM+EzAsPiMYQAAAGASWidaJ4a9ntZJ0LDWiWEAAACQJNE6Max1onViWOtkwLDWiWEAAACQJNE6Max1onUSM6x1YhgAAAAA8RnxGcOxryc+oxEjPmMYAAAANGLEZwyLz4jPGBafGTAsPmMYAAAANGLEZwyLz4jPBAyLzxgGAGLOD2dJsYoNf2AgAAAAAElFTkSuQmCC';
                 });
             });
 
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index b4e3080a2d..e53309d9f9 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -11,7 +11,7 @@
   "axis-multiple": 1,
   "axis-style": 2,
   "map-parallel": 1,
-  "map": 2,
+  "map": 3,
   "treemap-disk": 2,
   "axis": 1,
   "axisPosition": 2,
diff --git a/test/runTest/actions/map.json b/test/runTest/actions/map.json
index c5b5aba8e9..9026afaed4 100644
--- a/test/runTest/actions/map.json
+++ b/test/runTest/actions/map.json
@@ -1 +1 @@
-[{"name":"Action 1","ops":[{"type":"mousemove","time":159,"x":215,"y":416},{"type":"mousemove","time":366,"x":236,"y":377},{"type":"screenshot","time":1033}],"scrollY":0,"scrollX":0,"timestamp":1568093856396},{"name":"Action 2","ops":[{"type":"mousedown","time":303,"x":50,"y":56},{"type":"mouseup","time":400,"x":50,"y":56},{"time":401,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1022,"x":50,"y":57},{"type":"mousemove","time":1223,"x":52,"y":77},{"type":"mousedown","time":1280,"x":52,"y":77},{"type":"mouseup","time":1381,"x":52,"y":77},{"time":1382,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2147,"x":52,"y":77},{"type":"mouseup","time":2230,"x":52,"y":77},{"time":2231,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2347,"x":52,"y":77},{"type":"mousemove","time":2559,"x":56,"y":58},{"type":"mousemove","time":2772,"x":56,"y":52},{"type":"mousedown","time":3057,"x":56,"y":52},{"type":"mouseup","time":3130,"x":56,"y":52},{"time":3131,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568042466696}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousemove","time":159,"x":215,"y":416},{"type":"mousemove","time":366,"x":236,"y":377},{"type":"screenshot","time":1033}],"scrollY":0,"scrollX":0,"timestamp":1568093856396},{"name":"Action 2","ops":[{"type":"mousedown","time":303,"x":50,"y":56},{"type":"mouseup","time":400,"x":50,"y":56},{"time":401,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1022,"x":50,"y":57},{"type":"mousemove","time":1223,"x":52,"y":77},{"type":"mousedown","time":1280,"x":52,"y":77},{"type":"mouseup","time":1381,"x":52,"y":77},{"time":1382,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2147,"x":52,"y":77},{"type":"mouseup","time":2230,"x":52,"y":77},{"time":2231,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2347,"x":52,"y":77},{"type":"mousemove","time":2559,"x":56,"y":58},{"type":"mousemove","time":2772,"x":56,"y":52},{"type":"mousedown","time":3057,"x":56,"y":52},{"type":"mouseup","time":3130,"x":56,"y":52},{"time":3131,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568042466696},{"name":"Action 3","ops":[{"type":"mousemove","time":180,"x":556,"y":444},{"type":"mousemove","time":380,"x":664,"y":448},{"type":"mousemove","time":699,"x":664,"y":446},{"type":"mousemove","time":901,"x":658,"y":383},{"type":"mousedown","time":928,"x":658,"y":383},{"type":"mouseup","time":1033,"x":658,"y":383},{"time":1034,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1148,"x":655,"y":383},{"type":"mousemove","time":1377,"x":568,"y":376},{"type":"mousewheel","time":1415,"x":568,"y":376,"deltaY":-4.000244140625},{"type":"mousewheel","time":1476,"x":568,"y":376,"deltaY":-30.675048828125},{"type":"mousewheel","time":1531,"x":568,"y":376,"deltaY":-104.664306640625},{"type":"mousewheel","time":1591,"x":568,"y":376,"deltaY":-121.54052734375},{"type":"mousewheel","time":2248,"x":568,"y":376,"deltaY":-4.000244140625},{"type":"mousewheel","time":2291,"x":568,"y":376,"deltaY":-36.8389892578125},{"type":"mousewheel","time":2334,"x":568,"y":376,"deltaY":-135.4681396484375},{"type":"mousewheel","time":2929,"x":568,"y":376,"deltaY":4.000244140625},{"type":"mousewheel","time":2973,"x":568,"y":376,"deltaY":40.0079345703125},{"type":"mousewheel","time":3025,"x":568,"y":376,"deltaY":151.536865234375},{"type":"mousewheel","time":3046,"x":568,"y":376,"deltaY":210.93994140625},{"type":"mousewheel","time":3088,"x":568,"y":376,"deltaY":229.385986328125},{"type":"mousewheel","time":3169,"x":568,"y":376,"deltaY":222.47314453125},{"type":"mousewheel","time":3457,"x":568,"y":376,"deltaY":4.000244140625},{"type":"mousewheel","time":3521,"x":568,"y":376,"deltaY":22.108154296875},{"type":"mousewheel","time":3611,"x":568,"y":376,"deltaY":49.1888427734375},{"type":"mousewheel","time":3831,"x":568,"y":376,"deltaY":4.000244140625},{"type":"mousewheel","time":4047,"x":568,"y":376,"deltaY":4.000244140625},{"type":"mousewheel","time":4094,"x":568,"y":376,"deltaY":36.810302734375},{"type":"mousewheel","time":4118,"x":568,"y":376,"deltaY":143.3795166015625},{"type":"mousewheel","time":4170,"x":568,"y":376,"deltaY":189.090576171875},{"type":"mousewheel","time":4569,"x":568,"y":376,"deltaY":4.000244140625},{"type":"mousewheel","time":4603,"x":568,"y":376,"deltaY":33.7579345703125},{"type":"mousewheel","time":4648,"x":568,"y":376,"deltaY":135.52490234375},{"type":"mousemove","time":4855,"x":567,"y":376},{"type":"mousemove","time":5064,"x":470,"y":357},{"type":"mousedown","time":5268,"x":446,"y":335},{"type":"mousemove","time":5297,"x":446,"y":335},{"type":"mousemove","time":5503,"x":612,"y":362},{"type":"mousemove","time":5702,"x":705,"y":387},{"type":"mouseup","time":5860,"x":706,"y":387},{"time":5861,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5926,"x":683,"y":389},{"type":"mousemove","time":6126,"x":486,"y":384},{"type":"mousemove","time":6349,"x":470,"y":358},{"type":"mousedown","time":6524,"x":469,"y":351},{"type":"mousemove","time":6573,"x":469,"y":351},{"type":"mouseup","time":6635,"x":469,"y":351},{"time":6636,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6938,"x":469,"y":350},{"type":"mousemove","time":7150,"x":401,"y":292},{"type":"mousemove","time":7353,"x":368,"y":261},{"type":"mousemove","time":7561,"x":329,"y":233},{"type":"mousemove","time":7761,"x":325,"y":232},{"type":"mousedown","time":7775,"x":325,"y":232},{"type":"mousemove","time":7979,"x":416,"y":256},{"type":"mousemove","time":8190,"x":587,"y":319},{"type":"mouseup","time":8357,"x":594,"y":322},{"time":8358,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8406,"x":594,"y":322},{"type":"mousemove","time":8484,"x":593,"y":323},{"type":"mousemove","time":8689,"x":553,"y":332},{"type":"mousemove","time":8893,"x":459,"y":455},{"type":"mousemove","time":9097,"x":591,"y":371},{"type":"mousemove","time":9341,"x":620,"y":293}],"scrollY":0,"scrollX":0,"timestamp":1568968723049}]
\ No newline at end of file