import { useI18n } from '@/hooks/web/useI18n'
|
import {
|
L7ChartView,
|
L7Config,
|
L7DrawConfig,
|
L7Wrapper
|
} from '@/views/chart/components/js/panel/types/impl/l7'
|
import { MAP_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/map/common'
|
import { hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
|
import { deepCopy } from '@/utils/utils'
|
import { Scene } from '@antv/l7-scene'
|
import { LineLayer } from '@antv/l7-layers'
|
import { PointLayer } from '@antv/l7-layers'
|
import {
|
getMapCenter,
|
getMapScene,
|
getMapStyle,
|
mapRendered,
|
qqMapRendered
|
} from '@/views/chart/components/js/panel/common/common_antv'
|
const { t } = useI18n()
|
|
/**
|
* 流向地图
|
*/
|
export class FlowMap extends L7ChartView<Scene, L7Config> {
|
properties: EditorProperty[] = [
|
'background-overall-component',
|
'border-style',
|
'basic-style-selector',
|
'title-selector',
|
'flow-map-line-selector',
|
'flow-map-point-selector',
|
'bubble-animate'
|
]
|
propertyInner: EditorPropertyInner = {
|
...MAP_EDITOR_PROPERTY_INNER,
|
'basic-style-selector': [
|
'mapBaseStyle',
|
'mapLineStyle',
|
'zoom',
|
'showLabel',
|
'autoFit',
|
'mapCenter',
|
'zoomLevel'
|
]
|
}
|
axis: AxisType[] = ['xAxis', 'xAxisExt', 'filter', 'flowMapStartName', 'flowMapEndName', 'yAxis']
|
axisConfig: AxisConfig = {
|
xAxis: {
|
name: `${t('chart.start_coordinates')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 2
|
},
|
xAxisExt: {
|
name: `${t('chart.end_coordinates')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 2
|
},
|
flowMapStartName: {
|
name: `${t('chart.start_name')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1,
|
allowEmpty: true
|
},
|
flowMapEndName: {
|
name: `${t('chart.end_name')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1,
|
allowEmpty: true
|
},
|
yAxis: {
|
name: `${t('chart.flow_map_line_width')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1,
|
tooltip: t('chart.flow_map_line_width_tip'),
|
allowEmpty: true
|
}
|
}
|
constructor() {
|
super('flow-map', [])
|
}
|
|
async drawChart(drawOption: L7DrawConfig<L7Config>) {
|
const { chart, container } = drawOption
|
const containerDom = document.getElementById(container)
|
const rect = containerDom?.getBoundingClientRect()
|
if (rect?.height <= 0) {
|
return new L7Wrapper(drawOption.chartObj?.getScene(), [])
|
}
|
const xAxis = deepCopy(chart.xAxis)
|
const xAxisExt = deepCopy(chart.xAxisExt)
|
const { basicStyle, misc } = deepCopy(parseJson(chart.customAttr))
|
|
const mapKey = await this.getMapKey()
|
const mapStyle = getMapStyle(mapKey, basicStyle)
|
// 底层
|
const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene>
|
let scene = chartObj?.getScene()
|
|
const center = getMapCenter(basicStyle)
|
scene = await getMapScene(chart, scene, container, mapKey, basicStyle, misc, mapStyle, center)
|
|
this.configZoomButton(chart, scene, mapKey)
|
if (xAxis?.length < 2 || xAxisExt?.length < 2) {
|
return new L7Wrapper(scene, undefined)
|
}
|
const configList = []
|
configList.push(this.lineConfig(chart, xAxis, xAxisExt, basicStyle, misc))
|
this.startAndEndNameConfig(chart, xAxis, xAxisExt, misc, configList)
|
this.pointConfig(chart, xAxis, xAxisExt, misc, configList)
|
configList[0].once('inited', () => {
|
mapRendered(container)
|
})
|
for (let i = 0; i < configList.length; i++) {
|
configList[i].on('inited', () => {
|
qqMapRendered(scene)
|
})
|
}
|
return new L7Wrapper(scene, configList)
|
}
|
|
lineConfig = (chart, xAxis, xAxisExt, basicStyle, misc) => {
|
const flowLineStyle = {
|
type: misc.flowMapConfig.lineConfig.mapLineType,
|
size:
|
misc.flowMapConfig.lineConfig.mapLineType === 'line'
|
? misc.flowMapConfig.lineConfig.mapLineWidth / 2
|
: misc.flowMapConfig.lineConfig.mapLineWidth,
|
animate: misc.flowMapConfig.lineConfig.mapLineAnimate,
|
animateDuration: misc.flowMapConfig.lineConfig.mapLineAnimateDuration,
|
gradient: misc.flowMapConfig.lineConfig.mapLineGradient,
|
sourceColor: misc.flowMapConfig.lineConfig.mapLineSourceColor,
|
targetColor: misc.flowMapConfig.lineConfig.mapLineTargetColor,
|
alpha: misc.flowMapConfig.lineConfig.alpha
|
}
|
const colorsWithAlpha = basicStyle.colors.map(color =>
|
hexColorToRGBA(color, misc.flowMapConfig.lineConfig.alpha)
|
)
|
flowLineStyle.sourceColor = colorsWithAlpha[0]
|
flowLineStyle.targetColor = colorsWithAlpha[1]
|
// 线条粗细
|
let lineWidthField = null
|
const yAxis = deepCopy(chart.yAxis)
|
if (yAxis.length > 0) {
|
lineWidthField = yAxis[0].dataeaseName
|
}
|
// 线条颜色
|
let lineColorField = null
|
const yAxisExt = deepCopy(chart.yAxisExt)
|
if (yAxisExt.length > 0) {
|
lineColorField = yAxisExt[0].dataeaseName
|
}
|
const asteriskField = '*'
|
const data = []
|
chart.data?.tableRow.forEach(item => {
|
const newKey = 'f_record'
|
const newObj = Object.keys(item).reduce((acc, key) => {
|
if (key === asteriskField) {
|
acc[newKey] = item[key]
|
} else {
|
acc[key] = item[key]
|
}
|
return acc
|
}, {})
|
data.push(newObj)
|
})
|
const config: L7Config = new LineLayer({
|
name: 'line',
|
blend: 'normal',
|
autoFit: !(basicStyle.autoFit === false)
|
})
|
.source(data, {
|
parser: {
|
type: 'json',
|
x: xAxis[0].dataeaseName,
|
y: xAxis[1].dataeaseName,
|
x1: xAxisExt[0].dataeaseName,
|
y1: xAxisExt[1].dataeaseName
|
}
|
})
|
.size(flowLineStyle.size)
|
.shape(flowLineStyle.type)
|
.animate({
|
enable: flowLineStyle.animate,
|
duration: flowLineStyle.animateDuration,
|
interval: 1,
|
trailLength: 1
|
})
|
|
if (lineWidthField) {
|
config.size(lineWidthField === asteriskField ? 'f_record' : lineWidthField, [1, 10])
|
}
|
if (lineColorField) {
|
config.style({
|
opacity: flowLineStyle.alpha / 100
|
})
|
config.color(lineColorField)
|
} else {
|
if (flowLineStyle.gradient) {
|
config.style({
|
sourceColor: flowLineStyle.sourceColor,
|
targetColor: flowLineStyle.targetColor,
|
opacity: flowLineStyle.alpha / 100
|
})
|
} else {
|
config
|
.style({
|
opacity: flowLineStyle.alpha / 100
|
})
|
.color(flowLineStyle.sourceColor)
|
}
|
}
|
|
return config
|
}
|
|
startAndEndNameConfig = (chart, xAxis, xAxisExt, misc, configList) => {
|
const flowMapStartName = deepCopy(chart.flowMapStartName)
|
const flowMapEndName = deepCopy(chart.flowMapEndName)
|
const textColor = misc.flowMapConfig.pointConfig.text.color
|
const textFontSize = misc.flowMapConfig.pointConfig.text.fontSize
|
const has = new Map()
|
if (flowMapStartName?.length > 0) {
|
const startTextLayer = new PointLayer()
|
.source(chart.data?.tableRow, {
|
parser: {
|
type: 'json',
|
x: xAxis[0].dataeaseName,
|
y: xAxis[1].dataeaseName
|
}
|
})
|
.shape(flowMapStartName[0].dataeaseName, args => {
|
if (has.has('from-' + args)) {
|
return ''
|
}
|
has.set('from-' + args, args)
|
return args
|
})
|
.size(textFontSize)
|
.color(textColor)
|
.style({
|
textAnchor: 'top', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
|
spacing: 2, // 字符间距
|
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
textAllowOverlap: true,
|
fontFamily: chart.fontFamily ? chart.fontFamily : undefined
|
})
|
configList.push(startTextLayer)
|
}
|
if (flowMapEndName?.length > 0) {
|
const endTextLayer = new PointLayer()
|
.source(chart.data?.tableRow, {
|
parser: {
|
type: 'json',
|
x: xAxisExt[0].dataeaseName,
|
y: xAxisExt[1].dataeaseName
|
}
|
})
|
.shape(flowMapEndName[0].dataeaseName, args => {
|
if (has.has('from-' + args) || has.has('to-' + args)) {
|
return ''
|
}
|
has.set('to-' + args, args)
|
return args
|
})
|
.size(textFontSize)
|
.color(textColor)
|
.style({
|
textAnchor: 'top', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
|
spacing: 2, // 字符间距
|
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
textAllowOverlap: true,
|
fontFamily: chart.fontFamily ? chart.fontFamily : undefined
|
})
|
configList.push(endTextLayer)
|
}
|
}
|
|
pointConfig = (chart, xAxis, xAxisExt, misc, configList) => {
|
const color = misc.flowMapConfig.pointConfig.point.color
|
const size = misc.flowMapConfig.pointConfig.point.size
|
const { bubbleCfg } = parseJson(chart.senior)
|
const fromDefaultPointLayer = new PointLayer({ zIndex: -1 })
|
.source(chart.data?.tableRow, {
|
parser: {
|
type: 'json',
|
x: xAxis[0].dataeaseName,
|
y: xAxis[1].dataeaseName
|
}
|
})
|
.shape('circle')
|
.size(size)
|
.color(color)
|
.style({
|
blur: 0.6
|
})
|
const toDefaultPointLayer = new PointLayer({ zIndex: -1 })
|
.source(chart.data?.tableRow, {
|
parser: {
|
type: 'json',
|
x: xAxisExt[0].dataeaseName,
|
y: xAxisExt[1].dataeaseName
|
}
|
})
|
.shape('circle')
|
.size(size)
|
.color(color)
|
.style({
|
blur: 0.6
|
})
|
if (bubbleCfg && bubbleCfg.enable) {
|
const animate = {
|
enable: true,
|
speed: bubbleCfg.speed,
|
rings: bubbleCfg.rings
|
}
|
fromDefaultPointLayer.size(size * 2)
|
fromDefaultPointLayer.animate(animate)
|
toDefaultPointLayer.size(size * 2)
|
toDefaultPointLayer.animate(animate)
|
}
|
configList.push(fromDefaultPointLayer)
|
configList.push(toDefaultPointLayer)
|
}
|
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
chart.customAttr.misc.flowMapConfig.lineConfig.mapLineAnimate = true
|
return chart
|
}
|
}
|
