Map fix

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
+                    );
                 }
             }
         });

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',

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);

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);
         });

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) {

src/component/helper/MapDraw.js

@@ -132,8 +132,7 @@ define(function (require) {
                 });
 
             controller.rect = geo.getViewBox();
-        },
-
+        }
     }
 
     return MapDraw;

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;

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

test/map.html

@@ -9,6 +9,7 @@
             html, body, #main {
                 width: 100%;
                 height: 100%;
+                margin: 0;
             }
         </style>
         <div id="main"></div>
@@ -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)},

test/mapWorld.html

@@ -9,6 +9,7 @@
             html, body, #main {
                 width: 100%;
                 height: 100%;
+                margin: 0;
             }
         </style>
         <div id="main"></div>
@@ -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%'