Merge pull request #12812 from dataease/pr@dev-v2@feat_online_map_zoom_and_center

feat(图表): 在线地图支持设置缩放和中心点 #10816

core/core-frontend/src/locales/zh-CN.ts

@@ -1540,7 +1540,9 @@ export default {
     tip: '提示',
     hide: '隐藏',
     show_label: '显示标签',
-    security_code: '安全密钥'
+    security_code: '安全密钥',
+    auto_fit: '自适应缩放',
+    zoom_level: '缩放等级'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -297,6 +297,27 @@ declare interface ChartBasicStyle {
    * 显示标签
    */
   showLabel: boolean
+  /**
+   * 自适应缩放
+   */
+  autoFit: boolean
+  /**
+   * 地图中心点经纬度
+   */
+  mapCenter: {
+    /**
+     * 经度
+     */
+    longitude: number
+    /**
+     * 纬度
+     */
+    latitude: number
+  },
+  /**
+   * 缩放等级
+   */
+  zoomLevel: number
 }
 /**
  * 表头属性

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -400,6 +400,7 @@ onMounted(() => {
             <el-input
               :effect="themes"
               v-model="state.basicStyleForm.mapStyleUrl"
+              maxlength="50"
               @change="changeBasicStyle('mapStyleUrl')"
             />
           </el-form-item>
@@ -625,6 +626,73 @@ onMounted(() => {
         {{ t('chart.show_label') }}
       </el-checkbox>
     </el-form-item>
+    <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('autoFit')">
+      <el-checkbox
+        size="small"
+        :effect="themes"
+        v-model="state.basicStyleForm.autoFit"
+        @change="changeBasicStyle('autoFit')"
+      >
+        {{ t('chart.auto_fit') }}
+      </el-checkbox>
+    </el-form-item>
+    <div
+      class="alpha-setting"
+      v-if="showProperty('zoomLevel') && state.basicStyleForm.autoFit === false"
+    >
+      <label class="alpha-label" :class="{ dark: 'dark' === themes }">
+        {{ t('chart.zoom_level') }}
+      </label>
+      <el-row style="flex: 1" :gutter="8">
+        <el-col>
+          <el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
+            <el-slider
+              :effect="themes"
+              :min="3"
+              :max="18"
+              v-model="state.basicStyleForm.zoomLevel"
+              @change="changeBasicStyle('zoomLevel')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+    <template v-if="showProperty('mapCenter') && state.basicStyleForm.autoFit === false">
+      <el-row :gutter="8">
+        <el-col :span="12">
+          <el-form-item
+            class="form-item"
+            :class="'form-item-' + themes"
+            :label="t('chart.longitude')"
+          >
+            <el-input-number
+              controls-position="right"
+              :min="-180"
+              :max="180"
+              :effect="props.themes"
+              v-model.number="state.basicStyleForm.mapCenter.longitude"
+              @change="changeBasicStyle('mapCenter.longitude')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            class="form-item"
+            :class="'form-item-' + themes"
+            :label="t('chart.latitude')"
+          >
+            <el-input-number
+              controls-position="right"
+              :min="-90"
+              :max="90"
+              :effect="props.themes"
+              v-model.number="state.basicStyleForm.mapCenter.latitude"
+              @change="changeBasicStyle('mapCenter.latitude')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
     <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('zoom')">
       <el-checkbox
         size="small"

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1587,7 +1587,13 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   mapSymbolSizeMin: 4,
   mapSymbolSizeMax: 30,
   showLabel: true,
-  mapStyleUrl: ''
+  mapStyleUrl: '',
+  autoFit: true,
+  mapCenter: {
+    longitude: 116,
+    latitude: 39
+  },
+  zoomLevel: 7
 }
 
 export const BASE_VIEW_CONFIG = {

core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts

@@ -13,6 +13,7 @@ import { Scene } from '@antv/l7-scene'
 import { LineLayer } from '@antv/l7-layers'
 import { PointLayer } from '@antv/l7-layers'
 import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 const { t } = useI18n()
 
 /**
@@ -30,7 +31,15 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
   ]
   propertyInner: EditorPropertyInner = {
     ...MAP_EDITOR_PROPERTY_INNER,
-    'basic-style-selector': ['mapBaseStyle', 'mapLineStyle', 'zoom', 'showLabel']
+    'basic-style-selector': [
+      'mapBaseStyle',
+      'mapLineStyle',
+      'zoom',
+      'showLabel',
+      'autoFit',
+      'mapCenter',
+      'zoomLevel'
+    ]
   }
   axis: AxisType[] = ['xAxis', 'xAxisExt', 'filter', 'flowMapStartName', 'flowMapEndName', 'yAxis']
   axisConfig: AxisConfig = {
@@ -74,6 +83,13 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
     const xAxisExt = deepCopy(chart.xAxisExt)
     const { basicStyle, misc } = deepCopy(parseJson(chart.customAttr))
 
+    let center: [number, number] = [
+      DEFAULT_BASIC_STYLE.mapCenter.longitude,
+      DEFAULT_BASIC_STYLE.mapCenter.latitude
+    ]
+    if (basicStyle.autoFit === false) {
+      center = [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
+    }
     let mapStyle = basicStyle.mapStyleUrl
     if (basicStyle.mapStyle !== 'custom') {
       mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}`
@@ -87,7 +103,8 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
         token: mapKey?.key ?? undefined,
         style: mapStyle,
         pitch: misc.mapPitch,
-        zoom: 2.5,
+        center,
+        zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5,
         showLabel: !(basicStyle.showLabel === false)
       })
     })
@@ -157,7 +174,7 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
     const config: L7Config = new LineLayer({
       name: 'line',
       blend: 'normal',
-      autoFit: true
+      autoFit: !(basicStyle.autoFit === false)
     })
       .source(data, {
         parser: {

core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts

@@ -27,7 +27,15 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
   ]
   propertyInner: EditorPropertyInner = {
     ...MAP_EDITOR_PROPERTY_INNER,
-    'basic-style-selector': ['colors', 'heatMapStyle', 'zoom', 'showLabel']
+    'basic-style-selector': [
+      'colors',
+      'heatMapStyle',
+      'zoom',
+      'showLabel',
+      'autoFit',
+      'mapCenter',
+      'zoomLevel'
+    ]
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
   axisConfig: AxisConfig = {
@@ -56,6 +64,13 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
       basicStyle = parseJson(chart.customAttr).basicStyle
       miscStyle = parseJson(chart.customAttr).misc
     }
+    let center: [number, number] = [
+      DEFAULT_BASIC_STYLE.mapCenter.longitude,
+      DEFAULT_BASIC_STYLE.mapCenter.latitude
+    ]
+    if (basicStyle.autoFit === false) {
+      center = [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
+    }
     let mapStyle = basicStyle.mapStyleUrl
     if (basicStyle.mapStyle !== 'custom') {
       mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}`
@@ -69,7 +84,8 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
         token: mapKey?.key ?? undefined,
         style: mapStyle,
         pitch: miscStyle.mapPitch,
-        zoom: 2.5,
+        center,
+        zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5,
         showLabel: !(basicStyle.showLabel === false)
       })
     })
@@ -83,7 +99,7 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
     const config: L7Config = new HeatmapLayer({
       name: 'line',
       blend: 'normal',
-      autoFit: true
+      autoFit: !(basicStyle.autoFit === false)
     })
       .source(chart.data?.data, {
         parser: {

core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts

@@ -14,6 +14,7 @@ import { PointLayer } from '@antv/l7-layers'
 import { LayerPopup } from '@antv/l7'
 import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv'
 import { configCarouselTooltip } from '@/views/chart/components/js/panel/charts/map/tooltip-carousel'
+import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 const { t } = useI18n()
 
 /**
@@ -36,7 +37,10 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
       'mapBaseStyle',
       'symbolicMapStyle',
       'zoom',
-      'showLabel'
+      'showLabel',
+      'autoFit',
+      'mapCenter',
+      'zoomLevel'
     ],
     'label-selector': ['color', 'fontSize', 'showFields', 'customContent'],
     'tooltip-selector': [
@@ -90,6 +94,13 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
       mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}`
     }
     const mapKey = await this.getMapKey()
+    let center: [number, number] = [
+      DEFAULT_BASIC_STYLE.mapCenter.longitude,
+      DEFAULT_BASIC_STYLE.mapCenter.latitude
+    ]
+    if (basicStyle.autoFit === false) {
+      center = [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
+    }
     // 底层
     const scene = new Scene({
       id: container,
@@ -98,8 +109,8 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
         token: mapKey?.key ?? undefined,
         style: mapStyle,
         pitch: miscStyle.mapPitch,
-        center: [104.434765, 38.256735],
+        center,
-        zoom: 2.5,
+        zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5,
         showLabel: !(basicStyle.showLabel === false)
       })
     })
@@ -206,7 +217,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
           }
         })
       : []
-    const pointLayer = new PointLayer({ autoFit: true })
+    const pointLayer = new PointLayer({ autoFit: !(basicStyle.autoFit === false) })
       .source(data, {
         parser: {
           type: 'json',