You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/03/27 09:34:02 UTC
[incubator-echarts] 01/01: fix(map): map animation when zoom and
center change. fix #11947
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 <zw...@gmail.com>
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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org