diff --git a/core/core-frontend/index.html b/core/core-frontend/index.html index 82a8495..2679d00 100644 --- a/core/core-frontend/index.html +++ b/core/core-frontend/index.html @@ -7,6 +7,8 @@ +
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts index 6f0a740..0ca238f 100644 --- a/core/core-frontend/src/locales/en.ts +++ b/core/core-frontend/src/locales/en.ts @@ -1881,6 +1881,7 @@ export default { map_style_fresh: 'Grass green', map_style_grey: 'Gray', map_style_blue: 'Indigo blue', + map_style_translate:'Satellite map', map_style_darkblue: 'Polar night blue', map_line_type: 'Type', type: 'Type', diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index 9bee08b..239a5b7 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/core/core-frontend/src/locales/tw.ts @@ -1833,6 +1833,7 @@ export default { map_style_fresh: '草色青', map_style_grey: '雅士灰', map_style_blue: '靛青藍', + map_style_translate:'衛星地圖', map_style_darkblue: '極夜藍', map_line_type: '類型', type: '類型', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index b2f2758..86ef5b5 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -1838,6 +1838,7 @@ export default { map_style_fresh: '草色青', map_style_grey: '雅士灰', map_style_blue: '靛青蓝', + map_style_translate:'卫星地图', map_style_darkblue: '极夜蓝', map_line_type: '类型', type: '类型', diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts index e9de26b..660526d 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts @@ -63,6 +63,7 @@ export const gaodeMapStyleOptions = [ { name: t('chart.map_style_fresh'), value: 'fresh' }, { name: t('chart.map_style_grey'), value: 'grey' }, { name: t('chart.map_style_blue'), value: 'blue' }, + { name: t('chart.map_style_translate'), value: 'Satellite' }, { name: t('commons.custom'), value: 'custom' } ] diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts index 286d938..e53d3de 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts @@ -8,16 +8,12 @@ import { 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 { GaodeMap } from '@antv/l7-maps' 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' +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() /** @@ -92,16 +88,103 @@ export class FlowMap extends L7ChartView { 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'}` + } const mapKey = await this.getMapKey() - const mapStyle = getMapStyle(mapKey, basicStyle) // 底层 const chartObj = drawOption.chartObj as unknown as L7Wrapper 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(scene){ + if (scene.getLayers()?.length) { + await scene.removeAllLayer() + scene.setPitch(misc.mapPitch) + } + } + if (mapStyle.indexOf('Satellite') == -1) { + scene = new Scene({ + id: container, + logoVisible: false, + map: new GaodeMap({ + token: mapKey?.key ?? undefined, + style: mapStyle, + pitch: misc.mapPitch, + center, + zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined, + showLabel: !(basicStyle.showLabel === false), + WebGLParams: { + preserveDrawingBuffer: true + } + }) + }) + }else{ + scene = new Scene({ + id: container, + logoVisible: false, + map: new GaodeMap({ + token: mapKey?.key ?? undefined, + style: mapStyle, + features: ['bg', 'road'], // 必须开启路网层 + plugin: ['AMap.TileLayer.Satellite'], // 显式声明卫星图层 + WebGLParams: { + preserveDrawingBuffer: true + } + }) + }) + } + // if (!scene) { + // scene = new Scene({ + // id: container, + // logoVisible: false, + // map: new GaodeMap({ + // token: mapKey?.key ?? undefined, + // style: mapStyle, + // pitch: misc.mapPitch, + // center: basicStyle.autoFit === false ? center : undefined, + // zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined, + // showLabel: !(basicStyle.showLabel === false), + // WebGLParams: { + // preserveDrawingBuffer: true + // } + // }) + // }) + // } else { + // if (scene.getLayers()?.length) { + // await scene.removeAllLayer() + // scene.setPitch(misc.mapPitch) + // scene.setMapStyle(mapStyle) + // scene.map.showLabel = !(basicStyle.showLabel === false) + // } + // if (basicStyle.autoFit === false) { + // scene.setZoomAndCenter(basicStyle.zoomLevel, center) + // } + // } + mapRendering(container) + if (mapStyle.indexOf('Satellite') == -1) { + scene.once('loaded', () => { + mapRendered(container) + }) + } else { + scene.once('loaded', () => { + // 创建卫星图层实例 + const satelliteLayer = new AMap.TileLayer.Satellite() + // 与矢量图层叠加显示 + satelliteLayer.setMap(scene.map) + mapRendered(container) + }) + } + // scene.once('loaded', () => { + // mapRendered(container) + // }) + this.configZoomButton(chart, scene) if (xAxis?.length < 2 || xAxisExt?.length < 2) { return new L7Wrapper(scene, undefined) } @@ -112,11 +195,6 @@ export class FlowMap extends L7ChartView { 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) } @@ -143,13 +221,13 @@ export class FlowMap extends L7ChartView { let lineWidthField = null const yAxis = deepCopy(chart.yAxis) if (yAxis.length > 0) { - lineWidthField = yAxis[0].gisbiName + lineWidthField = yAxis[0].dataeaseName } // 线条颜色 let lineColorField = null const yAxisExt = deepCopy(chart.yAxisExt) if (yAxisExt.length > 0) { - lineColorField = yAxisExt[0].gisbiName + lineColorField = yAxisExt[0].dataeaseName } const asteriskField = '*' const data = [] @@ -173,10 +251,10 @@ export class FlowMap extends L7ChartView { .source(data, { parser: { type: 'json', - x: xAxis[0].gisbiName, - y: xAxis[1].gisbiName, - x1: xAxisExt[0].gisbiName, - y1: xAxisExt[1].gisbiName + x: xAxis[0].dataeaseName, + y: xAxis[1].dataeaseName, + x1: xAxisExt[0].dataeaseName, + y1: xAxisExt[1].dataeaseName } }) .size(flowLineStyle.size) @@ -226,11 +304,11 @@ export class FlowMap extends L7ChartView { .source(chart.data?.tableRow, { parser: { type: 'json', - x: xAxis[0].gisbiName, - y: xAxis[1].gisbiName + x: xAxis[0].dataeaseName, + y: xAxis[1].dataeaseName } }) - .shape(flowMapStartName[0].gisbiName, args => { + .shape(flowMapStartName[0].dataeaseName, args => { if (has.has('from-' + args)) { return '' } @@ -254,11 +332,11 @@ export class FlowMap extends L7ChartView { .source(chart.data?.tableRow, { parser: { type: 'json', - x: xAxisExt[0].gisbiName, - y: xAxisExt[1].gisbiName + x: xAxisExt[0].dataeaseName, + y: xAxisExt[1].dataeaseName } }) - .shape(flowMapEndName[0].gisbiName, args => { + .shape(flowMapEndName[0].dataeaseName, args => { if (has.has('from-' + args) || has.has('to-' + args)) { return '' } @@ -287,8 +365,8 @@ export class FlowMap extends L7ChartView { .source(chart.data?.tableRow, { parser: { type: 'json', - x: xAxis[0].gisbiName, - y: xAxis[1].gisbiName + x: xAxis[0].dataeaseName, + y: xAxis[1].dataeaseName } }) .shape('circle') @@ -301,8 +379,8 @@ export class FlowMap extends L7ChartView { .source(chart.data?.tableRow, { parser: { type: 'json', - x: xAxisExt[0].gisbiName, - y: xAxisExt[1].gisbiName + x: xAxisExt[0].dataeaseName, + y: xAxisExt[1].dataeaseName } }) .shape('circle') diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts index e36ad9e..088db46 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts @@ -8,16 +8,11 @@ import { import { MAP_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/map/common' import { flow, parseJson } from '@/views/chart/components/js/util' import { deepCopy } from '@/utils/utils' +import { GaodeMap } from '@antv/l7-maps' import { Scene } from '@antv/l7-scene' import { HeatmapLayer } from '@antv/l7-layers' import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart' -import { - getMapCenter, - getMapScene, - getMapStyle, - mapRendered, - qqMapRendered -} from '@/views/chart/components/js/panel/common/common_antv' +import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv' const { t } = useI18n() /** @@ -74,31 +69,94 @@ export class HeatMap extends L7ChartView { 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'}` + } const mapKey = await this.getMapKey() - const mapStyle = getMapStyle(mapKey, basicStyle) // 底层 const chartObj = drawOption.chartObj as unknown as L7Wrapper let scene = chartObj?.getScene() - const center = getMapCenter(basicStyle) - scene = await getMapScene( - chart, - scene, - container, - mapKey, - basicStyle, - miscStyle, - mapStyle, - center - ) - this.configZoomButton(chart, scene, mapKey) + if(scene){ + if (scene.getLayers()?.length) { + await scene.removeAllLayer() + scene.setPitch(miscStyle.mapPitch) + } + } + + if (mapStyle.indexOf('Satellite') == -1) { + scene = new Scene({ + id: container, + logoVisible: false, + map: new GaodeMap({ + token: mapKey?.key ?? undefined, + style: mapStyle, + pitch: miscStyle.mapPitch, + center, + zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined, + showLabel: !(basicStyle.showLabel === false), + WebGLParams: { + preserveDrawingBuffer: true + } + }) + }) + } else { + scene = new Scene({ + id: container, + logoVisible: false, + map: new GaodeMap({ + token: mapKey?.key ?? undefined, + style: mapStyle, + features: ['bg', 'road'], // 必须开启路网层 + plugin: ['AMap.TileLayer.Satellite'], // 显式声明卫星图层 + WebGLParams: { + preserveDrawingBuffer: true + } + }) + }) + } + + // } else { + // // if (scene.getLayers()?.length) { + // await scene.removeAllLayer() + // scene.setPitch(miscStyle.mapPitch) + // scene.setMapStyle(mapStyle) + // scene.map.showLabel = !(basicStyle.showLabel === false) + // if (basicStyle.autoFit === false) { + // scene.setZoomAndCenter(basicStyle.zoomLevel, center) + // } + // // } + // } + mapRendering(container) + if (mapStyle.indexOf('Satellite') == -1) { + scene.once('loaded', () => { + mapRendered(container) + }) + } else { + scene.once('loaded', () => { + // 创建卫星图层实例 + const satelliteLayer = new AMap.TileLayer.Satellite() + // 与矢量图层叠加显示 + satelliteLayer.setMap(scene.map) + mapRendered(container) + }) + } + + this.configZoomButton(chart, scene) if (xAxis?.length < 2 || yAxis?.length < 1) { return new L7Wrapper(scene, undefined) } const config: L7Config = new HeatmapLayer({ name: 'line', blend: 'normal', - autoFit: !(basicStyle.autoFit === false), - zIndex: 10 + autoFit: !(basicStyle.autoFit === false) }) .source(chart.data?.data, { parser: { @@ -119,13 +177,6 @@ export class HeatMap extends L7ChartView { } }) - config.once('inited', () => { - mapRendered(container) - }) - config.on('inited', () => { - qqMapRendered(scene) - }) - return new L7Wrapper(scene, config) } diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue index 3a02ffe..1a953c9 100644 --- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue +++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue @@ -14,11 +14,12 @@ import { ChartLibraryType } from '@/views/chart/components/js/panel/types' import { G2PlotChartView } from '@/views/chart/components/js/panel/types/impl/g2plot' import { L7PlotChartView } from '@/views/chart/components/js/panel/types/impl/l7plot' import chartViewManager from '@/views/chart/components/js/panel' +import { useAppStoreWithOut } from '@/store/modules/app' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import ViewTrackBar from '@/components/visualization/ViewTrackBar.vue' import { storeToRefs } from 'pinia' import { parseJson } from '@/views/chart/components/js/util' -import { defaultsDeep, cloneDeep, concat } from 'lodash-es' +import { defaultsDeep, cloneDeep } from 'lodash-es' import ChartError from '@/views/chart/components/views/components/ChartError.vue' import { BASE_VIEW_CONFIG } from '../../editor/util/chart' import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle' @@ -27,8 +28,8 @@ import { isDashboard, trackBarStyleCheck } from '@/utils/canvasUtils' import { useEmitt } from '@/hooks/web/useEmitt' import { L7ChartView } from '@/views/chart/components/js/panel/types/impl/l7' import { useI18n } from '@/hooks/web/useI18n' -import { ExportImage } from '@antv/l7' -import { configEmptyDataStyle } from '@/views/chart/components/js/panel/common/common_antv' +import { ExportImage, Scale, Fullscreen, Control, Scene, TileLayer } from '@antv/l7' +import { GaodeMap } from '@antv/l7-maps'; const { t } = useI18n() const dvMainStore = dvMainStoreWithOut() const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, embeddedCallBack, inMobile } = @@ -75,11 +76,6 @@ const props = defineProps({ type: String, required: false, default: 'inherit' - }, - active: { - type: Boolean, - required: false, - default: true } }) @@ -94,14 +90,6 @@ const emit = defineEmits([ const g2TypeSeries1 = ['bidirectional-bar'] const g2TypeSeries0 = ['bar-range'] const g2TypeTree = ['circle-packing'] -const g2TypeStack = [ - 'bar-stack', - 'bar-group-stack', - 'percentage-bar-stack', - 'bar-stack-horizontal', - 'percentage-bar-stack-horizontal' -] -const g2TypeGroup = ['bar-group'] const { view, showPosition, scale, terminal, suffixId } = toRefs(props) @@ -124,7 +112,8 @@ const state = reactive({ }, linkageActiveParam: null, pointParam: null, - data: { fields: [] } // 图表数据 + data: { fields: [] }, // 图表数据 + satelliteVisible: false, // 新增卫星图层状态 }) let chartData = shallowRef>({ fields: [] @@ -145,10 +134,7 @@ const clearLinkage = () => { } const reDrawView = () => { linkageActiveHistory.value = false - const slider = myChart?.chart?.getController('slider') - if (!slider) { - myChart?.render() - } + myChart?.render() } const linkageActivePre = () => { if (linkageActiveHistory.value) { @@ -160,103 +146,43 @@ const linkageActivePre = () => { } const linkageActive = () => { linkageActiveHistory.value = true - myChart?.setState('active', () => true, false) - myChart?.setState('inactive', () => true, false) - myChart?.setState('selected', () => true, false) myChart?.setState('active', param => { if (Array.isArray(param)) { return false } else { - return checkSelected(param) + if (checkSelected(param)) { + return true + } } }) myChart?.setState('inactive', param => { if (Array.isArray(param)) { return false } else { - return !checkSelected(param) - } - }) - myChart?.setState('selected', param => { - if (Array.isArray(param)) { - return false - } else { - return checkSelected(param) + if (!checkSelected(param)) { + return true + } } }) } const checkSelected = param => { - // 获取当前视图的所有联动字段ID - const mappingFieldIds = Array.from( - new Set( - (view.value.type.includes('chart-mix') - ? concat(chartData.value?.left?.fields, chartData.value?.right?.fields) - : chartData.value?.fields - ) - .map(item => item?.id) - .filter(id => - Object.keys(nowPanelTrackInfo.value).some( - key => key.startsWith(view.value.id) && key.split('#')[1] === id - ) - ) - ) - ) - // 维度字段匹配 - const [xAxis, xAxisExt, extStack] = ['xAxis', 'xAxisExt', 'extStack'].map(key => - view.value[key].find(item => mappingFieldIds.includes(item.id)) - ) - // 选中字段数据 - const { group, name, category } = state.linkageActiveParam - // 选中字段数据匹配 if (g2TypeSeries1.includes(view.value.type)) { - return name === param.field + return state.linkageActiveParam.name === param.field } else if (g2TypeSeries0.includes(view.value.type)) { - return category === param.category + return state.linkageActiveParam.category === param.category } else if (g2TypeTree.includes(view.value.type)) { - if (param.path?.startsWith(name) || name === t('commons.all')) { + if ( + param.path?.startsWith(state.linkageActiveParam.name) || + state.linkageActiveParam.name === t('commons.all') + ) { return true } - return name === param.name - } else if (g2TypeGroup.includes(view.value.type)) { - const isNameMatch = name === param.name || (name === 'NO_DATA' && !param.name) - const isCategoryMatch = category === param.category - if (xAxis && xAxisExt) { - return isNameMatch && isCategoryMatch - } - if (xAxis && !xAxisExt) { - return isNameMatch - } - if (!xAxis && xAxisExt) { - return isCategoryMatch - } - return false - } else if (g2TypeStack.includes(view.value.type)) { - const isGroupMatch = group === param.group || (group === 'NO_DATA' && !param.group) - const isNameMatch = name === param.name || (name === 'NO_DATA' && !param.name) - const isCategoryMatch = category === param.category - // 全部匹配 - if (xAxis && xAxisExt && extStack) { - return isNameMatch && isGroupMatch && isCategoryMatch - } - // 只匹配到维度 - if (xAxis && !xAxisExt && !extStack) { - return isNameMatch - } else if (!xAxis && xAxisExt && !extStack) { - return isGroupMatch - } else if (!xAxis && !xAxisExt && extStack) { - return isCategoryMatch - } else if (xAxis && xAxisExt && !extStack) { - return isNameMatch && isGroupMatch - } else if (xAxis && !xAxisExt && extStack) { - return isNameMatch && isCategoryMatch - } else if (!xAxis && xAxisExt && extStack) { - return isGroupMatch && isCategoryMatch - } else { - return false - } + return state.linkageActiveParam.name === param.name } else { return ( - (name === param.name || (name === 'NO_DATA' && !param.name)) && category === param.category + (state.linkageActiveParam.name === param.name || + (state.linkageActiveParam.name === 'NO_DATA' && !param.name)) && + state.linkageActiveParam.category === param.category ) } } @@ -350,8 +276,6 @@ const renderG2Plot = async (chart, chartView: G2PlotChartView) => { g2Timer && clearTimeout(g2Timer) g2Timer = setTimeout(async () => { try { - // 在这里清理掉之前图表的空dom - configEmptyDataStyle([1], containerId) myChart?.destroy() myChart = await chartView.drawChart({ chartObj: myChart, @@ -373,6 +297,7 @@ const renderG2Plot = async (chart, chartView: G2PlotChartView) => { const dynamicAreaId = ref('') const country = ref('') +const appStore = useAppStoreWithOut() const chartContainer = ref(null) let scope let mapTimer: number @@ -409,21 +334,101 @@ const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView, callback) => { - mapL7Timer && clearTimeout(mapL7Timer) + mapL7Timer && clearTimeout(mapL7Timer); mapL7Timer = setTimeout(async () => { myChart = await chartView.drawChart({ chartObj: myChart, container: containerId, chart: chart, action - }) - myChart?.render() - callback?.() - emit('resetLoading') - }, 500) -} + }); + // 清除已有比例尺 + if (!scaleControl) { + scaleControl = new Scale({ + position: 'bottomleft', + imperial: false + }); + myChart.getScene()?.addControl(scaleControl); + } + + // 创建并添加新比例尺 + + + // 添加全屏控件 + if (fullscreenControl) { + + } else { + fullscreenControl = new Fullscreen({ + position: 'bottomright', + }); + myChart.getScene()?.addControl(fullscreenControl, 'bottomright'); + } + + + // ====== 使用高德地图原生API实现卫星图层切换 ====== + let satelliteLayer: any = null; + let isSatelliteVisible = false; + + class SatelliteControl extends Control { + protected onAdd() { + const btn = document.createElement('button'); + btn.className = 'l7-control-button l7-satellite-control'; + btn.innerHTML = '卫星'; + // btn.title = '切换到卫星视图'; + btn.style.backgroundColor = '#000'; + btn.style.color = '#fff'; + btn.style.padding = '2px'; + btn.style.borderRadius = '4px'; + btn.style.cursor = 'pointer' + btn.style.fontSize = '11px'; + const scene = myChart.getScene() + // 确保地图加载完成 + scene.on('loaded', () => { + // 创建高德卫星图层 + satelliteLayer = new window.AMap.TileLayer.Satellite(); + btn.onclick = () => { + isSatelliteVisible = !isSatelliteVisible; + + if (isSatelliteVisible) { + // 使用 scene.addLayer 方法添加卫星图层 + btn.style.backgroundColor = '#409eff'; + scene.map.add(satelliteLayer) + } else { + // 使用 scene.removeLayer 方法移除卫星图层 + btn.style.backgroundColor = '#000'; + scene.map.remove(satelliteLayer) + + } + }; + }); + + return btn; + } + } + + // 添加控件到地图 + // 移除之前的卫星控件（如果存在） + if (satelliteControlInstance) { + + } else { + // 添加新的卫星控件到地图 + satelliteControlInstance = new SatelliteControl({ position: 'bottomright' }); + myChart.getScene()?.addControl(satelliteControlInstance); + } + + + // ====== 修复完成 ====== + + myChart?.render(); + callback?.(); + emit('resetLoading'); + }, 500); +}; const pointClickTrans = () => { if (embeddedCallBack.value === 'yes') { trackClick('pointClick') @@ -437,8 +442,11 @@ const actionDefault = param => { if (param.from === 'word-cloud') { emitter.emit('word-cloud-default-data-range', param) } - if (param.from === 'gauge' || param.from === 'liquid') { - emitter.emit('gauge-liquid-y-value', param) + if (param.from === 'gauge') { + emitter.emit('gauge-default-data', param) + } + if (param.from === 'liquid') { + emitter.emit('liquid-default-data', param) } } @@ -458,8 +466,7 @@ const action = param => { // 下钻 联动 跳转 state.linkageActiveParam = { category: state.pointParam.data.category ? state.pointParam.data.category : 'NO_DATA', - name: state.pointParam.data.name ? state.pointParam.data.name : 'NO_DATA', - group: state.pointParam.data.group ? state.pointParam.data.group : 'NO_DATA' + name: state.pointParam.data.name ? state.pointParam.data.name : 'NO_DATA' } if (trackMenu.value.length < 2) { // 只有一个事件直接调用 @@ -489,7 +496,7 @@ const action = param => { state.trackBarStyle.top = trackBarY + 'px' } - viewTrack.value.trackButtonClick(view.value.id) + viewTrack.value.trackButtonClick() } } @@ -498,28 +505,10 @@ const trackClick = trackAction => { if (!param?.data?.dimensionList) { return } - let checkName = undefined - if (param.data.dimensionList.length > 1) { - // 分组堆叠处理 去能比较出来值的那个维度 - if (view.value.type === 'bar-group-stack') { - const length = param.data.dimensionList.length - // 存在最后一个id - if (param.data.dimensionList[length - 1].id === param.data.dimensionList[length - 2].id) { - param.data.dimensionList.pop() - } - param.data.dimensionList.forEach(dimension => { - if (dimension.value === param.data.category) { - checkName = dimension.id - } - }) - } - if (!checkName) { - // 对多维度的处理 取第一个 - checkName = param.data.dimensionList[0].id - } - } - if (!checkName) { - checkName = param.data.name + let checkName = state.pointParam.data.name + // 对多维度的处理 取第一个 + if (state.pointParam.data.dimensionList.length > 1) { + checkName = state.pointParam.data.dimensionList[0].id } // 跳转字段处理 let jumpName = state.pointParam.data.name @@ -558,7 +547,7 @@ const trackClick = trackAction => { } } let quotaList = state.pointParam.data.quotaList - if (['bar-range', 'bullet-graph'].includes(curView.type)) { + if (['bar-range'].includes(curView.type)) { quotaList = state.pointParam.data.dimensionList } else { quotaList[0]['value'] = state.pointParam.data.value @@ -613,38 +602,37 @@ const trackMenu = computed(() => { let trackMenuInfo = [] // 复用、放大状态的仪表板不进行联动、跳转和下钻的动作 if (!['multiplexing', 'viewDialog'].includes(showPosition.value)) { - let drillFields = - curView?.drill && curView?.drillFilters?.length - ? curView.drillFilters.map(item => item.fieldId) - : [] let linkageCount = 0 let jumpCount = 0 if (curView?.type?.includes('chart-mix')) { - Array.of('left', 'right').forEach(side => { - chartData.value?.[side]?.fields - ?.filter(item => !drillFields.includes(item.id)) - .forEach(item => { - const sourceInfo = view.value.id + '#' + item.id - if (nowPanelTrackInfo.value[sourceInfo]) { - linkageCount++ - } - if (nowPanelJumpInfo.value[sourceInfo]) { - jumpCount++ - } - }) + chartData.value?.left?.fields?.forEach(item => { + const sourceInfo = view.value.id + '#' + item.id + if (nowPanelTrackInfo.value[sourceInfo]) { + linkageCount++ + } + if (nowPanelJumpInfo.value[sourceInfo]) { + jumpCount++ + } + }) + chartData.value?.right?.fields?.forEach(item => { + const sourceInfo = view.value.id + '#' + item.id + if (nowPanelTrackInfo.value[sourceInfo]) { + linkageCount++ + } + if (nowPanelJumpInfo.value[sourceInfo]) { + jumpCount++ + } }) } else { - chartData.value?.fields - ?.filter(item => !drillFields.includes(item.id)) - .forEach(item => { - const sourceInfo = view.value.id + '#' + item.id - if (nowPanelTrackInfo.value[sourceInfo]) { - linkageCount++ - } - if (nowPanelJumpInfo.value[sourceInfo]) { - jumpCount++ - } - }) + chartData.value?.fields?.forEach(item => { + const sourceInfo = view.value.id + '#' + item.id + if (nowPanelTrackInfo.value[sourceInfo]) { + linkageCount++ + } + if (nowPanelJumpInfo.value[sourceInfo]) { + jumpCount++ + } + }) } jumpCount && view.value?.jumpActive && @@ -694,7 +682,7 @@ const canvas2Picture = (pictureData, online) => { mapDom.appendChild(imgDom) } const preparePicture = id => { - if (id !== curView?.id) { + if (id !== curView.id) { return } const chartView = chartViewManager.getChartView(curView.render, curView.type) @@ -718,7 +706,7 @@ const preparePicture = id => { } } const unPreparePicture = id => { - if (id !== curView?.id) { + if (id !== curView.id) { return } const chartView = chartViewManager.getChartView(curView.render, curView.type) @@ -746,7 +734,6 @@ defineExpose({ trackMenu, clearLinkage }) -let intersectionObserver let resizeObserver const TOLERANCE = 0.01 const RESIZE_MONITOR_CHARTS = ['map', 'bubble-map', 'flow-map', 'heat-map'] @@ -771,32 +758,13 @@ onMounted(() => { preSize[1] = size.blockSize }) resizeObserver.observe(containerDom) - intersectionObserver = new IntersectionObserver(([entry]) => { - if (RESIZE_MONITOR_CHARTS.includes(view.value.type)) { - return - } - if (entry.intersectionRatio <= 0) { - myChart?.emit('tooltip:hidden') - } - }) - intersectionObserver.observe(containerDom) useEmitt({ name: 'l7-prepare-picture', callback: preparePicture }) useEmitt({ name: 'l7-unprepare-picture', callback: unPreparePicture }) }) -const MAP_CHARTS = ['map', 'bubble-map', 'flow-map', 'heat-map', 'symbolic-map'] -const onWheel = (e: WheelEvent) => { - if (!MAP_CHARTS.includes(view.value.type)) { - return - } - if (!props.active) { - e.stopPropagation() - } -} onBeforeUnmount(() => { try { myChart?.destroy() resizeObserver?.disconnect() - intersectionObserver?.disconnect() } catch (e) { console.warn(e) } @@ -805,22 +773,9 @@ onBeforeUnmount(() => { @@ -831,12 +786,32 @@ onBeforeUnmount(() => { width: 100%; height: 100%; z-index: 0; + .canvas-content { width: 100% !important; height: 100% !important; + :deep(.g2-tooltip) { position: fixed !important; } } } - + +:deep(.l7-button-control) { + background-color: #000000 !important; +} + +:deep(.l7-button-control:not(:disabled):hover) { + background-color: #000000d5 !important; +} + +:deep(.l7-button-control .l7-iconfont) { + fill: #fff !important; + color: #fff !important; +} + +// :deep(.l7-control-container .l7-top) { +// top: auto !important; +// bottom: 133px !important; + +// }