Merge pull request #14578 from apache/fix-map-label

fix(label): fix map label won't update its position when labelLayout is used

src/component/helper/MapDraw.ts

@@ -41,6 +41,8 @@ import Model from '../../model/Model';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getECData } from '../../util/innerStore';
 import { createOrUpdatePatternFromDecal } from '../../util/decal';
+import { makeInner } from '../../util/model';
+import ZRText, {TextStyleProps} from 'zrender/src/graphic/Text';
 import { ViewCoordSysTransformInfoPart } from '../../coord/View';
 import { GeoSVGGraphicRecord, GeoSVGResource } from '../../coord/geo/GeoSVGResource';
 import Displayable from 'zrender/src/graphic/Displayable';
@@ -48,8 +50,11 @@ import Element from 'zrender/src/Element';
 import List from '../../data/List';
 import { GeoJSONRegion } from '../../coord/geo/Region';
 import { SVGNodeTagLower } from 'zrender/src/tool/parseSVG';
-import { TextStyleProps } from 'zrender/src/graphic/Text';
 
+const mapLabelTransform = makeInner<{
+    x: number
+    y: number
+}, ZRText>();
 
 interface RegionsGroup extends graphic.Group {
 }
@@ -515,11 +520,30 @@ class MapDraw {
             return action;
         }
 
