fix(map): fix label not display on map

src/chart/map/MapView.ts

@@ -18,36 +18,22 @@
 */
 
 
-import * as zrUtil from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
 import MapDraw from '../../component/helper/MapDraw';
 import ChartView from '../../view/Chart';
 import MapSeries, { MapDataItemOption } from './MapSeries';
 import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
-import { Payload } from '../../util/types';
+import { Payload, DisplayState, ECElement } from '../../util/types';
 import Model from '../../model/Model';
 
-
-const HIGH_DOWN_PROP = '__seriesMapHighDown' as const;
-const RECORD_VERSION_PROP = '__seriesMapCallKey' as const;
-const ORIGINAL_Z2 = '__mapOriginalZ2' as const;
-
-interface CircleExtend extends graphic.Circle {
-    [ORIGINAL_Z2]: number;
-}
 interface HighDownRecord {
     recordVersion: number;
-    circle: CircleExtend;
     labelModel: Model;
     hoverLabelModel: Model;
     emphasisText: string;
     normalText: string;
 };
-interface RegionGroupExtend extends graphic.Group {
-    [HIGH_DOWN_PROP]: HighDownRecord;
-    [RECORD_VERSION_PROP]: number;
-}
 
 class MapView extends ChartView {
 
@@ -175,7 +161,7 @@ class MapView extends ChartView {
                 const labelModel = itemModel.getModel('label');
                 const hoverLabelModel = itemModel.getModel(['emphasis', 'label']);
 
-                const regionGroup = fullData.getItemGraphicEl(fullIndex) as RegionGroupExtend;
+                const regionGroup = fullData.getItemGraphicEl(fullIndex);
 
                 // `getFormattedLabel` needs to use `getData` inside. Here
                 // `mapModel.getData()` is shallow cloned from `mainSeries.getData()`.
@@ -184,43 +170,23 @@ class MapView extends ChartView {
                 // set on original data item will never get. But it has been working
                 // like that from the begining, and this scenario is rarely encountered.
                 // So it won't be fixed until have to.
-                const normalText = zrUtil.retrieve2(
-                    mapModel.getFormattedLabel(fullIndex, 'normal'),
-                    name
-                );
-                const emphasisText = zrUtil.retrieve2(
-                    mapModel.getFormattedLabel(fullIndex, 'emphasis'),
-                    normalText
-                );
-
-                let highDownRecord = regionGroup[HIGH_DOWN_PROP];
-                const recordVersion = Math.random();
-
-                // Prevent from register listeners duplicatedly when roaming.
-                if (!highDownRecord) {
-                    highDownRecord = regionGroup[HIGH_DOWN_PROP] = {} as HighDownRecord;
-                    // let onEmphasis = zrUtil.curry(onRegionHighDown, true);
-                    // let onNormal = zrUtil.curry(onRegionHighDown, false);
-                    // regionGroup.on('mouseover', onEmphasis)
-                    //     .on('mouseout', onNormal)
-                    //     .on('emphasis', onEmphasis)
-                    //     .on('normal', onNormal);
-                }
 
-                // Prevent removed regions effect current grapics.
-                regionGroup[RECORD_VERSION_PROP] = recordVersion;
-                zrUtil.extend(highDownRecord, {
-                    recordVersion,
-                    circle,
-                    labelModel,
-                    hoverLabelModel,
-                    emphasisText,
-                    normalText
-                } as HighDownRecord);
+                graphic.setLabelStyle(circle, labelModel, hoverLabelModel, {
+                    labelFetcher: {
+                        getFormattedLabel(idx: number, state: DisplayState) {
+                            return mapModel.getFormattedLabel(fullIndex, state);
+                        }
+                    }
+                });
+                if (!labelModel.get('position')) {
+                    circle.setTextConfig({
+                        position: 'bottom'
+                    });
+                }
 
-                // FIXME
-                // Consider set option when emphasis.
-                // enterRegionHighDown(highDownRecord, false);
+                (regionGroup as ECElement).onStateChange = function (fromState, toState) {
+                    circle.useState(toState);
+                };
             }
 
             group.add(circle);

src/component/helper/MapDraw.ts

@@ -329,8 +329,6 @@ class MapDraw {
                         scaleY: 1 / targetScaleY
                     }, mapOrGeoModel);
                 }
-
-                regionGroup.add(textEl);
             }
 
             // setItemGraphicEl, setHoverStyle after all polygons and labels

src/util/graphic.ts

@@ -112,7 +112,6 @@ type ExtendedProps = {
     __highByOuter: number
 
     __highDownSilentOnTouch: boolean
-    __onStateChange: (fromState: DisplayState, toState: DisplayState) => void
 
     __highDownDispatcher: boolean
 };
@@ -389,7 +388,7 @@ function singleLeaveEmphasis(el: Element) {
 }
 
 function updateElementState<T>(
-    el: ExtendedElement,
+    el: ECElement,
     updater: (this: void, el: Element, commonParam?: T) => void,
     commonParam?: T
 ) {
@@ -401,7 +400,7 @@ function updateElementState<T>(
     (el as ECElement).highlighted && (fromState = EMPHASIS, trigger = true);
     updater(el, commonParam);
     (el as ECElement).highlighted && (toState = EMPHASIS, trigger = true);
-    trigger && el.__onStateChange && el.__onStateChange(fromState, toState);
+    trigger && el.onStateChange && el.onStateChange(fromState, toState);
 }
 
 function traverseUpdateState<T>(
@@ -616,9 +615,6 @@ export function setAsHighDownDispatcher(el: Element, asDispatcher: boolean) {
     if ((el as ECElement).highDownSilentOnTouch) {
         extendedEl.__highDownSilentOnTouch = (el as ECElement).highDownSilentOnTouch;
     }
-    if ((el as ECElement).onStateChange) {
-        extendedEl.__onStateChange = (el as ECElement).onStateChange;
-    }
 
     // Simple optimize, since this method might be
     // called for each elements of a group in some cases.