center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source 
feat(图表): 在线地图支持设置缩放和中心点 #10816
This commit is contained in:
wisonic-s 2024-10-21 17:23:11 +08:00 committed by GitHub
commit f3f1dcb405
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 153 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/core-frontend/src/locales/zh-CN.ts
View File

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

21
core/core-frontend/src/models/chart/chart-attr.d.ts vendored
View File

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

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

@ -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"

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

@ -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 = {

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

@ -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: {

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

@ -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: {

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

@ -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],
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<Scene, L7Config> {
}
})
: []
const pointLayer = new PointLayer({ autoFit: true })
const pointLayer = new PointLayer({ autoFit: !(basicStyle.autoFit === false) })
.source(data, {
parser: {
type: 'json',