ThbTech/gis-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

流向地图和热力地图的比例尺添加和卫星图层的切换

Browse Source
This commit is contained in:
wangxk 2025-06-05 09:39:08 +08:00
parent ac50f51518
commit 4a3f8509bd
5 changed files with 143 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/core-frontend/index.html
View File

@ -6,7 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<script
src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY&plugin=AMap.TileLayer.Satellite">
</script>
<body>
<div id="app"></div>
<script type="module" src="/src/pages/index/main.ts"></script>

1
core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
View File

@ -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 = [

100
core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts
View File

@ -103,37 +103,87 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
// 底层
const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene>
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)

60
core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts
View File

@ -84,7 +84,14 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
// 底层
const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene>
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<Scene, L7Config> {
})
})
} 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)

19
core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
View File

@ -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<any, any
}
let mapL7Timer: number
let scaleControl: Scale | null = null // 存储比例尺实例
const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, callback) => {
mapL7Timer && clearTimeout(mapL7Timer)
mapL7Timer = setTimeout(async () => {
@ -341,12 +343,25 @@ const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, 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')