From a1c9e0ca52723f8b960e7171e4f8d707f67f5f06 Mon Sep 17 00:00:00 2001 From: lang Date: Wed, 21 Oct 2015 15:54:11 +0800 Subject: [PATCH] Map fix --- src/action/geoRoam.js | 24 ++++++++++++++++++---- src/chart/map/MapSeries.js | 4 ++-- src/chart/map/MapView.js | 10 +++++++-- src/chart/map/mapDataStatistic.js | 2 +- src/component/dataRange/dataRangeAction.js | 3 ++- src/component/helper/MapDraw.js | 3 +-- src/coord/geo/geoCreator.js | 22 +++++++++++++++----- src/preprocessor/backwardCompat.js | 6 +++--- test/map.html | 22 +++++++++++++++++--- test/mapWorld.html | 6 +++--- 10 files changed, 76 insertions(+), 26 deletions(-) diff --git a/src/action/geoRoam.js b/src/action/geoRoam.js index eca691e15..688118bde 100644 --- a/src/action/geoRoam.js +++ b/src/action/geoRoam.js @@ -19,6 +19,14 @@ define(function (require) { */ echarts.registerAction(actionInfo, function (payload, ecModel) { var componentType = payload.component || 'series'; + + function syncRoamOfAllMapSeries(mapType, panX, panY, zoom) { + ecModel.eachSeriesByTypeAll('map', function (seriesModel) { + seriesModel.setRoamPan(panX, panY); + seriesModel.setRoamZoom(zoom); + }); + } + ecModel.eachComponent(componentType, function (componentModel) { if (componentModel.name === payload.name) { var dx = payload.dx; @@ -32,6 +40,7 @@ define(function (require) { var roamDetailModel = componentModel.getModel('roamDetail'); var panX = roamDetailModel.get('x') || 0; var panY = roamDetailModel.get('y') || 0; + var previousZoom = roamDetailModel.get('zoom') || 1; if (dx != null && dy != null) { // FIXME Must divide mapScale ? @@ -44,9 +53,7 @@ define(function (require) { geo && geo.setPan(panX, panY); } - if (zoom != null && componentModel.setRoamZoom) { - var previousZoom = roamDetailModel.get('zoom') || 1; - + if (zoom != null) { var fixX = (payload.originX - panX) * (zoom - 1); var fixY = (payload.originY - panY) * (zoom - 1); @@ -54,12 +61,21 @@ define(function (require) { panY -= fixY; geo && geo.setPan(panX, panY); + componentModel.setRoamPan && componentModel.setRoamPan(panX, panY); geo && geo.setZoom(zoom * previousZoom); - componentModel.setRoamZoom(zoom * previousZoom); + componentModel.setRoamZoom + && componentModel.setRoamZoom(zoom * previousZoom); + } + // All map series with same `map` use the same geo coordinate system + // So the roamDetail must be in sync. Include the series not selected by legend + if (componentType === 'series') { + syncRoamOfAllMapSeries( + componentModel.get('map'), panX, panY, (zoom || 1) * previousZoom + ); } } }); diff --git a/src/chart/map/MapSeries.js b/src/chart/map/MapSeries.js index 1116829f3..c1e64671b 100644 --- a/src/chart/map/MapSeries.js +++ b/src/chart/map/MapSeries.js @@ -62,8 +62,8 @@ define(function (require) { // 二级层叠 z: 2, coordinateSystem: 'geo', - // 各省的mapType暂时都用中文 - mapType: 'china', + // 各省的 map 暂时都用中文 + map: 'china', mapLocation: { // 'center' | 'left' | 'right' | 'x%' | {number} x: 'center', diff --git a/src/chart/map/MapView.js b/src/chart/map/MapView.js index a0c45a212..b3008eafd 100644 --- a/src/chart/map/MapView.js +++ b/src/chart/map/MapView.js @@ -21,8 +21,14 @@ define(function (require) { group.add(mapDraw.group); - mapModel.needsDrawMap && - mapDraw.draw(mapModel, ecModel, api); + if (mapModel.needsDrawMap) { + mapModel.needsDrawMap + mapDraw.draw(mapModel, ecModel, api); + } + else { + // Remove drawed map + mapDraw.group.removeAll(); + } mapModel.get('showLegendSymbol') && ecModel.getComponent('legend') && this._renderSymbols(mapModel, ecModel, api); diff --git a/src/chart/map/mapDataStatistic.js b/src/chart/map/mapDataStatistic.js index e5252ddea..62f91ed10 100644 --- a/src/chart/map/mapDataStatistic.js +++ b/src/chart/map/mapDataStatistic.js @@ -41,7 +41,7 @@ define(function (require) { return function (ecModel) { var seriesGroupByMapType = {}; ecModel.eachSeriesByType('map', function (seriesModel) { - var mapType = seriesModel.get('mapType'); + var mapType = seriesModel.get('map'); seriesGroupByMapType[mapType] = seriesGroupByMapType[mapType] || []; seriesGroupByMapType[mapType].push(seriesModel); }); diff --git a/src/component/dataRange/dataRangeAction.js b/src/component/dataRange/dataRangeAction.js index 143befa4f..cfc8b3f29 100644 --- a/src/component/dataRange/dataRangeAction.js +++ b/src/component/dataRange/dataRangeAction.js @@ -10,7 +10,8 @@ define(function(require) { var actionInfo = { type: 'selectDataRange', event: 'dataRangeSelected', - update: 'updateView' + // FIXME use updateView appears wrong + update: 'update' }; echarts.registerAction(actionInfo, function (payload, ecModel) { diff --git a/src/component/helper/MapDraw.js b/src/component/helper/MapDraw.js index 0c3d025ef..748452c89 100644 --- a/src/component/helper/MapDraw.js +++ b/src/component/helper/MapDraw.js @@ -132,8 +132,7 @@ define(function (require) { }); controller.rect = geo.getViewBox(); - }, - + } } return MapDraw; diff --git a/src/coord/geo/geoCreator.js b/src/coord/geo/geoCreator.js index df673e8c1..256cc00c4 100644 --- a/src/coord/geo/geoCreator.js +++ b/src/coord/geo/geoCreator.js @@ -5,6 +5,7 @@ define(function (require) { var Geo = require('./Geo'); var numberUtil = require('../../util/number'); + var zrUtil = require('zrender/core/util'); var mapDataStores = {}; @@ -113,22 +114,33 @@ define(function (require) { }); // If has map series - // PENDING Create new geo component dynamically + var mapModelGroupBySeries = {}; + ecModel.eachSeriesByType('map', function (seriesModel) { - var mapType = seriesModel.get('mapType'); + var mapType = seriesModel.get('map'); + + mapModelGroupBySeries[mapType] = mapModelGroupBySeries[mapType] || []; + + mapModelGroupBySeries[mapType].push(seriesModel); + }); + + zrUtil.each(mapModelGroupBySeries, function (mapSeries, mapType) { var geoJson = mapDataStores[mapType]; if (!geoJson) { // Warning } - var geo = new Geo(seriesModel.name, geoJson); + + var geo = new Geo(mapType, geoJson); geoList.push(geo); // Inject resize method geo.resize = resizeGeo; - geo.resize(seriesModel, api); + geo.resize(mapSeries[0], api); - seriesModel.coordinateSystem = geo; + zrUtil.each(mapSeries, function (singleMapSeries) { + singleMapSeries.coordinateSystem = geo; + }); }); return geoList; diff --git a/src/preprocessor/backwardCompat.js b/src/preprocessor/backwardCompat.js index c70007091..8f84333ae 100644 --- a/src/preprocessor/backwardCompat.js +++ b/src/preprocessor/backwardCompat.js @@ -40,9 +40,6 @@ define(function (require) { } } - function compatMapSeries(opt) { - } - return function (option) { zrUtil.each(option.series, function (seriesOpt) { compatItemStyle(seriesOpt); @@ -52,6 +49,9 @@ define(function (require) { compatItemStyle(data[i]); } } + if (seriesOpt.type === 'map') { + seriesOpt.map = seriesOpt.mapType || seriesOpt.map; + } }); } }); \ No newline at end of file diff --git a/test/map.html b/test/map.html index 4b4cad6ac..4106fa774 100644 --- a/test/map.html +++ b/test/map.html @@ -9,6 +9,7 @@ html, body, #main { width: 100%; height: 100%; + margin: 0; }
@@ -35,13 +36,13 @@ var itemStyle = { normal:{ - label:{show:true} + borderColor: 'rgba(0, 0, 0, 0.2)' }, emphasis:{ - label:{show:true}, shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, + borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } @@ -69,9 +70,14 @@ { name: 'iphone3', type: 'map', - mapType: 'china', + map: 'china', roam: false, itemStyle: itemStyle, + label: { + normal: { + show: true + } + }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, @@ -114,6 +120,11 @@ type: 'map', mapType: 'china', itemStyle: itemStyle, + label: { + normal: { + show: true + } + }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, @@ -141,6 +152,11 @@ type: 'map', mapType: 'china', itemStyle: itemStyle, + label: { + normal: { + show: true + } + }, data:[ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math.random()*1000)}, diff --git a/test/mapWorld.html b/test/mapWorld.html index 5fd11bc59..96287ceed 100644 --- a/test/mapWorld.html +++ b/test/mapWorld.html @@ -9,6 +9,7 @@ html, body, #main { width: 100%; height: 100%; + margin: 0; }
@@ -34,8 +35,7 @@ var itemStyle = { normal:{ borderWidth: 0.5, - borderColor: 'black', - label:{show:true} + borderColor: 'black' }, emphasis:{ label:{show:true}, @@ -75,7 +75,7 @@ { name: 'World Population (2010)', type: 'map', - mapType: 'world', + map: 'world', mapLocation: { y : 60, width: '80%' -- GitLab