diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 2b2965e464..3512c28a91 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/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: '仅编辑时生效', diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index 9b488470c9..fbaa5b3c5b 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/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 } /** * 表头属性 diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue index 6e44206cbe..2662019480 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue @@ -400,6 +400,7 @@ onMounted(() => { @@ -625,6 +626,73 @@ onMounted(() => { {{ t('chart.show_label') }} + + + {{ t('chart.auto_fit') }} + + +
+ + + + + + + + +
+ { ] 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 { 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 { 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 { const config: L7Config = new LineLayer({ name: 'line', blend: 'normal', - autoFit: true + autoFit: !(basicStyle.autoFit === false) }) .source(data, { parser: { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts index dcc656feeb..8f0b291e96 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts @@ -27,7 +27,15 @@ export class HeatMap extends L7ChartView { ] 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 { 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 { 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 { const config: L7Config = new HeatmapLayer({ name: 'line', blend: 'normal', - autoFit: true + autoFit: !(basicStyle.autoFit === false) }) .source(chart.data?.data, { parser: { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts index da3f993941..1387298d96 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts +++ b/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 { '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 { 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 { token: mapKey?.key ?? undefined, style: mapStyle, pitch: miscStyle.mapPitch, - center: [104.434765, 38.256735], - zoom: 2.5, + center, + zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 2.5, showLabel: !(basicStyle.showLabel === false) }) }) @@ -206,7 +217,7 @@ export class SymbolicMap extends L7ChartView { } }) : [] - const pointLayer = new PointLayer({ autoFit: true }) + const pointLayer = new PointLayer({ autoFit: !(basicStyle.autoFit === false) }) .source(data, { parser: { type: 'json',