地图内部添加卫星图层切换和全屏
This commit is contained in:
parent
d9ae5e3f82
commit
27e3e5354d
@ -7,6 +7,8 @@
|
||||
<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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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: '類型',
|
||||
|
||||
@ -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: '类型',
|
||||
|
||||
@ -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' }
|
||||
]
|
||||
|
||||
|
||||
@ -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<Scene, L7Config> {
|
||||
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<L7Config, Scene>
|
||||
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<Scene, L7Config> {
|
||||
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<Scene, L7Config> {
|
||||
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<Scene, L7Config> {
|
||||
.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<Scene, L7Config> {
|
||||
.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<Scene, L7Config> {
|
||||
.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<Scene, L7Config> {
|
||||
.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<Scene, L7Config> {
|
||||
.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')
|
||||
|
||||
@ -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<Scene, L7Config> {
|
||||
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<L7Config, Scene>
|
||||
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<Scene, L7Config> {
|
||||
}
|
||||
})
|
||||
|
||||
config.once('inited', () => {
|
||||
mapRendered(container)
|
||||
})
|
||||
config.on('inited', () => {
|
||||
qqMapRendered(scene)
|
||||
})
|
||||
|
||||
return new L7Wrapper(scene, config)
|
||||
}
|
||||
|
||||
|
||||
@ -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<Partial<Chart['data']>>({
|
||||
fields: []
|
||||
@ -145,11 +134,8 @@ const clearLinkage = () => {
|
||||
}
|
||||
const reDrawView = () => {
|
||||
linkageActiveHistory.value = false
|
||||
const slider = myChart?.chart?.getController('slider')
|
||||
if (!slider) {
|
||||
myChart?.render()
|
||||
}
|
||||
}
|
||||
const linkageActivePre = () => {
|
||||
if (linkageActiveHistory.value) {
|
||||
reDrawView()
|
||||
@ -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)
|
||||
if (!checkSelected(param)) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
myChart?.setState('selected', param => {
|
||||
if (Array.isArray(param)) {
|
||||
return false
|
||||
} else {
|
||||
return checkSelected(param)
|
||||
}
|
||||
})
|
||||
}
|
||||
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<any, any>) => {
|
||||
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<any, any>) => {
|
||||
|
||||
const dynamicAreaId = ref('')
|
||||
const country = ref('')
|
||||
const appStore = useAppStoreWithOut()
|
||||
const chartContainer = ref<HTMLElement>(null)
|
||||
let scope
|
||||
let mapTimer: number
|
||||
@ -409,21 +334,101 @@ const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView<any, any
|
||||
}
|
||||
|
||||
let mapL7Timer: number
|
||||
let scaleControl: Scale | null = null // 存储比例尺实例
|
||||
let fullscreenControl
|
||||
let satelliteControlInstance = null; // 用于存储卫星控件实例
|
||||
const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, 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) {
|
||||
let checkName = state.pointParam.data.name
|
||||
// 对多维度的处理 取第一个
|
||||
checkName = param.data.dimensionList[0].id
|
||||
}
|
||||
}
|
||||
if (!checkName) {
|
||||
checkName = param.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,17 +602,10 @@ 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 => {
|
||||
chartData.value?.left?.fields?.forEach(item => {
|
||||
const sourceInfo = view.value.id + '#' + item.id
|
||||
if (nowPanelTrackInfo.value[sourceInfo]) {
|
||||
linkageCount++
|
||||
@ -632,11 +614,17 @@ const trackMenu = computed(() => {
|
||||
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 => {
|
||||
chartData.value?.fields?.forEach(item => {
|
||||
const sourceInfo = view.value.id + '#' + item.id
|
||||
if (nowPanelTrackInfo.value[sourceInfo]) {
|
||||
linkageCount++
|
||||
@ -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(() => {
|
||||
|
||||
<template>
|
||||
<div class="canvas-area">
|
||||
<view-track-bar
|
||||
ref="viewTrack"
|
||||
:track-menu="trackMenu"
|
||||
:font-family="fontFamily"
|
||||
:is-data-v-mobile="dataVMobile"
|
||||
class="track-bar"
|
||||
:style="state.trackBarStyle"
|
||||
@trackClick="trackClick"
|
||||
/>
|
||||
<div
|
||||
@wheel.capture="onWheel"
|
||||
v-if="!isError"
|
||||
ref="chartContainer"
|
||||
class="canvas-content"
|
||||
:id="containerId"
|
||||
></div>
|
||||
<view-track-bar ref="viewTrack" :track-menu="trackMenu" :font-family="fontFamily" :is-data-v-mobile="dataVMobile"
|
||||
class="track-bar" :style="state.trackBarStyle" @trackClick="trackClick" />
|
||||
<div v-if="!isError" ref="chartContainer" class="canvas-content" :id="containerId"></div>
|
||||
<chart-error v-else :err-msg="errMsg" />
|
||||
</div>
|
||||
</template>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
: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;
|
||||
|
||||
// }</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user