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 {
|
getColorFormAlphaColor,
|
hexColorToRGBA,
|
parseJson,
|
svgStrToUrl
|
} from '@/views/chart/components/js/util'
|
import { deepCopy } from '@/utils/utils'
|
import { Scene } from '@antv/l7-scene'
|
import { PointLayer } from '@antv/l7-layers'
|
import { LayerPopup, Popup } from '@antv/l7'
|
import {
|
getMapCenter,
|
getMapScene,
|
getMapStyle,
|
mapRendered,
|
qqMapRendered
|
} from '@/views/chart/components/js/panel/common/common_antv'
|
import { configCarouselTooltip } from '@/views/chart/components/js/panel/charts/map/tooltip-carousel'
|
import { filter } from 'lodash-es'
|
const { t } = useI18n()
|
|
/**
|
* 符号地图
|
*/
|
export class SymbolicMap extends L7ChartView<Scene, L7Config> {
|
properties: EditorProperty[] = [
|
'background-overall-component',
|
'border-style',
|
'basic-style-selector',
|
'symbolic-style-selector',
|
'title-selector',
|
'label-selector',
|
'tooltip-selector',
|
'threshold',
|
'bubble-animate'
|
]
|
propertyInner: EditorPropertyInner = {
|
...MAP_EDITOR_PROPERTY_INNER,
|
'basic-style-selector': [
|
'colors',
|
'alpha',
|
'mapBaseStyle',
|
'zoom',
|
'showLabel',
|
'autoFit',
|
'mapCenter',
|
'zoomLevel'
|
],
|
'symbolic-style-selector': ['symbolicMapStyle'],
|
'label-selector': ['color', 'fontSize', 'showFields', 'customContent'],
|
'tooltip-selector': [
|
'color',
|
'fontSize',
|
'showFields',
|
'customContent',
|
'show',
|
'backgroundColor',
|
'carousel'
|
],
|
threshold: ['lineThreshold']
|
}
|
axis: AxisType[] = ['xAxis', 'xAxisExt', 'extBubble', 'filter', 'extLabel', 'extTooltip']
|
axisConfig: AxisConfig = {
|
xAxis: {
|
name: `${t('chart.symbolic_map_coordinates')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 2
|
},
|
xAxisExt: {
|
name: `${t('chart.color')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1,
|
allowEmpty: true
|
},
|
extBubble: {
|
name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1,
|
tooltip: t('chart.symbolic_map_bubble_size_tip'),
|
allowEmpty: true
|
}
|
}
|
constructor() {
|
super('symbolic-map', [])
|
}
|
|
async drawChart(drawOption: L7DrawConfig<L7Config>) {
|
const { chart, container, action } = 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)
|
let basicStyle
|
let miscStyle
|
if (chart.customAttr) {
|
basicStyle = parseJson(chart.customAttr).basicStyle
|
miscStyle = parseJson(chart.customAttr).misc
|
}
|
|
const mapKey = await this.getMapKey()
|
const mapStyle = getMapStyle(mapKey, basicStyle)
|
|
let center = getMapCenter(basicStyle)
|
// 联动时，聚焦到数据点，多个取第一个
|
if (
|
chart.chartExtRequest?.linkageFilters?.length &&
|
xAxis?.length === 2 &&
|
chart.data?.tableRow.length
|
) {
|
// 经度
|
const lng = chart.data?.tableRow?.[0][chart.xAxis[0].dataeaseName]
|
// 纬度
|
const lat = chart.data?.tableRow?.[0][chart.xAxis[1].dataeaseName]
|
center = [lng, lat]
|
}
|
const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene>
|
let scene = chartObj?.getScene()
|
scene = await getMapScene(
|
chart,
|
scene,
|
container,
|
mapKey,
|
basicStyle,
|
miscStyle,
|
mapStyle,
|
center
|
)
|
|
this.configZoomButton(chart, scene, mapKey)
|
if (xAxis?.length < 2) {
|
return new L7Wrapper(scene, undefined)
|
}
|
const configList: L7Config[] = []
|
const symbolicLayer = await this.buildSymbolicLayer(chart, scene)
|
configList.push(symbolicLayer)
|
const tooltipLayer = this.buildTooltip(chart, container, symbolicLayer, scene)
|
if (tooltipLayer) {
|
scene.addPopup(tooltipLayer)
|
}
|
this.buildLabel(chart, configList)
|
symbolicLayer.once('inited', () => {
|
mapRendered(container)
|
})
|
symbolicLayer.on('inited', () => {
|
chart.container = container
|
configCarouselTooltip(chart, symbolicLayer, symbolicLayer.sourceOption.data, scene)
|
qqMapRendered(scene)
|
})
|
symbolicLayer.on('click', ev => {
|
const data = ev.feature
|
const dimensionList = []
|
const quotaList = []
|
chart.data.fields.forEach((item, index) => {
|
Object.keys(data).forEach(key => {
|
if (key.startsWith('f_') && item.dataeaseName === key) {
|
if (index === 0) {
|
dimensionList.push({
|
id: item.id,
|
dataeaseName: item.dataeaseName,
|
value: data[key]
|
})
|
} else {
|
quotaList.push({
|
id: item.id,
|
dataeaseName: item.dataeaseName,
|
value: data[key]
|
})
|
}
|
}
|
})
|
})
|
action({
|
x: ev.x,
|
y: ev.y,
|
data: {
|
data: {
|
...data,
|
value: quotaList[0].value,
|
name: dimensionList[0].id,
|
dimensionList: dimensionList,
|
quotaList: quotaList
|
}
|
}
|
})
|
})
|
|
return new L7Wrapper(scene, configList)
|
}
|
|
/**
|
* 构建符号图层
|
* @param chart
|
*/
|
buildSymbolicLayer = async (chart, scene: Scene) => {
|
const { basicStyle } = parseJson(chart.customAttr) as ChartAttr
|
const xAxis = deepCopy(chart.xAxis)
|
const xAxisExt = deepCopy(chart.xAxisExt)
|
const extBubble = deepCopy(chart.extBubble)
|
const {
|
mapSymbolOpacity,
|
mapSymbolSize,
|
mapSymbol,
|
mapSymbolStrokeWidth,
|
colors,
|
alpha,
|
mapSymbolSizeMin,
|
mapSymbolSizeMax
|
} = deepCopy(basicStyle)
|
const colorsWithAlpha = colors.map(color => hexColorToRGBA(color, alpha))
|
let colorIndex = 0
|
// 存储已分配的颜色
|
const colorAssignments = new Map()
|
const sizeKey = extBubble.length > 0 ? extBubble[0].dataeaseName : ''
|
|
//条件颜色
|
const { threshold, bubbleCfg } = parseJson(chart.senior)
|
let conditions = []
|
if (threshold.enable) {
|
conditions = threshold.lineThreshold ?? []
|
}
|
const extBubbleIds = chart.extBubble.map(i => i.id)
|
conditions = filter(conditions, c => extBubbleIds.includes(c.fieldId))
|
|
const baseColor = colorsWithAlpha[0]
|
const baseColorList = []
|
|
const data = chart.data?.tableRow
|
? chart.data.tableRow.map((item, index) => {
|
item['_index'] = '_index' + index
|
// 颜色标识
|
const identifier = item[xAxisExt[0]?.dataeaseName]
|
// 检查该标识是否已有颜色分配，如果没有则分配
|
let color = colorAssignments.get(identifier)
|
if (!color) {
|
color = colorsWithAlpha[colorIndex++ % colorsWithAlpha.length]
|
// 记录分配的颜色
|
colorAssignments.set(identifier, color)
|
}
|
|
baseColorList[index] = color
|
|
if (conditions.length > 0) {
|
for (let i = 0; i < conditions.length; i++) {
|
const c = conditions[i]
|
const value = item[c.field.dataeaseName]
|
for (const t of c.conditions) {
|
const v = t.value
|
|
//保存一下颜色到map
|
const _color = getColorFormAlphaColor(t.color)
|
|
if (t.term === 'between') {
|
const start = parseFloat(t.min)
|
const end = parseFloat(t.max)
|
if (start <= value && value <= end) {
|
color = hexColorToRGBA(_color, alpha)
|
baseColorList[index] = color
|
}
|
} else if ('lt' === t.term) {
|
if (value < v) {
|
color = hexColorToRGBA(_color, alpha)
|
baseColorList[index] = color
|
}
|
} else if ('le' === t.term) {
|
if (value <= v) {
|
color = hexColorToRGBA(_color, alpha)
|
baseColorList[index] = color
|
}
|
} else if ('gt' === t.term) {
|
if (value > v) {
|
color = hexColorToRGBA(_color, alpha)
|
baseColorList[index] = color
|
}
|
} else if ('ge' === t.term) {
|
if (value >= v) {
|
color = hexColorToRGBA(_color, alpha)
|
baseColorList[index] = color
|
}
|
} else if ('eq' === t.term) {
|
if (value === v) {
|
color = hexColorToRGBA(_color, alpha)
|
baseColorList[index] = color
|
}
|
} else if ('not_eq' === t.term) {
|
if (value !== v) {
|
color = hexColorToRGBA(_color, alpha)
|
baseColorList[index] = color
|
}
|
}
|
}
|
}
|
}
|
|
return {
|
...item,
|
color,
|
size: parseInt(item[sizeKey]) ?? mapSymbolSize,
|
name: identifier
|
}
|
})
|
: []
|
const pointLayer = new PointLayer({ autoFit: !(basicStyle.autoFit === false) })
|
.source(data, {
|
parser: {
|
type: 'json',
|
x: xAxis[0].dataeaseName,
|
y: xAxis[1].dataeaseName
|
}
|
})
|
.active(true)
|
if (xAxisExt[0]?.dataeaseName) {
|
if (basicStyle.mapSymbol === 'custom' && basicStyle.customIcon) {
|
// 图片无法改色
|
if (basicStyle.customIcon.startsWith('data')) {
|
scene.removeImage('customIcon')
|
await scene.addImage('customIcon', basicStyle.customIcon)
|
pointLayer.shape('customIcon')
|
} else {
|
const parser = new DOMParser()
|
for (let index = 0; index < Math.min(baseColorList.length, colorIndex + 1); index++) {
|
const color = baseColorList[index]
|
const fillRegex = /(fill="[^"]*")/g
|
const svgStr = basicStyle.customIcon.replace(fillRegex, '')
|
const doc = parser.parseFromString(svgStr, 'image/svg+xml')
|
const svgEle = doc.documentElement
|
svgEle.setAttribute('fill', color)
|
scene.removeImage(`icon-${color}`)
|
await scene.addImage(`icon-${color}`, svgStrToUrl(svgEle.outerHTML))
|
}
|
pointLayer.shape('color', c => {
|
return `icon-${c}`
|
})
|
}
|
} else {
|
pointLayer.shape(mapSymbol).color('_index', baseColorList)
|
pointLayer.style({
|
stroke: {
|
field: 'color'
|
},
|
strokeWidth: mapSymbolStrokeWidth,
|
opacity: mapSymbolOpacity / 10
|
})
|
}
|
} else {
|
if (basicStyle.mapSymbol === 'custom' && basicStyle.customIcon) {
|
scene.removeImage('customIcon')
|
if (basicStyle.customIcon.startsWith('data')) {
|
await scene.addImage('customIcon', basicStyle.customIcon)
|
pointLayer.shape('customIcon')
|
} else {
|
const parser = new DOMParser()
|
const color = baseColor
|
const fillRegex = /(fill="[^"]*")/g
|
const svgStr = basicStyle.customIcon.replace(fillRegex, '')
|
const doc = parser.parseFromString(svgStr, 'image/svg+xml')
|
const svgEle = doc.documentElement
|
svgEle.setAttribute('fill', color)
|
await scene.addImage(`customIcon`, svgStrToUrl(svgEle.outerHTML))
|
pointLayer.shape('customIcon')
|
}
|
} else {
|
pointLayer
|
.shape(mapSymbol)
|
.color('_index', baseColorList)
|
.style({
|
stroke: {
|
field: 'color'
|
},
|
strokeWidth: mapSymbolStrokeWidth,
|
opacity: mapSymbolOpacity / 10
|
})
|
}
|
}
|
if (sizeKey) {
|
pointLayer.size('size', [mapSymbolSizeMin, mapSymbolSizeMax])
|
} else {
|
pointLayer.size(mapSymbolSize)
|
}
|
if (bubbleCfg && bubbleCfg.enable) {
|
pointLayer.animate({ enable: true, speed: bubbleCfg.speed, rings: bubbleCfg.rings })
|
pointLayer.style({
|
...pointLayer.style,
|
opacity: mapSymbolOpacity / 2
|
})
|
} else {
|
pointLayer.animate(false)
|
}
|
return pointLayer
|
}
|
|
/**
|
* 合并详情到 map
|
* @param details
|
* @returns {Map<string, any>}
|
*/
|
mergeDetailsToMap = details => {
|
const resultMap = new Map()
|
details.forEach(item => {
|
Object.entries(item).forEach(([key, value]) => {
|
if (resultMap.has(key)) {
|
const existingValue = resultMap.get(key)
|
if (existingValue !== value) {
|
resultMap.set(key, `${existingValue}, ${value}`)
|
}
|
} else {
|
resultMap.set(key, value)
|
}
|
})
|
})
|
return resultMap
|
}
|
|
/**
|
* 清除 popup
|
* @param container
|
*/
|
clearPopup = container => {
|
const containerElement = document.getElementById(container)
|
containerElement?.querySelectorAll('.l7-popup').forEach((element: Element) => element.remove())
|
}
|
|
/**
|
* 构建 tooltip
|
* @param chart
|
* @param pointLayer
|
*/
|
buildTooltip = (chart, container, pointLayer, scene) => {
|
const customAttr = chart.customAttr ? parseJson(chart.customAttr) : null
|
this.clearPopup(container)
|
if (customAttr?.tooltip?.show) {
|
const { tooltip } = deepCopy(customAttr)
|
let showFields = tooltip.showFields || []
|
if (!tooltip.showFields || tooltip.showFields.length === 0) {
|
showFields = [
|
...chart.xAxisExt.map(i => `${i.dataeaseName}@${i.name}`),
|
...chart.xAxis.map(i => `${i.dataeaseName}@${i.name}`)
|
]
|
}
|
// 修改背景色
|
const styleId = 'tooltip-' + container
|
const styleElement = document.getElementById(styleId)
|
if (styleElement) {
|
styleElement.remove()
|
styleElement.parentNode?.removeChild(styleElement)
|
}
|
const style = document.createElement('style')
|
style.id = styleId
|
style.innerHTML = `
|
#${container} .l7-popup-content {
|
background-color: ${tooltip.backgroundColor} !important;
|
padding: 6px 10px 6px;
|
line-height: 1.6;
|
border-top-left-radius: 3px;
|
}
|
#${container} .l7-popup-tip {
|
border-top-color: ${tooltip.backgroundColor} !important;
|
}
|
`
|
document.head.appendChild(style)
|
const htmlPrefix = `<div style='font-size:${tooltip.fontSize}px;color:${tooltip.color};font-family: ${chart.fontFamily}'>`
|
const htmlSuffix = '</div>'
|
const containerElement = document.getElementById(container)
|
if (containerElement) {
|
containerElement.addEventListener('mousemove', event => {
|
const rect = containerElement.getBoundingClientRect()
|
const mouseX = event.clientX - rect.left
|
const mouseY = event.clientY - rect.top
|
const tooltipElement = containerElement.getElementsByClassName('l7-popup')
|
for (let i = 0; i < tooltipElement?.length; i++) {
|
const element = tooltipElement[i] as HTMLElement
|
element.firstElementChild.style.display = 'none'
|
element.style.transform = 'translate(15px, 12px)'
|
const isNearRightEdge =
|
containerElement.clientWidth - mouseX <= element.clientWidth + 10
|
const isNearBottomEdge = containerElement.clientHeight - mouseY <= element.clientHeight
|
let transform = ''
|
if (isNearRightEdge) {
|
transform += 'translateX(-120%) translateY(15%) '
|
}
|
if (isNearBottomEdge) {
|
transform += 'translateX(15%) translateY(-80%) '
|
}
|
if (transform) {
|
element.style.transform = transform.trim()
|
}
|
}
|
})
|
}
|
pointLayer.on('touchend', e => {
|
if (e.lngLat) {
|
const fieldData = {
|
...e.feature,
|
...Object.fromEntries(this.mergeDetailsToMap(e.feature.details ?? []))
|
}
|
const content = this.buildTooltipContent(tooltip, fieldData, showFields)
|
const popup = new Popup({
|
lngLat: e.lngLat,
|
title: '',
|
closeButton: false,
|
closeOnClick: true,
|
html: `${htmlPrefix}${content}${htmlSuffix}`
|
})
|
scene.addPopup(popup)
|
}
|
})
|
return new LayerPopup({
|
anchor: 'top-left',
|
className: 'l7-popup-' + container,
|
items: [
|
{
|
layer: pointLayer,
|
customContent: item => {
|
const fieldData = {
|
...item,
|
...Object.fromEntries(this.mergeDetailsToMap(item.details))
|
}
|
const content = this.buildTooltipContent(tooltip, fieldData, showFields)
|
return `${htmlPrefix}${content}${htmlSuffix}`
|
}
|
}
|
],
|
trigger: 'hover'
|
})
|
}
|
return undefined
|
}
|
|
/**
|
* 构建 tooltip 内容
|
* @param tooltip
|
* @param fieldData
|
* @param showFields
|
* @returns {string}
|
*/
|
buildTooltipContent = (tooltip, fieldData, showFields) => {
|
let content = ``
|
if (tooltip.customContent) {
|
content = tooltip.customContent
|
showFields.forEach(field => {
|
content = content.replace(`\${${field.split('@')[1]}}`, fieldData[field.split('@')[0]])
|
})
|
} else {
|
showFields.forEach(field => {
|
content += `<span style="margin-bottom: 4px">${field.split('@')[1]}: ${
|
fieldData[field.split('@')[0]]
|
}</span><br>`
|
})
|
}
|
return content.replace(/\n/g, '<br>')
|
}
|
|
/**
|
* 构建 label
|
* @param chart
|
* @param configList
|
*/
|
buildLabel = (chart, configList) => {
|
const xAxis = deepCopy(chart.xAxis)
|
|
const customAttr = chart.customAttr ? parseJson(chart.customAttr) : null
|
if (customAttr?.label?.show) {
|
const { label } = customAttr
|
const data = chart.data?.tableRow || []
|
let showFields = label.showFields || []
|
if (!label.showFields || label.showFields.length === 0) {
|
showFields = [
|
...chart.xAxisExt.map(i => `${i.dataeaseName}@${i.name}`),
|
...chart.xAxis.map(i => `${i.dataeaseName}@${i.name}`)
|
]
|
}
|
data.forEach(item => {
|
const fieldData = {
|
...item,
|
...Object.fromEntries(this.mergeDetailsToMap(item.details))
|
}
|
let content = label.customContent || ''
|
|
if (content) {
|
showFields.forEach(field => {
|
const [fieldKey, fieldName] = field.split('@')
|
content = content.replace(`\${${fieldName}}`, fieldData[fieldKey])
|
})
|
} else {
|
content = showFields.map(field => fieldData[field.split('@')[0]]).join(',')
|
}
|
|
content = content.replace(/\n/g, '')
|
item.textLayerContent = content
|
})
|
|
configList.push(
|
new PointLayer()
|
.source(data, {
|
parser: {
|
type: 'json',
|
x: xAxis[0].dataeaseName,
|
y: xAxis[1].dataeaseName
|
}
|
})
|
.shape('textLayerContent', 'text')
|
.color(label.color)
|
.size(label.fontSize)
|
.style({
|
textAllowOverlap: label.fullDisplay,
|
textAnchor: 'center',
|
textOffset: [0, 0],
|
fontFamily: chart.fontFamily ? chart.fontFamily : undefined
|
})
|
)
|
}
|
}
|
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
chart.customAttr.label = {
|
...chart.customAttr.label,
|
show: false
|
}
|
chart.customAttr.basicStyle = {
|
...chart.customAttr.basicStyle,
|
mapSymbolOpacity: 5,
|
mapStyle: 'normal'
|
}
|
return chart
|
}
|
}
|