+        const updateLabelTransforms = () => {
+            const group = this.group;
+            this._regionsGroup.traverse(function (el) {
+                const textContent = el.getTextContent();
+                if (textContent) {
+                    el.setTextConfig({
+                        local: true
+                    });
+                    textContent.x = mapLabelTransform(textContent).x || 0;
+                    textContent.y = mapLabelTransform(textContent).y || 0;
+                    textContent.scaleX = 1 / group.scaleX;
+                    textContent.scaleY = 1 / group.scaleY;
+                    textContent.markRedraw();
+                }
+            });
+        };
+
         controller.off('pan').on('pan', function (e) {
             this._mouseDownFlag = false;
 
             roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
 
+            updateLabelTransforms();
+
             api.dispatchAction(zrUtil.extend(makeActionBase(), {
                 dx: e.dx,
                 dy: e.dy
@@ -531,6 +555,8 @@ class MapDraw {
 
             roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
 
+            updateLabelTransforms();
+
             api.dispatchAction(zrUtil.extend(makeActionBase(), {
                 zoom: e.scale,
                 originX: e.originX,
@@ -701,8 +727,8 @@ function resetLabelForRegion(
 
         const textEl = el.getTextContent();
         if (textEl) {
-            textEl.x = labelXY ? labelXY[0] : 0;
-            textEl.y = labelXY ? labelXY[1] : 0;
+            mapLabelTransform(textEl).x = textEl.x = labelXY ? labelXY[0] : 0;
+            mapLabelTransform(textEl).y = textEl.y = labelXY ? labelXY[1] : 0;
             textEl.z2 = 10;
             textEl.afterUpdate = labelTextAfterUpdate;
         }

src/coord/geo/geoTypes.ts

@@ -19,9 +19,8 @@
 
 import BoundingRect from 'zrender/src/core/BoundingRect';
 import { HashMap } from 'zrender/src/core/util';
-import { Group, Path } from '../../util/graphic';
+import { Group } from '../../util/graphic';
 import { Region } from './Region';
-import Element from 'zrender/src/Element';
 
 
 export type GeoSVGSourceInput = 'string' | Document | SVGElement;

src/label/LabelManager.ts

@@ -81,6 +81,8 @@ interface SavedLabelAttr {
 
     x: number
     y: number
+    scaleX: number
+    scaleY: number
     rotation: number
 
     style: {
@@ -254,6 +256,8 @@ class LabelManager {
 
                 x: dummyTransformable.x,
                 y: dummyTransformable.y,
+                scaleX: dummyTransformable.scaleX,
+                scaleY: dummyTransformable.scaleY,
                 rotation: dummyTransformable.rotation,
 
                 style: {
@@ -334,6 +338,8 @@ class LabelManager {
             labelItem.computedLayoutOption = layoutOption;
 
             const degreeToRadian = Math.PI / 180;
+            // TODO hostEl should always exists.
+            // Or label should not have parent because the x, y is all in global space.
             if (hostEl) {
                 hostEl.setTextConfig({
                     // Force to set local false.
@@ -385,6 +391,9 @@ class LabelManager {
             label.rotation = layoutOption.rotate != null
                 ? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation;
 
+            label.scaleX = defaultLabelAttr.scaleX;
+            label.scaleY = defaultLabelAttr.scaleY;
+
             for (let k = 0; k < LABEL_OPTION_TO_STYLE_KEYS.length; k++) {
                 const key = LABEL_OPTION_TO_STYLE_KEYS[k];
                 label.setStyle(key, layoutOption[key] != null ? layoutOption[key] : defaultLabelAttr.style[key]);

test/label-layout.html

@@ -51,6 +51,7 @@ under the License.
         <div id="main8"></div>
         <div id="main9"></div>
         <div id="main10"></div>
+        <div id="main11"></div>
 
 
 
@@ -802,6 +803,30 @@ under the License.
         </script>
 
 
+        <script>
+            require(['echarts', 'map/js/china'], function (echarts) {
+                const option = {
+                    series: [{
+                        type: 'map',
+                        map: 'china',
+                        roam: true,
+                        label: {
+                            show: true
+                        },
+                        labelLayout: {
+                            hideOverlap: true
+                        }
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main11', {
+                    title: [
+                        'Map label should update it\'s position when labelLayout is used.'
+                    ],
+                    option: option
+                });
+            });
+        </script>
     </body>
 </html>
 

test/runTest/actions/__meta__.json

@@ -94,7 +94,7 @@
   "hoverStyle": 14,
   "hoverStyle2": 1,
   "label-animation": 3,
-  "label-layout": 1,
+  "label-layout": 2,
   "label-position": 1,
   "largeLine-tooltip": 1,
   "legend": 11,

test/runTest/actions/label-layout.json

-[{"name":"Action 1","ops":[{"type":"mousemove","time":47,"x":689,"y":417},{"type":"mousemove","time":320,"x":689,"y":415},{"type":"mousemove","time":473,"x":689,"y":415},{"type":"mousedown","time":546,"x":689,"y":415},{"type":"mousemove","time":679,"x":682,"y":380},{"type":"mousemove","time":1002,"x":675,"y":339},{"type":"mouseup","time":1054,"x":675,"y":339},{"time":1055,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1240,"x":674,"y":339},{"type":"mousemove","time":1441,"x":524,"y":208},{"type":"mousemove","time":1641,"x":506,"y":166},{"type":"mousemove","time":1842,"x":498,"y":140},{"type":"mousedown","time":1956,"x":497,"y":138},{"type":"mousemove","time":2042,"x":486,"y":153},{"type":"mousemove","time":2256,"x":374,"y":206},{"type":"mousemove","time":2458,"x":149,"y":277},{"type":"mousemove","time":2665,"x":111,"y":290},{"type":"mouseup","time":2949,"x":111,"y":290},{"time":2950,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3377,"x":111,"y":290},{"type":"mousemove","time":3584,"x":111,"y":292},{"type":"mousedown","time":3741,"x":112,"y":286},{"type":"mousemove","time":3794,"x":119,"y":290},{"type":"mousemove","time":4007,"x":381,"y":351},{"type":"mousemove","time":4210,"x":389,"y":362},{"type":"mousemove","time":4410,"x":375,"y":410},{"type":"mousemove","time":4611,"x":359,"y":502},{"type":"mousemove","time":4811,"x":353,"y":532},{"type":"mousemove","time":5021,"x":353,"y":533},{"type":"mouseup","time":5029,"x":353,"y":533},{"time":5030,"delay":400,"type":"screenshot-auto"}],"scrollY":3167,"scrollX":0,"timestamp":1603949926971}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousemove","time":47,"x":689,"y":417},{"type":"mousemove","time":320,"x":689,"y":415},{"type":"mousemove","time":473,"x":689,"y":415},{"type":"mousedown","time":546,"x":689,"y":415},{"type":"mousemove","time":679,"x":682,"y":380},{"type":"mousemove","time":1002,"x":675,"y":339},{"type":"mouseup","time":1054,"x":675,"y":339},{"time":1055,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1240,"x":674,"y":339},{"type":"mousemove","time":1441,"x":524,"y":208},{"type":"mousemove","time":1641,"x":506,"y":166},{"type":"mousemove","time":1842,"x":498,"y":140},{"type":"mousedown","time":1956,"x":497,"y":138},{"type":"mousemove","time":2042,"x":486,"y":153},{"type":"mousemove","time":2256,"x":374,"y":206},{"type":"mousemove","time":2458,"x":149,"y":277},{"type":"mousemove","time":2665,"x":111,"y":290},{"type":"mouseup","time":2949,"x":111,"y":290},{"time":2950,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3377,"x":111,"y":290},{"type":"mousemove","time":3584,"x":111,"y":292},{"type":"mousedown","time":3741,"x":112,"y":286},{"type":"mousemove","time":3794,"x":119,"y":290},{"type":"mousemove","time":4007,"x":381,"y":351},{"type":"mousemove","time":4210,"x":389,"y":362},{"type":"mousemove","time":4410,"x":375,"y":410},{"type":"mousemove","time":4611,"x":359,"y":502},{"type":"mousemove","time":4811,"x":353,"y":532},{"type":"mousemove","time":5021,"x":353,"y":533},{"type":"mouseup","time":5029,"x":353,"y":533},{"time":5030,"delay":400,"type":"screenshot-auto"}],"scrollY":3167,"scrollX":0,"timestamp":1603949926971},{"name":"Action 2","ops":[{"type":"mousewheel","time":616,"x":446,"y":370,"deltaY":4.000244140625},{"type":"mousewheel","time":647,"x":446,"y":370,"deltaY":68.49853515625},{"type":"mousewheel","time":716,"x":446,"y":370,"deltaY":195.638427734375},{"type":"mousewheel","time":850,"x":446,"y":370,"deltaY":177.509765625},{"type":"mousemove","time":1199,"x":446,"y":370},{"type":"mousemove","time":1399,"x":445,"y":374},{"type":"mousedown","time":1578,"x":280,"y":451},{"type":"mousemove","time":1600,"x":280,"y":451},{"type":"mousemove","time":1816,"x":490,"y":390},{"type":"mousemove","time":2016,"x":596,"y":356},{"type":"mousemove","time":2220,"x":609,"y":350},{"type":"mouseup","time":2276,"x":609,"y":350},{"time":2277,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2483,"x":609,"y":350},{"type":"mousemove","time":2689,"x":612,"y":352},{"type":"mousemove","time":2750,"x":612,"y":353},{"type":"mousedown","time":2796,"x":611,"y":354},{"type":"mousemove","time":2959,"x":513,"y":392},{"type":"mousemove","time":3166,"x":367,"y":426},{"type":"mousemove","time":3374,"x":259,"y":450},{"type":"mouseup","time":3513,"x":259,"y":450},{"time":3514,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3616,"x":259,"y":450},{"type":"mousemove","time":3817,"x":269,"y":448},{"type":"mousemove","time":4023,"x":270,"y":448}],"scrollY":4498,"scrollX":0,"timestamp":1617325616129}]
\ No newline at end of file