From 683fb9660d017f4af93d4930cab1a24d1bcb7aac Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Wed, 7 Aug 2024 10:08:33 +0800 Subject: [PATCH] =?UTF-8?q?style(=E5=9B=BE=E8=A1=A8):=20=E6=B0=94=E6=B3=A1?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=9A=84=E8=A7=A6=E5=8F=91=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96,=E7=94=B1=E5=8E=9F=E6=9D=A5=E7=9A=84?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E8=A7=A6=E5=8F=91=E6=94=B9=E4=B8=BA=E6=B0=94?= =?UTF-8?q?=E6=B3=A1=E8=A7=A6=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/map/bubble-map.ts | 62 ++++++++++--------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts index 4e572803b5..1aa9da276b 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts @@ -1,26 +1,19 @@ -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 { DotLayer, IPlotLayer } from '@antv/l7plot' -import { DotLayerOptions } from '@antv/l7plot/dist/esm/layers/dot-layer/types' +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 } 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 {flow, getGeoJsonFile, hexColorToRGBA, parseJson} from '@/views/chart/components/js/util' +import {cloneDeep} 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' const { t } = useI18n() @@ -91,9 +84,6 @@ export class BubbleMap extends L7PlotChartView { textAnchor: 'center' } }, - state: { - active: { stroke: 'green', lineWidth: 1 } - }, tooltip: {}, legend: false, // 禁用线上地图数据 @@ -101,24 +91,33 @@ export class BubbleMap extends L7PlotChartView { } const context = { drawOption, geoJson } options = this.setupOptions(chart, options, context) + + const tooltip = deepCopy(options.tooltip) + options = { ...options, tooltip: false } const view = new Choropleth(container, options) const dotLayer = this.getDotLayer(chart, geoJson, drawOption) + dotLayer.options = { ...dotLayer.options, tooltip } this.configZoomButton(chart, view) mapRendering(container) view.once('loaded', () => { - view.addLayer(dotLayer) + // 修改地图鼠标样式为默认 + view.scene.map._canvasContainer.lastElementChild.style.cursor = 'default' + dotLayer.addToScene(view.scene) dotLayer.once('add', () => { mapRendered(container) }) view.scene.map['keyboard'].disable() - view.on('fillAreaLayer:click', (ev: MapMouseEvent) => { + dotLayer.on('dotLayer:click', (ev: MapMouseEvent) => { const data = ev.feature.properties + const adcode = view.currentDistrictData.features.find( + i => i.properties.name === ev.feature.properties.name + )?.properties.adcode action({ x: ev.x, y: ev.y, data: { data, - extra: { adcode: data.adcode } + extra: { adcode: adcode } } }) }) @@ -132,24 +131,26 @@ export class BubbleMap extends L7PlotChartView { drawOption: L7PlotDrawOptions ): IPlotLayer { const areaMap = chart.data?.data?.reduce((obj, value) => { - obj[value['field']] = value.value + obj[value['field']] = { value: value.value, data: value } return obj }, {}) const dotData = [] geoJson.features.forEach(item => { const name = item.properties['name'] - if (areaMap?.[name]) { + if (areaMap?.[name]?.value) { dotData.push({ x: item.properties['centroid'][0], y: item.properties['centroid'][1], - size: areaMap[name] + size: areaMap[name].value, + properties: areaMap[name].data, + name: name }) } }) const { basicStyle } = parseJson(chart.customAttr) const { bubbleCfg } = parseJson(chart.senior) const { offsetHeight, offsetWidth } = document.getElementById(drawOption.container) - const options: DotLayerOptions = { + const options: DotOptions = { source: { data: dotData, parser: { @@ -172,10 +173,11 @@ export class BubbleMap extends L7PlotChartView { }, state: { active: true - } + }, + tooltip: {} } if (bubbleCfg && bubbleCfg.enable) { - return new DotLayer({ + return new Dot({ ...options, size: { field: 'size', @@ -188,7 +190,7 @@ export class BubbleMap extends L7PlotChartView { } }) } - return new DotLayer(options) + return new Dot(options) } private configBasicStyle(