diff --git a/core/core-frontend/index.html b/core/core-frontend/index.html index a9eba0c..3d0d3c1 100644 --- a/core/core-frontend/index.html +++ b/core/core-frontend/index.html @@ -6,7 +6,9 @@ - +
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue index ba9a248..9f1fbc7 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue @@ -246,6 +246,7 @@ const mapStyleOptions = [ { 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: '卫星地图', value: 'Satellite' }, { name: t('commons.custom'), value: 'custom' } ] const heatMapTypeOptions = [ 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 07ab667..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 @@ -103,37 +103,87 @@ export class FlowMap extends L7ChartView { // 底层 const chartObj = drawOption.chartObj as unknown as L7Wrapper let scene = chartObj?.getScene() - 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){ 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) } } + 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) - scene.once('loaded', () => { - mapRendered(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) 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 9044593..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 @@ -84,7 +84,14 @@ export class HeatMap extends L7ChartView { // 底层 const chartObj = drawOption.chartObj as unknown as L7Wrapper let scene = chartObj?.getScene() - if (!scene) { + 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, @@ -101,20 +108,47 @@ export class HeatMap extends L7ChartView { }) }) } 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) - } - } + 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) - scene.once('loaded', () => { - mapRendered(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) 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 603c9a6..218b986 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 @@ -28,7 +28,7 @@ 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 { ExportImage,Scale } from '@antv/l7' const { t } = useI18n() const dvMainStore = dvMainStoreWithOut() const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, embeddedCallBack, inMobile } = @@ -332,6 +332,8 @@ const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView, callback) => { mapL7Timer && clearTimeout(mapL7Timer) mapL7Timer = setTimeout(async () => { @@ -341,12 +343,25 @@ const renderL7 = async (chart: ChartObj, chartView: L7ChartView, callb chart: chart, action }) + + // 清除已有比例尺 + if (scaleControl) { + myChart.getScene()?.removeControl(scaleControl) + scaleControl = null + } + + // 创建并添加新比例尺 + scaleControl = new Scale({ + position: 'bottomleft', + imperial: false + }) + myChart.getScene()?.addControl(scaleControl) + myChart?.render() callback?.() emit('resetLoading') }, 500) } - const pointClickTrans = () => { if (embeddedCallBack.value === 'yes') { trackClick('pointClick')