This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-11947 in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit a94123ea0293f14672db45c0b99ffc5817c9de75 Author: Ovilia <[email protected]> AuthorDate: Fri Mar 27 17:29:34 2020 +0800 fix(map): map animation when zoom and center change. fix #11947 This bug was introduced by 7cc5cb5b2e105fdf75033c5c6c8ef214L195 --- src/component/helper/MapDraw.js | 29 +++++++++++++++-- test/map.html | 72 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+), 3 deletions(-) diff --git a/src/component/helper/MapDraw.js b/src/component/helper/MapDraw.js index 2965167..c261a42 100644 --- a/src/component/helper/MapDraw.js +++ b/src/component/helper/MapDraw.js @@ -24,6 +24,7 @@ import {onIrrelevantElement} from '../../component/helper/cursorHelper'; import * as graphic from '../../util/graphic'; import geoSourceManager from '../../coord/geo/geoSourceManager'; import {getUID} from '../../util/component'; +import Transformable from 'zrender/src/mixin/Transformable'; function getFixedItemStyle(model) { var itemStyle = model.getItemStyle(); @@ -182,9 +183,25 @@ MapDraw.prototype = { var group = this.group; var transformInfo = geo.getTransformInfo(); - group.transform = transformInfo.roamTransform; - group.decomposeTransform(); - group.dirty(); + // No animation when first draw or in action + var isFirstDraw = !regionsGroup.childAt(0) || payload; + var targetScale; + if (isFirstDraw) { + group.transform = transformInfo.roamTransform; + group.decomposeTransform(); + group.dirty(); + } + else { + var target = new Transformable(); + target.transform = transformInfo.roamTransform; + target.decomposeTransform(); + var props = { + scale: target.scale, + position: target.position + }; + targetScale = target.scale; + graphic.updateProps(group, props, mapOrGeoModel); + } var scale = transformInfo.rawScale; var position = transformInfo.rawPosition; @@ -326,6 +343,12 @@ MapDraw.prototype = { } ); + if (!isFirstDraw) { + // Text animation + var textScale = [1 / targetScale[0], 1 / targetScale[1]]; + graphic.updateProps(textEl, { scale: textScale }, mapOrGeoModel); + } + regionGroup.add(textEl); } diff --git a/test/map.html b/test/map.html index d3e8493..b94209b 100644 --- a/test/map.html +++ b/test/map.html @@ -34,6 +34,7 @@ under the License. <div id="main0"></div> <div id="main1"></div> + <div id="main2"></div> @@ -385,5 +386,76 @@ under the License. + + + + + + + + + <script> + + require([ + 'echarts' + ], function (echarts) { + + require(['map/js/china'], function () { + var locations = [{ + name: '上海', + coord: [121.472644, 31.231706] + }, { + name: '北京', + coord: [116.405285, 39.904989] + }, { + name: '广东', + coord: [113.280637, 23.839463714285714] + }]; + option = { + tooltip: { + trigger: 'item', + formatter: '{b}' + }, + series: [ + { + name: '中国', + type: 'map', + mapType: 'china', + selectedMode : 'multiple', + label: { + show: true + } + } + ] + }; + var myChart = testHelper.create(echarts, 'main2', { + option: option, + height: 550, + title: ['Animation when changing map zoom and center'] + }); + var currentLoc = 0; + setInterval(function () { + myChart.setOption({ + series: [{ + center: locations[currentLoc].coord, + zoom: 4, + data: [ + {name: locations[currentLoc].name, selected: true} + ], + animationDurationUpdate: 1000, + animationEasingUpdate: 'cubicInOut' + }] + }); + currentLoc = (currentLoc + 1) % locations.length; + }, 2000); + + }); + + }); + + </script> + + + </body> </html> \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
