fix(图表): 修复地图导出图片时缩放按钮未显示 #10058

core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts

@@ -24,9 +24,10 @@ import {
 import substitute from '@antv/util/esm/substitute'
 import type { Plot as L7Plot, PlotOptions } from '@antv/l7plot/dist/esm'
 import { Zoom } from '@antv/l7'
-import { createL7Icon } from '@antv/l7-component/es/utils/icon'
 import { DOM } from '@antv/l7-utils'
 import { Scene } from '@antv/l7-scene'
+import { type IZoomControlOption } from '@antv/l7-component'
+import { PositionType } from '@antv/l7-core'
 
 export function getPadding(chart: Chart): number[] {
   if (chart.drill) {
@@ -828,7 +829,8 @@ export function configL7Label(chart: Chart): false | LabelOptions {
     visible: label.show,
     style: {
       fill: label.color,
-      fontSize: label.fontSize
+      fontSize: label.fontSize,
+      fontWeight: 'bold'
     }
   }
 }
@@ -970,7 +972,13 @@ export function configL7Legend(chart: Chart): LegendOptions | false {
     }
   }
 }
-class CustomZoom extends Zoom {
+const ZOOM_IN_BTN =
+  '<svg t="1717484429999" fill="${fill}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9332" width="14px" height="14px"><path d="M47.653 439.326c-24.501 0-44.368 19.881-44.368 44.4v56.548c0 24.492 19.862 44.4 44.368 44.4h928.694c24.501 0 44.368-19.881 44.368-44.4v-56.548c0-24.497-19.862-44.4-44.368-44.4H47.653z" p-id="9333"></path><path d="M586.326 47.653c0-24.501-19.881-44.368-44.4-44.368h-56.548c-24.492 0-44.4 19.862-44.4 44.368v928.694c0 24.501 19.881 44.368 44.4 44.368h56.548c24.497 0 44.4-19.862 44.4-44.368V47.653z" p-id="9334"></path></svg>'
+const RESET_BTN =
+  '<svg t="1717487786436" fill="${fill}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18361" width="14px" height="14px"><path d="M127.594667 503.274667a383.573333 383.573333 0 0 1 112.426666-263.04 380.864 380.864 0 0 1 122.24-82.474667 382.421333 382.421333 0 0 1 149.632-30.165333c51.946667 0 102.250667 10.176 149.504 30.165333a381.610667 381.610667 0 0 1 122.133334 82.474667 385.152 385.152 0 0 1 31.082666 35.093333l-67.285333 52.501333a8.96 8.96 0 0 0 3.349333 15.765334l196.352 48.042666a8.96 8.96 0 0 0 11.050667-8.597333l0.896-202.154667c0-7.466667-8.597333-11.733333-14.421333-7.04l-63.018667 49.28C795.605333 113.173333 661.973333 42.666667 511.786667 42.666667 255.786667 42.666667 47.488 247.829333 42.666667 502.826667a8.96 8.96 0 0 0 8.96 9.173333h67.029333c4.906667 0 8.832-3.925333 8.96-8.725333z m844.8 8.725333h-67.050667a8.917333 8.917333 0 0 0-8.96 8.704 381.76 381.76 0 0 1-30.037333 140.8 382.336 382.336 0 0 1-82.346667 122.24 382.656 382.656 0 0 1-271.893333 112.64 382.421333 382.421333 0 0 1-271.765334-112.64 385.152 385.152 0 0 1-31.061333-35.072l67.264-52.522667a8.96 8.96 0 0 0-3.349333-15.765333l-196.330667-48.042667a8.96 8.96 0 0 0-11.050667 8.597334l-0.789333 202.261333c0 7.488 8.597333 11.733333 14.421333 7.04l63.018667-49.28C228.394667 910.826667 362.026667 981.333333 512.213333 981.333333 768.341333 981.333333 976.512 776.042667 981.333333 521.173333a8.96 8.96 0 0 0-8.96-9.173333z" p-id="18362"></path></svg>'
+const ZOOM_OUT_BTN =
+  '<svg t="1717486240292" fill="${fill}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13641" width="14px" height="14px"><path d="M935 423.3H89C40.2 423.3 0.3 463.2 0.3 512c0 48.8 39.9 88.7 88.7 88.7h846c48.8 0 88.7-39.9 88.7-88.7 0-48.8-39.9-88.7-88.7-88.7z" p-id="13642"></path></svg>'
+export class CustomZoom extends Zoom {
   resetButtonGroup(container) {
     DOM.clearChildren(container)
     this['zoomInButton'] = this['createButton'](
@@ -980,9 +988,8 @@ class CustomZoom extends Zoom {
       container,
       this.zoomIn
     )
-    const resetBtnIconText = createL7Icon('l7-icon-round')
     this['zoomResetButton'] = this['createButton'](
-      resetBtnIconText,
+      this.controlOption['resetText'],
       'Reset',
       'l7-button-control',
       container,
@@ -1008,15 +1015,7 @@ class CustomZoom extends Zoom {
       container,
       this.zoomOut
     )
-    const { buttonColor, buttonBackground } = this.controlOption as any
-    if (buttonColor) {
-      const elements = [
-        this.controlOption.zoomInText,
-        this.controlOption.zoomOutText,
-        resetBtnIconText
-      ] as HTMLElement[]
-      setStyle(elements, 'fill', buttonColor)
-    }
+    const { buttonBackground } = this.controlOption as any
     const elements = [this['zoomResetButton'], this['zoomInButton'], this['zoomOutButton']]
     if (buttonBackground) {
       setStyle(elements, 'background', buttonBackground)
@@ -1024,6 +1023,28 @@ class CustomZoom extends Zoom {
     setStyle(elements, 'border-bottom', 'none')
     this['updateDisabled']()
   }
+  public getDefault(option: Partial<IZoomControlOption>) {
+    const { buttonColor } = option as any
+    let zoomInText = ZOOM_IN_BTN
+    let zoomOutText = ZOOM_OUT_BTN
+    let resetText = RESET_BTN
+    if (buttonColor) {
+      zoomInText = zoomInText.replace('${fill}', buttonColor)
+      zoomOutText = zoomOutText.replace('${fill}', buttonColor)
+      resetText = resetText.replace('${fill}', buttonColor)
+    }
+    return {
+      ...option,
+      position: PositionType.BOTTOMRIGHT,
+      name: 'zoom',
+      zoomInText,
+      zoomInTitle: 'Zoom in',
+      zoomOutText,
+      zoomOutTitle: 'Zoom out',
+      resetText,
+      showZoom: false
+    } as IZoomControlOption
+  }
 }
 export function configL7Zoom(chart: Chart, plot: L7Plot<PlotOptions> | Scene) {
   const { basicStyle } = parseJson(chart.customAttr)
@@ -1034,7 +1055,7 @@ export function configL7Zoom(chart: Chart, plot: L7Plot<PlotOptions> | Scene) {
     return
   }
   const plotScene = plot instanceof Scene ? plot : plot.scene
-  plotScene.once('loaded', () => {
+  plot.once('loaded', () => {
     const zoomOptions = {
       initZoom: plotScene.getZoom(),
       center: plotScene.getCenter(),