This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new ef14099 fix(map): map path changed from geo coord to screen coord;
fix #11055 (#11272)
ef14099 is described below
commit ef14099e4eb171e61e5d2e043a85aa3cbd0358c6
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Fri Sep 20 16:44:21 2019 +0800
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 5f4d5d7..163d362 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 f42b363..36f9990 100644
--- a/test/geoScatter.html
+++ b/test/geoScatter.html
@@ -33,7 +33,7 @@ under the License.
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 @@ under the License.
});
}
- 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/vxgGAAAAZqF1onVi2OtpnQQNa50
[...]
});
});
diff --git a/test/runTest/actions/__meta__.json
b/test/runTest/actions/__meta__.json
index b4e3080..e53309d 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 c5b5aba..9026afa 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","ti
[...]
\ 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","ti
[...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
