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;
}
- 新疆 should be yellow
+ 新疆 should be yellow. The pattern in the right geo should not be blurred.