import { useI18n } from '@/hooks/web/useI18n'
|
import {
|
L7PlotChartView,
|
L7PlotDrawOptions
|
} from '@/views/chart/components/js/panel/types/impl/l7plot'
|
import { Choropleth, ChoroplethOptions } from '@antv/l7plot/dist/esm/plots/choropleth'
|
import { Dot, DotOptions, IPlotLayer } from '@antv/l7plot'
|
import {
|
MAP_AXIS_TYPE,
|
MAP_EDITOR_PROPERTY,
|
MAP_EDITOR_PROPERTY_INNER,
|
MapMouseEvent
|
} from '@/views/chart/components/js/panel/charts/map/common'
|
import { flow, getGeoJsonFile, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
|
import { cloneDeep, isEmpty } from 'lodash-es'
|
import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
|
import {
|
handleGeoJson,
|
mapRendered,
|
mapRendering
|
} from '@/views/chart/components/js/panel/common/common_antv'
|
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { deepCopy } from '@/utils/utils'
|
import { configCarouselTooltip } from '@/views/chart/components/js/panel/charts/map/tooltip-carousel'
|
import { getCustomGeoArea } from '@/api/map'
|
import { TextLayer } from '@antv/l7plot/dist/esm'
|
import { centroid } from '@turf/centroid'
|
|
const { t } = useI18n()
|
|
/**
|
* 气泡地图
|
*/
|
export class BubbleMap extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
properties: EditorProperty[] = [...MAP_EDITOR_PROPERTY, 'bubble-animate']
|
propertyInner = {
|
...MAP_EDITOR_PROPERTY_INNER,
|
'tooltip-selector': [...MAP_EDITOR_PROPERTY_INNER['tooltip-selector'], 'carousel'],
|
'basic-style-selector': [...MAP_EDITOR_PROPERTY_INNER['basic-style-selector'], 'areaBaseColor']
|
}
|
axis = MAP_AXIS_TYPE
|
axisConfig: AxisConfig = {
|
xAxis: {
|
name: `${t('chart.area')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1
|
},
|
yAxis: {
|
name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1
|
}
|
}
|
constructor() {
|
super('bubble-map')
|
}
|
|
async drawChart(drawOption: L7PlotDrawOptions<Choropleth>): Promise<Choropleth> {
|
const { chart, level, areaId, container, action, scope, gadmName } = drawOption
|
if (!areaId) {
|
return
|
}
|
chart.container = container
|
let geoJson = {} as FeatureCollection
|
let customSubArea: CustomGeoSubArea[] = []
|
let data = chart.data?.data
|
if (areaId.startsWith('custom_')) {
|
customSubArea = (await getCustomGeoArea(areaId)).data || []
|
customSubArea.forEach(a => (a.scopeArr = a.scope?.split(',') || []))
|
geoJson = cloneDeep(await getGeoJsonFile('156'))
|
const areaNameMap = geoJson.features.reduce((p, n) => {
|
p['156' + n.properties.adcode] = n.properties.name
|
return p
|
}, {})
|
const { areaMapping } = parseJson(chart.senior)
|
const areaMap = customSubArea.reduce((p, n) => {
|
const mappedName = areaMapping?.[areaId]?.[n.name]
|
if (mappedName) {
|
n.name = mappedName
|
}
|
p[n.name] = n
|
n.scopeArr = n.scope?.split(',') || []
|
return p
|
}, {})
|
const fakeData = []
|
data?.forEach(d => {
|
const area = areaMap[d.name]
|
if (area) {
|
area.scopeArr.forEach(adcode => {
|
fakeData.push({
|
...d,
|
name: areaNameMap[adcode],
|
field: areaNameMap[adcode],
|
scope: area.scopeArr,
|
areaName: d.name
|
})
|
})
|
}
|
})
|
data = fakeData
|
} else {
|
if (scope) {
|
geoJson = cloneDeep(await getGeoJsonFile('156'))
|
geoJson.features = geoJson.features.filter(f => scope.includes('156' + f.properties.adcode))
|
} else {
|
geoJson = cloneDeep(await getGeoJsonFile(areaId))
|
}
|
}
|
if (areaId.startsWith('geo_') && geoJson?.features?.length) {
|
const levelNames = Object.keys(geoJson?.features[0]?.properties).filter(key =>
|
key.startsWith('NAME_')
|
)
|
const nameKey = levelNames[levelNames.length - 1]
|
geoJson?.features.forEach(item => {
|
if (item.properties[nameKey]) {
|
item.properties['name'] = item.properties[nameKey]
|
}
|
})
|
if (areaId.length > 7) {
|
geoJson.features = geoJson?.features.filter(f => {
|
const names = Object.keys(f.properties)
|
.filter(key => key.startsWith('NAME_'))
|
.map(key => f.properties[key])
|
.filter(Boolean)
|
.join('@')
|
if (isEmpty(names) || !gadmName) {
|
return true
|
}
|
return names.replace(/@[^@]*$/, '') === gadmName
|
})
|
}
|
}
|
let options: ChoroplethOptions = {
|
preserveDrawingBuffer: true,
|
map: {
|
type: 'mapbox',
|
style: 'blank'
|
},
|
geoArea: {
|
type: 'geojson'
|
},
|
source: {
|
data: data || [],
|
joinBy: {
|
sourceField: 'name',
|
geoField: 'name',
|
geoData: geoJson
|
}
|
},
|
viewLevel: {
|
level,
|
adcode: 'all'
|
},
|
autoFit: true,
|
chinaBorder: false,
|
color: {
|
field: 'value'
|
},
|
style: {
|
opacity: 1,
|
lineWidth: 0.6,
|
lineOpacity: 1
|
},
|
label: {
|
field: '_DE_LABEL_',
|
style: {
|
textAnchor: 'center'
|
}
|
},
|
tooltip: {},
|
legend: false,
|
// 禁用线上地图数据
|
customFetchGeoData: () => null
|
}
|
const context: Record<string, any> = { drawOption, geoJson, customSubArea }
|
options = this.setupOptions(chart, options, context)
|
|
const tooltip = deepCopy(options.tooltip)
|
options = { ...options, tooltip: { ...tooltip, showComponent: false } }
|
const view = new Choropleth(container, options)
|
const dotLayer = this.getDotLayer(chart, geoJson, drawOption, customSubArea)
|
if (!areaId.startsWith('custom_')) {
|
dotLayer.options = { ...dotLayer.options, tooltip }
|
}
|
this.configZoomButton(chart, view)
|
mapRendering(container)
|
view.once('loaded', () => {
|
// 修改地图鼠标样式为默认
|
view.scene.map._canvasContainer.lastElementChild.style.cursor = 'default'
|
const { layers } = context
|
if (layers) {
|
layers.forEach(l => {
|
view.addLayer(l)
|
})
|
}
|
dotLayer.addToScene(view.scene)
|
dotLayer.once('add', () => {
|
mapRendered(container)
|
})
|
view.scene.map['keyboard'].disable()
|
dotLayer.on('dotLayer:click', (ev: MapMouseEvent) => {
|
const evData = ev.feature.properties
|
let adcode, scope
|
if (areaId.startsWith('custom_')) {
|
adcode = '156'
|
const area = customSubArea.find(a => a.name === evData.name)
|
scope = area?.scopeArr
|
} else {
|
adcode = view.currentDistrictData.features.find(
|
i => i.properties.name === ev.feature.properties.name
|
)?.properties.adcode
|
}
|
let names = ''
|
if (adcode + '' !== '156' && !areaId.startsWith('156')) {
|
adcode = 'geo_' + adcode
|
names = Object.keys(evData)
|
.filter(key => key.startsWith('NAME_'))
|
.map(key => evData[key])
|
.filter(Boolean)
|
.join('@')
|
}
|
action({
|
x: ev.x,
|
y: ev.y,
|
data: {
|
data: evData,
|
extra: { adcode, scope, gadmName: names }
|
}
|
})
|
})
|
dotLayer.once('loaded', () => {
|
chart.container = container
|
configCarouselTooltip(chart, view, data || [], null, customSubArea, drawOption)
|
})
|
})
|
return view
|
}
|
|
private getDotLayer(
|
chart: Chart,
|
geoJson: FeatureCollection,
|
drawOption: L7PlotDrawOptions<Choropleth>,
|
customSubArea: CustomGeoSubArea[]
|
): IPlotLayer {
|
const { areaId } = drawOption
|
const { basicStyle, tooltip } = parseJson(chart.customAttr)
|
const { bubbleCfg } = parseJson(chart.senior)
|
const { offsetHeight, offsetWidth } = document.getElementById(drawOption.container)
|
const dotData = []
|
const options: DotOptions = {
|
source: {
|
data: dotData,
|
parser: {
|
type: 'json',
|
x: 'x',
|
y: 'y'
|
}
|
},
|
shape: 'circle',
|
size: {
|
field: 'size',
|
value: [5, Math.min(offsetHeight, offsetWidth) / 20]
|
},
|
visible: true,
|
zIndex: 0.05,
|
color: hexColorToRGBA(basicStyle.colors[0], basicStyle.alpha),
|
name: 'bubbleLayer',
|
style: {
|
opacity: 1
|
},
|
state: {
|
active: { color: 'rgba(30,90,255,1)' }
|
},
|
tooltip: {
|
showComponent: tooltip.show
|
}
|
}
|
if (areaId.startsWith('custom_')) {
|
const geoJsonMap = geoJson.features.reduce((p, n) => {
|
if (n.properties['adcode']) {
|
p['156' + n.properties['adcode']] = n
|
}
|
return p
|
}, {})
|
const { areaMapping } = parseJson(chart.senior)
|
const customAreaMap = customSubArea.reduce((p, n) => {
|
const mappedName = areaMapping?.[areaId]?.[n.name]
|
if (mappedName) {
|
n.name = mappedName
|
}
|
p[n.name] = n
|
return p
|
}, {})
|
chart.data?.data?.forEach(d => {
|
const area = customAreaMap[d.name]
|
if (area) {
|
const areaJsonArr = []
|
area.scopeArr?.forEach(adcode => {
|
const json = geoJsonMap[adcode]
|
json && areaJsonArr.push(json)
|
})
|
if (areaJsonArr.length) {
|
const areaJson: FeatureCollection = {
|
type: 'FeatureCollection',
|
features: areaJsonArr
|
}
|
const center = centroid(areaJson)
|
// 轮播用
|
area.centroid = [center.geometry.coordinates[0], center.geometry.coordinates[1]]
|
dotData.push({
|
name: area.name,
|
size: d.value,
|
properties: d,
|
x: center.geometry.coordinates[0],
|
y: center.geometry.coordinates[1]
|
})
|
}
|
}
|
})
|
if (options.tooltip && options.tooltip.showComponent) {
|
options.tooltip.items = ['name', 'adcode', 'value']
|
options.tooltip.customTitle = ({ name }) => {
|
return name
|
}
|
const formatterMap = tooltip.seriesTooltipFormatter
|
?.filter(i => i.show)
|
.reduce((pre, next) => {
|
pre[next.id] = next
|
return pre
|
}, {}) as Record<string, SeriesFormatter>
|
options.tooltip.customItems = originalItem => {
|
const result = []
|
if (isEmpty(formatterMap)) {
|
return result
|
}
|
const head = originalItem.properties
|
const formatter = formatterMap[head.quotaList?.[0]?.id]
|
if (!isEmpty(formatter)) {
|
const originValue = parseFloat(head.value as string)
|
const value = valueFormatter(originValue, formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
result.push({ ...head, name, value: `${value ?? ''}` })
|
}
|
head.dynamicTooltipValue?.forEach(item => {
|
const formatter = formatterMap[item.fieldId]
|
if (formatter) {
|
const value = valueFormatter(parseFloat(item.value), formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName)
|
? formatter.name
|
: formatter.chartShowName
|
result.push({ color: 'grey', name, value: `${value ?? ''}` })
|
}
|
})
|
return result
|
}
|
options.tooltip.domStyles = {
|
'l7plot-tooltip': {
|
'background-color': tooltip.backgroundColor,
|
'font-size': `${tooltip.fontSize}px`,
|
'line-height': 1.6
|
},
|
'l7plot-tooltip__name': {
|
color: tooltip.color
|
},
|
'l7plot-tooltip__value': {
|
color: tooltip.color
|
},
|
'l7plot-tooltip__title': {
|
color: tooltip.color
|
}
|
}
|
}
|
} else {
|
const areaMap = chart.data?.data?.reduce((obj, value) => {
|
obj[value['field']] = { value: value.value, data: value }
|
return obj
|
}, {})
|
geoJson?.features.forEach(item => {
|
const name = item.properties['name']
|
if (areaMap?.[name]?.value) {
|
dotData.push({
|
x: item.properties['centroid'][0],
|
y: item.properties['centroid'][1],
|
size: areaMap[name].value,
|
properties: {
|
...item.properties,
|
...areaMap[name].data
|
},
|
name: name
|
})
|
}
|
})
|
}
|
if (bubbleCfg && bubbleCfg.enable) {
|
return new Dot({
|
...options,
|
size: {
|
field: 'size',
|
value: [10, Math.min(offsetHeight, offsetWidth) / 10]
|
},
|
animate: {
|
enable: true,
|
speed: bubbleCfg.speed,
|
rings: bubbleCfg.rings
|
}
|
})
|
}
|
return new Dot(options)
|
}
|
|
private configBasicStyle(
|
chart: Chart,
|
options: ChoroplethOptions,
|
context: Record<string, any>
|
): ChoroplethOptions {
|
const { areaId }: L7PlotDrawOptions<any> = context.drawOption
|
const geoJson: FeatureCollection = context.geoJson
|
const { basicStyle, label } = parseJson(chart.customAttr)
|
const senior = parseJson(chart.senior)
|
const curAreaNameMapping = senior.areaMapping?.[areaId]
|
handleGeoJson(geoJson, curAreaNameMapping)
|
options.color = basicStyle.areaBaseColor
|
if (!chart.data?.data?.length || !geoJson?.features?.length) {
|
options.label && (options.label.field = 'name')
|
return options
|
}
|
const data = chart.data.data
|
const areaMap = data.reduce((obj, value) => {
|
obj[value['field']] = value.value
|
return obj
|
}, {})
|
geoJson.features.forEach(item => {
|
const name = item.properties['name']
|
// trick, maybe move to configLabel, here for perf
|
if (label.show) {
|
const content = []
|
if (label.showDimension) {
|
content.push(name)
|
}
|
if (label.showQuota) {
|
;(areaMap[name] || areaMap[name] === 0) &&
|
content.push(valueFormatter(areaMap[name], label.quotaLabelFormatter))
|
}
|
item.properties['_DE_LABEL_'] = content.join('\n\n')
|
}
|
})
|
return options
|
}
|
|
protected configCustomArea(
|
chart: Chart,
|
options: ChoroplethOptions,
|
context: Record<string, any>
|
): ChoroplethOptions {
|
const { drawOption, customSubArea, geoJson } = context
|
if (!drawOption.areaId.startsWith('custom_')) {
|
return options
|
}
|
const customAttr = parseJson(chart.customAttr)
|
const { label } = customAttr
|
const data = chart.data?.data
|
const areaMap = data?.reduce((obj, value) => {
|
obj[value['field']] = value
|
return obj
|
}, {})
|
//处理label
|
options.label = {
|
visible: false
|
}
|
if (label.show) {
|
const geoJsonMap = geoJson.features.reduce((p, n) => {
|
if (n.properties['adcode']) {
|
p['156' + n.properties['adcode']] = n
|
}
|
return p
|
}, {})
|
const { areaMapping } = parseJson(chart.senior)
|
const labelLocation = []
|
customSubArea.forEach(area => {
|
const areaJsonArr = []
|
area.scopeArr?.forEach(adcode => {
|
const json = geoJsonMap[adcode]
|
json && areaJsonArr.push(json)
|
})
|
if (areaJsonArr.length) {
|
const areaJson: FeatureCollection = {
|
type: 'FeatureCollection',
|
features: areaJsonArr
|
}
|
const content = []
|
if (label.showDimension) {
|
const mappedName = areaMapping?.[drawOption.areaId]?.[area.name]
|
if (mappedName) {
|
area.name = mappedName
|
}
|
content.push(area.name)
|
}
|
if (label.showQuota) {
|
areaMap[area.name] &&
|
content.push(valueFormatter(areaMap[area.name].value, label.quotaLabelFormatter))
|
}
|
const center = centroid(areaJson)
|
labelLocation.push({
|
name: content.join('\n\n'),
|
x: center.geometry.coordinates[0],
|
y: center.geometry.coordinates[1]
|
})
|
}
|
})
|
const areaLabelLayer = new TextLayer({
|
name: 'areaLabelLayer',
|
source: {
|
data: labelLocation,
|
parser: {
|
type: 'json',
|
x: 'x',
|
y: 'y'
|
}
|
},
|
field: 'name',
|
zIndex: 0.06,
|
style: {
|
fill: label.color,
|
fontSize: label.fontSize,
|
opacity: 1,
|
fontWeight: 'bold',
|
textAnchor: 'center',
|
textAllowOverlap: label.fullDisplay,
|
padding: !label.fullDisplay ? [2, 2] : undefined
|
}
|
})
|
context.layers = [areaLabelLayer]
|
}
|
return options
|
}
|
|
protected setupOptions(
|
chart: Chart,
|
options: ChoroplethOptions,
|
context: Record<string, any>
|
): ChoroplethOptions {
|
return flow(
|
this.configEmptyDataStrategy,
|
this.configLabel,
|
this.configStyle,
|
this.configTooltip,
|
this.configBasicStyle,
|
this.configCustomArea
|
)(chart, options, context, this)
|
}
|
}
|
