This commit is contained in:
jingna 2025-07-28 15:23:30 +08:00
commit 3feade3b26
11 changed files with 1088 additions and 1707 deletions

View File

@ -3,4 +3,6 @@ import request from '@/config/axios'
export const queryMapKeyApi = () => request.get({ url: '/sysParameter/queryOnlineMap' }) export const queryMapKeyApi = () => request.get({ url: '/sysParameter/queryOnlineMap' })
export const queryMapKeyApiByType = (type: string) => export const queryMapKeyApiByType = (type: string) =>
request.get({ url: `/sysParameter/queryOnlineMap/${type}` }) request.get({ url: `/sysParameter/queryOnlineMap/${type}` })
export const getMapServer = (id: string) =>
request.get({ url: `/dataVisualization/getMapServer/${id}` })
export const saveMapKeyApi = data => request.post({ url: '/sysParameter/saveOnlineMap', data }) export const saveMapKeyApi = data => request.post({ url: '/sysParameter/saveOnlineMap', data })

View File

@ -387,7 +387,7 @@ const boardMoveActive = computed(() => {
'heat-map', 'heat-map',
't-heatmap', 't-heatmap',
'circle-packing', 'circle-packing',
'three-map' 'three-map',
] ]
return element.value.isPlugin || CHARTS.includes(element.value.innerType) return element.value.isPlugin || CHARTS.includes(element.value.innerType)
}) })

View File

@ -177,7 +177,7 @@ const state = reactive({
'flow-map', 'flow-map',
'bidirectional-bar', 'bidirectional-bar',
'symbolic-map', 'symbolic-map',
'three-map' 'three-map',
], ],
linkageExcludeViewType: [ linkageExcludeViewType: [
'richTextView', 'richTextView',
@ -189,7 +189,7 @@ const state = reactive({
'flow-map', 'flow-map',
'bidirectional-bar', 'bidirectional-bar',
'symbolic-map', 'symbolic-map',
'three-map' 'three-map',
], ],
copyData: null, copyData: null,
hyperlinksSetVisible: false, hyperlinksSetVisible: false,

View File

@ -1528,6 +1528,7 @@ export default {
export_details: 'Export details', export_details: 'Export details',
chart_data: 'Data', chart_data: 'Data',
chart_style: 'Style', chart_style: 'Style',
chart_base:'base map',
drag_block_type_axis: 'Category axis', drag_block_type_axis: 'Category axis',
drag_block_type_axis_left: 'Left subcategory', drag_block_type_axis_left: 'Left subcategory',
drag_block_type_axis_right: 'Right subcategory', drag_block_type_axis_right: 'Right subcategory',
@ -1968,6 +1969,9 @@ export default {
hide: 'Hide', hide: 'Hide',
show_label: 'Show label', show_label: 'Show label',
security_code: 'Security key', security_code: 'Security key',
map_interface:'url',
layer_name:'Layer Name',
update_base:'Update base map',
auto_fit: 'Adaptive zoom', auto_fit: 'Adaptive zoom',
zoom_level: 'Zoom level', zoom_level: 'Zoom level',
central_point: 'Center point', central_point: 'Center point',
@ -2078,6 +2082,7 @@ export default {
no_data_or_not_positive: 'No data available, or all data are not positive, unable to plot', no_data_or_not_positive: 'No data available, or all data are not positive, unable to plot',
map_type: 'Map Provider', map_type: 'Map Provider',
map_type_gaode: 'Gaode Map', map_type_gaode: 'Gaode Map',
map_type_customize:'Geoserver',
map_type_tianditu: 'Tianditu', map_type_tianditu: 'Tianditu',
map_type_baidu: 'Baidu Map', map_type_baidu: 'Baidu Map',
map_type_tencent: 'Tencent Map', map_type_tencent: 'Tencent Map',
@ -4609,6 +4614,7 @@ export default {
answer: 'Answering', answer: 'Answering',
example: 'You can ask me: Pie chart of sales share of each sales department in 2020', example: 'You can ask me: Pie chart of sales share of each sales department in 2020',
switch_chart: 'Switch chart type', switch_chart: 'Switch chart type',
switch_base:'Switch base map',
switch_table: 'Switch to detailed table', switch_table: 'Switch to detailed table',
download: 'Download' download: 'Download'
}, },

View File

@ -1488,6 +1488,7 @@ export default {
export_details: '導出明細', export_details: '導出明細',
chart_data: '資料', chart_data: '資料',
chart_style: '樣式', chart_style: '樣式',
chart_base:'底圖',
drag_block_type_axis: '類別軸', drag_block_type_axis: '類別軸',
drag_block_type_axis_left: '左子類別', drag_block_type_axis_left: '左子類別',
drag_block_type_axis_right: '右子類別', drag_block_type_axis_right: '右子類別',
@ -1861,6 +1862,7 @@ export default {
enable_view_loading: '圖表載入提示', enable_view_loading: '圖表載入提示',
minute: '分', minute: '分',
switch_chart: '切換圖表', switch_chart: '切換圖表',
switch_base:'切換底圖',
update_chart_data: '更新圖表資料', update_chart_data: '更新圖表資料',
second: '秒', second: '秒',
more_settings: '更多設定', more_settings: '更多設定',
@ -1917,6 +1919,9 @@ export default {
hide: '隱藏', hide: '隱藏',
show_label: '顯示標籤', show_label: '顯示標籤',
security_code: '安全金鑰', security_code: '安全金鑰',
map_interface:'url',
layer_name:'圖層名稱',
update_base:'更新底圖',
auto_fit: '自適應縮放', auto_fit: '自適應縮放',
zoom_level: '縮放等級', zoom_level: '縮放等級',
central_point: '中心點', central_point: '中心點',
@ -2019,6 +2024,7 @@ export default {
no_data_or_not_positive: '暫無數據或數據均不是正數無法繪製', no_data_or_not_positive: '暫無數據或數據均不是正數無法繪製',
map_type: '地圖提供商', map_type: '地圖提供商',
map_type_gaode: '高德地圖', map_type_gaode: '高德地圖',
map_type_customize:'geoserver服務',
map_type_tianditu: '天地圖', map_type_tianditu: '天地圖',
map_type_baidu: '百度地圖', map_type_baidu: '百度地圖',
map_type_tencent: '騰訊地圖', map_type_tencent: '騰訊地圖',

View File

@ -1493,6 +1493,7 @@ export default {
export_details: '导出明細', export_details: '导出明細',
chart_data: '数据', chart_data: '数据',
chart_style: '样式', chart_style: '样式',
chart_base:'底图',
drag_block_type_axis: '类别轴', drag_block_type_axis: '类别轴',
drag_block_type_axis_left: '左子类别', drag_block_type_axis_left: '左子类别',
drag_block_type_axis_right: '右子类别', drag_block_type_axis_right: '右子类别',
@ -1866,6 +1867,7 @@ export default {
enable_view_loading: '图表加载提示', enable_view_loading: '图表加载提示',
minute: '分', minute: '分',
switch_chart: '切换图表', switch_chart: '切换图表',
switch_base:'切换底图',
update_chart_data: '更新图表数据', update_chart_data: '更新图表数据',
second: '秒', second: '秒',
more_settings: '更多设置', more_settings: '更多设置',
@ -1922,6 +1924,9 @@ export default {
hide: '隐藏', hide: '隐藏',
show_label: '显示标签', show_label: '显示标签',
security_code: '安全密钥', security_code: '安全密钥',
map_interface:'url',
layer_name:'图层名称',
update_base:'更新底图',
auto_fit: '自适应缩放', auto_fit: '自适应缩放',
zoom_level: '缩放等级', zoom_level: '缩放等级',
central_point: '中心点', central_point: '中心点',
@ -2025,6 +2030,7 @@ export default {
no_data_or_not_positive: '暂无数据或数据均不是正数无法绘制', no_data_or_not_positive: '暂无数据或数据均不是正数无法绘制',
map_type: '地图提供商', map_type: '地图提供商',
map_type_gaode: '高德地图', map_type_gaode: '高德地图',
map_type_customize:'geoserver服务',
map_type_tianditu: '天地图', map_type_tianditu: '天地图',
map_type_baidu: '百度地图', map_type_baidu: '百度地图',
map_type_tencent: '腾讯地图', map_type_tencent: '腾讯地图',

File diff suppressed because it is too large Load Diff

View File

@ -14,17 +14,13 @@ import {
getMapScene, getMapScene,
getMapStyle, getMapStyle,
} from '@/views/chart/components/js/panel/common/common_antv' } from '@/views/chart/components/js/panel/common/common_antv'
// import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { storeToRefs } from 'pinia'
// import { storeToRefs } from 'pinia' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
// const dvMainStore = dvMainStoreWithOut()
// const { curComponent } = storeToRefs(dvMainStore)
/** /**
* 三维地图 * 三维地图
*/ */
// eventBus.on('createModel', createModel)
// function createModel(model){
// console.log('jiehsou',model)
// }
export class ThreeMap extends L7ChartView<Scene, L7Config> { export class ThreeMap extends L7ChartView<Scene, L7Config> {
properties: EditorProperty[] = [ properties: EditorProperty[] = [
'background-overall-component', 'background-overall-component',
@ -86,14 +82,25 @@ export class ThreeMap extends L7ChartView<Scene, L7Config> {
basicStyle = parseJson(chart.customAttr).basicStyle basicStyle = parseJson(chart.customAttr).basicStyle
miscStyle = parseJson(chart.customAttr).misc miscStyle = parseJson(chart.customAttr).misc
} }
const dvMainStore = dvMainStoreWithOut()
const mapKey = await this.getMapKey() const {
curComponent
} = storeToRefs(dvMainStore)
let mapKey: any
if (curComponent.value && curComponent.value.mapServer) {
mapKey = curComponent.value.mapServer.find(server => server.status === true);
} else {
let allmapKey = await this.idGetMapKey(chart.id)
mapKey = allmapKey.find(server => server.status === true);
}
console.log('mapKey', mapKey)
const mapStyle = getMapStyle(mapKey, basicStyle) const mapStyle = getMapStyle(mapKey, basicStyle)
let center = getMapCenter(basicStyle) let center = getMapCenter(basicStyle)
const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene> const chartObj = drawOption.chartObj as unknown as L7Wrapper<L7Config, Scene>
let scene = chartObj?.getScene() let scene = chartObj?.getScene()
// scene = chartObj?.getScene()
scene = await getMapScene( scene = await getMapScene(
chart, chart,
scene, scene,
@ -110,5 +117,4 @@ export class ThreeMap extends L7ChartView<Scene, L7Config> {
scene.render() scene.render()
return new L7Wrapper(scene, []) // 只保留地图底图 return new L7Wrapper(scene, []) // 只保留地图底图
} }
} }

View File

@ -25,7 +25,7 @@ import {
} from '@antv/l7plot-component/dist/esm/legend/category/constants' } from '@antv/l7plot-component/dist/esm/legend/category/constants'
import substitute from '@antv/util/esm/substitute' import substitute from '@antv/util/esm/substitute'
import type { Plot as L7Plot, PlotOptions } from '@antv/l7plot/dist/esm' import type { Plot as L7Plot, PlotOptions } from '@antv/l7plot/dist/esm'
import { Zoom } from '@antv/l7' import { Zoom, RasterLayer } from '@antv/l7'
import { DOM } from '@antv/l7-utils' import { DOM } from '@antv/l7-utils'
import { Scene } from '@antv/l7-scene' import { Scene } from '@antv/l7-scene'
import { type IZoomControlOption } from '@antv/l7-component' import { type IZoomControlOption } from '@antv/l7-component'
@ -36,7 +36,7 @@ import type { PickOptions } from '@antv/g2plot/lib/core/plot'
import { defaults, find } from 'lodash-es' import { defaults, find } from 'lodash-es'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { isMobile } from '@/utils/utils' import { isMobile } from '@/utils/utils'
import { GaodeMap, TMap, TencentMap } from '@antv/l7-maps' import { GaodeMap, TMap, TencentMap, Map } from '@antv/l7-maps'
import { import {
gaodeMapStyleOptions, gaodeMapStyleOptions,
qqMapStyleOptions, qqMapStyleOptions,
@ -439,42 +439,42 @@ export function getXAxis(chart: Chart) {
const title = const title =
a.nameShow && a.name && a.name !== '' a.nameShow && a.name && a.name !== ''
? { ? {
text: a.name, text: a.name,
style: { style: {
fill: a.color, fill: a.color,
fontSize: a.fontSize fontSize: a.fontSize
}, },
spacing: 8 spacing: 8
} }
: null : null
const grid = a.splitLine.show const grid = a.splitLine.show
? { ? {
line: { line: {
style: { style: {
stroke: a.splitLine.lineStyle.color, stroke: a.splitLine.lineStyle.color,
lineWidth: a.splitLine.lineStyle.width, lineWidth: a.splitLine.lineStyle.width,
lineDash: getLineDash(a.splitLine.lineStyle.style) lineDash: getLineDash(a.splitLine.lineStyle.style)
}
} }
} }
}
: null : null
const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine
const line = axisCfg.show const line = axisCfg.show
? { ? {
style: { style: {
stroke: axisCfg.lineStyle.color, stroke: axisCfg.lineStyle.color,
lineWidth: axisCfg.lineStyle.width, lineWidth: axisCfg.lineStyle.width,
lineDash: getLineDash(axisCfg.lineStyle.style) lineDash: getLineDash(axisCfg.lineStyle.style)
}
} }
}
: null : null
const tickLine = axisCfg.show const tickLine = axisCfg.show
? { ? {
style: { style: {
stroke: axisCfg.lineStyle.color, stroke: axisCfg.lineStyle.color,
lineWidth: axisCfg.lineStyle.width lineWidth: axisCfg.lineStyle.width
}
} }
}
: null : null
let textAlign = 'center' let textAlign = 'center'
const rotate = a.axisLabel.rotate const rotate = a.axisLabel.rotate
@ -486,19 +486,19 @@ export function getXAxis(chart: Chart) {
} }
const label = a.axisLabel.show const label = a.axisLabel.show
? { ? {
rotate: (rotate * Math.PI) / 180, rotate: (rotate * Math.PI) / 180,
style: { style: {
fill: a.axisLabel.color, fill: a.axisLabel.color,
fontSize: a.axisLabel.fontSize, fontSize: a.axisLabel.fontSize,
textAlign: textAlign, textAlign: textAlign,
fontFamily: chart.fontFamily fontFamily: chart.fontFamily
}, },
formatter: value => { formatter: value => {
return chart.type === 'bidirectional-bar' && value.length > a.axisLabel.lengthLimit return chart.type === 'bidirectional-bar' && value.length > a.axisLabel.lengthLimit
? value.substring(0, a.axisLabel.lengthLimit) + '...' ? value.substring(0, a.axisLabel.lengthLimit) + '...'
: value : value
}
} }
}
: null : null
axis = { axis = {
@ -526,42 +526,42 @@ export function getYAxis(chart: Chart) {
const title = const title =
yAxis.nameShow && yAxis.name && yAxis.name !== '' yAxis.nameShow && yAxis.name && yAxis.name !== ''
? { ? {
text: yAxis.name, text: yAxis.name,
style: { style: {
fill: yAxis.color, fill: yAxis.color,
fontSize: yAxis.fontSize fontSize: yAxis.fontSize
}, },
spacing: 8 spacing: 8
} }
: null : null
const grid = yAxis.splitLine.show const grid = yAxis.splitLine.show
? { ? {
line: { line: {
style: { style: {
stroke: yAxis.splitLine.lineStyle.color, stroke: yAxis.splitLine.lineStyle.color,
lineWidth: yAxis.splitLine.lineStyle.width, lineWidth: yAxis.splitLine.lineStyle.width,
lineDash: getLineDash(yAxis.splitLine.lineStyle.style) lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
}
} }
} }
}
: null : null
const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine
const line = axisCfg.show const line = axisCfg.show
? { ? {
style: { style: {
stroke: axisCfg.lineStyle.color, stroke: axisCfg.lineStyle.color,
lineWidth: axisCfg.lineStyle.width, lineWidth: axisCfg.lineStyle.width,
lineDash: getLineDash(axisCfg.lineStyle.style) lineDash: getLineDash(axisCfg.lineStyle.style)
}
} }
}
: null : null
const tickLine = axisCfg.show const tickLine = axisCfg.show
? { ? {
style: { style: {
stroke: axisCfg.lineStyle.color, stroke: axisCfg.lineStyle.color,
lineWidth: axisCfg.lineStyle.width lineWidth: axisCfg.lineStyle.width
}
} }
}
: null : null
const rotate = yAxis.axisLabel.rotate const rotate = yAxis.axisLabel.rotate
let textAlign = 'end' let textAlign = 'end'
@ -591,20 +591,20 @@ export function getYAxis(chart: Chart) {
} }
const label = yAxis.axisLabel.show const label = yAxis.axisLabel.show
? { ? {
rotate: (rotate * Math.PI) / 180, rotate: (rotate * Math.PI) / 180,
style: { style: {
fill: yAxis.axisLabel.color, fill: yAxis.axisLabel.color,
fontSize: yAxis.axisLabel.fontSize, fontSize: yAxis.axisLabel.fontSize,
textBaseline, textBaseline,
textAlign, textAlign,
fontFamily: chart.fontFamily fontFamily: chart.fontFamily
}, },
formatter: value => { formatter: value => {
return value.length > yAxis.axisLabel.lengthLimit return value.length > yAxis.axisLabel.lengthLimit
? value.substring(0, yAxis.axisLabel.lengthLimit) + '...' ? value.substring(0, yAxis.axisLabel.lengthLimit) + '...'
: value : value
}
} }
}
: null : null
axis = { axis = {
@ -628,42 +628,42 @@ export function getYAxisExt(chart: Chart) {
const title = const title =
yAxis.nameShow && yAxis.name && yAxis.name !== '' yAxis.nameShow && yAxis.name && yAxis.name !== ''
? { ? {
text: yAxis.name, text: yAxis.name,
style: { style: {
fill: yAxis.color, fill: yAxis.color,
fontSize: yAxis.fontSize fontSize: yAxis.fontSize
}, },
spacing: 8 spacing: 8
} }
: null : null
const grid = yAxis.splitLine.show const grid = yAxis.splitLine.show
? { ? {
line: { line: {
style: { style: {
stroke: yAxis.splitLine.lineStyle.color, stroke: yAxis.splitLine.lineStyle.color,
lineWidth: yAxis.splitLine.lineStyle.width, lineWidth: yAxis.splitLine.lineStyle.width,
lineDash: getLineDash(yAxis.splitLine.lineStyle.style) lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
}
} }
} }
}
: null : null
const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine
const line = axisCfg.show const line = axisCfg.show
? { ? {
style: { style: {
stroke: axisCfg.lineStyle.color, stroke: axisCfg.lineStyle.color,
lineWidth: axisCfg.lineStyle.width, lineWidth: axisCfg.lineStyle.width,
lineDash: getLineDash(axisCfg.lineStyle.style) lineDash: getLineDash(axisCfg.lineStyle.style)
}
} }
}
: null : null
const tickLine = axisCfg.show const tickLine = axisCfg.show
? { ? {
style: { style: {
stroke: axisCfg.lineStyle.color, stroke: axisCfg.lineStyle.color,
lineWidth: axisCfg.lineStyle.width lineWidth: axisCfg.lineStyle.width
}
} }
}
: null : null
const rotate = yAxis.axisLabel.rotate const rotate = yAxis.axisLabel.rotate
let textAlign = 'end' let textAlign = 'end'
@ -693,15 +693,15 @@ export function getYAxisExt(chart: Chart) {
} }
const label = yAxis.axisLabel.show const label = yAxis.axisLabel.show
? { ? {
rotate: (rotate * Math.PI) / 180, rotate: (rotate * Math.PI) / 180,
style: { style: {
fill: yAxis.axisLabel.color, fill: yAxis.axisLabel.color,
fontSize: yAxis.axisLabel.fontSize, fontSize: yAxis.axisLabel.fontSize,
textBaseline, textBaseline,
textAlign, textAlign,
fontFamily: chart.fontFamily fontFamily: chart.fontFamily
}
} }
}
: null : null
axis = { axis = {
@ -1454,6 +1454,7 @@ export function getMapStyle(
mapKey: { key: string; securityCode: string; mapType: string }, mapKey: { key: string; securityCode: string; mapType: string },
basicStyle: ChartBasicStyle basicStyle: ChartBasicStyle
) { ) {
//
let mapStyle: string let mapStyle: string
switch (mapKey.mapType) { switch (mapKey.mapType) {
case 'tianditu': case 'tianditu':
@ -1490,56 +1491,34 @@ export async function getMapScene(
chart: Chart, chart: Chart,
scene: Scene, scene: Scene,
container: string, container: string,
mapKey: { key: string; securityCode: string; mapType: string }, mapKey: { key: string; securityCode: string; mapType: string, customize: string },
basicStyle: ChartBasicStyle, basicStyle: ChartBasicStyle,
miscStyle: ChartMiscAttr, miscStyle: ChartMiscAttr,
mapStyle: string, mapStyle: string,
center?: [number, number] center?: [number, number]
) { ) {
if (!scene) { if (scene) {
scene = new Scene({ // 销毁整个 Scene
id: container, try {
logoVisible: false, await scene.destroy();
map: getMapObject(mapKey, basicStyle, miscStyle, mapStyle, center) } catch (e) {
}) console.warn('Scene destroy failed:', e);
} else {
if (mapKey.mapType === 'tianditu') {
scene.map?.checkResize()
} }
if (scene.getLayers()?.length) { scene = null;
await scene.removeAllLayer() }
try { // 🔥 清理天地图残留 DOM
scene.setPitch(miscStyle.mapPitch) const containerEl = typeof container === 'string' ? document.getElementById(container) : container;
} catch (e) {} if (containerEl) {
if (mapKey.mapType === 'tianditu') { // 清除所有子元素特别是天地图插入的 canvas/img
if (mapStyle === 'normal') { while (containerEl.firstChild) {
scene.map?.removeStyle() containerEl.removeChild(containerEl.firstChild);
} else {
scene.setMapStyle(mapStyle)
}
} else {
scene.setMapStyle(mapStyle)
}
scene.map.showLabel = !(basicStyle.showLabel === false)
if (mapKey.mapType === 'qq') {
scene.map.setBaseMap({
//底图设置参数为VectorBaseMap对象
type: 'vector', //类型失量底图
features: basicStyle.showLabel === false ? ['base', 'building2d'] : undefined
//仅渲染道路及底面(base) + 2d建筑物(building2d)以达到隐藏文字的效果
})
}
}
if (basicStyle.autoFit === false) {
scene.setZoomAndCenter(basicStyle.zoomLevel, center)
if (mapKey.mapType === 'qq') {
scene.map.deMapAutoFit = false
scene.map.deMapZoom = basicStyle.zoomLevel
scene.map.deMapCenter = center
}
} }
} }
scene = new Scene({
id: container,
logoVisible: false,
map: getMapObject(mapKey, basicStyle, miscStyle, mapStyle, center)
})
mapRendering(container) mapRendering(container)
scene.once('loaded', () => { scene.once('loaded', () => {
mapRendered(container) mapRendered(container)
@ -1559,7 +1538,7 @@ export async function getMapScene(
// scene.map.deMapAutoLat = scene.map.getCenter().getLat() // scene.map.deMapAutoLat = scene.map.getCenter().getLat()
} }
// 去除天地图自己的缩放按钮 // 去除天地图自己的缩放按钮
if (mapKey.mapType === 'tianditu') { if (typeof scene.map.removeStyle === 'function') {
if (mapStyle === 'normal') { if (mapStyle === 'normal') {
scene.map?.removeStyle() scene.map?.removeStyle()
} else { } else {
@ -1595,17 +1574,47 @@ export async function getMapScene(
} }
} }
} }
if (mapKey.mapType === 'zidingyi') {
const wmsLayer = new RasterLayer({
zIndex: 2, // 图层叠加顺序
workerEnabled: false // 禁用WebWorker
});
wmsLayer.source(
// bbox=113.169069%2C35.1774017%2C117.526822%2C41.3747065
// GeoServer WMS 服务URL //url 服务类型,版本图层名坐标系
// 更新URL参数指定北京范围并启用透明
`${mapKey.url}/wms?` +
'service=WMS&version=1.1.0&request=GetMap&' +
`layers=${mapKey.layers}&` +
'BBOX={bbox}&' + // 北京大致范围
'width=768&height=556&' +
'srs=EPSG%3A4326&' +
'format=image/png&',
// 'tiled=true',
{
parser: {
type: 'rasterTile',
tileSize: 512, // 瓦片大小
zoomOffset: 0 // 缩放级别偏移
}
}
);
scene.addLayer(wmsLayer);
}
}) })
return scene return scene
} }
export function getMapObject( export function getMapObject(
mapKey: { key: string; securityCode: string; mapType: string }, mapKey: { key: string; securityCode: string; mapType: string, customize: string },
basicStyle: ChartBasicStyle, basicStyle: ChartBasicStyle,
miscStyle: ChartMiscAttr, miscStyle: ChartMiscAttr,
mapStyle: string, mapStyle: string,
center?: [number, number] center?: [number, number],
) { ) {
switch (mapKey.mapType) { switch (mapKey.mapType) {
case 'tianditu': case 'tianditu':
return new TMap({ return new TMap({
@ -1631,6 +1640,12 @@ export function getMapObject(
preserveDrawingBuffer: true preserveDrawingBuffer: true
} }
}) })
case 'zidingyi':
return new Map({
style: 'blank', // 关键避免加载在线底图
center: [116.3956, 39.9392],
zoom: 10
})
default: default:
return new GaodeMap({ return new GaodeMap({
token: mapKey?.key ?? undefined, token: mapKey?.key ?? undefined,
@ -2233,15 +2248,15 @@ export function handleConditionsStyle(chart: Chart, options) {
...(options.tooltip['customItems'] ...(options.tooltip['customItems']
? {} ? {}
: { : {
customItems: originalItems => { customItems: originalItems => {
originalItems.forEach(item => { originalItems.forEach(item => {
if (item.data?.[colorField]) { if (item.data?.[colorField]) {
item.color = item.data[colorField][0] item.color = item.data[colorField][0]
} }
}) })
return originalItems return originalItems
} }
}) })
}, },
...(newColor ? { color: newColor } : {}) ...(newColor ? { color: newColor } : {})
} }
@ -2442,8 +2457,8 @@ export const configRoundAngle = (chart: Chart, styleName: string, callBack?: (da
? bottomRadius ? bottomRadius
: finalRadius : finalRadius
: isTopRound : isTopRound
? topRadius ? topRadius
: finalRadius, : finalRadius,
...(callBack ? callBack(datum) : {}) ...(callBack ? callBack(datum) : {})
} }
} }

View File

@ -13,7 +13,7 @@ import {
configL7Tooltip, configL7Tooltip,
configL7Zoom configL7Zoom
} from '@/views/chart/components/js/panel/common/common_antv' } from '@/views/chart/components/js/panel/common/common_antv'
import { queryMapKeyApi } from '@/api/setting/sysParameter' import { queryMapKeyApi,getMapServer } from '@/api/setting/sysParameter'
import { useMapStoreWithOut } from '@/store/modules/map' import { useMapStoreWithOut } from '@/store/modules/map'
const mapStore = useMapStoreWithOut() const mapStore = useMapStoreWithOut()
@ -138,6 +138,11 @@ export abstract class L7ChartView<
} }
return mapStore.mapKey return mapStore.mapKey
} }
protected idGetMapKey = (id: any): Promise<any> => {
return getMapServer(id).then((res: any) => {
return JSON.parse(res.data)
})
}
protected abstract setupOptions(chart: Chart, options: O): O protected abstract setupOptions(chart: Chart, options: O): O
} }

View File

@ -421,32 +421,32 @@ const renderL7 = async (chart: ChartObj, chartView: L7ChartView<any, any>, callb
chart: chart, chart: chart,
action action
}); });
// // //
if (!scaleControl) { // if (!scaleControl) {
scaleControl = new Scale({ // scaleControl = new Scale({
position: 'bottomleft', // position: 'bottomleft',
imperial: false // imperial: false
}); // });
myChart.getScene()?.addControl(scaleControl); // myChart.getScene()?.addControl(scaleControl);
} // }
// // //
if (fullscreenControl) { // if (fullscreenControl) {
} else { // } else {
fullscreenControl = new Fullscreen({ // fullscreenControl = new Fullscreen({
position: 'bottomright', // position: 'bottomright',
}); // });
myChart.getScene()?.addControl(fullscreenControl, 'bottomright'); // myChart.getScene()?.addControl(fullscreenControl, 'bottomright');
} // }
// ====== 使API ====== // // ====== 使API ======
// // //
// // //
if (!satelliteControlInstance) { // if (!satelliteControlInstance) {
// // //
satelliteControlInstance = new SatelliteControl({ position: 'bottomright' }); // satelliteControlInstance = new SatelliteControl({ position: 'bottomright' });
myChart.getScene()?.addControl(satelliteControlInstance); // myChart.getScene()?.addControl(satelliteControlInstance);
} // }
if (view.value.type == 'three-map') { if (view.value.type == 'three-map' ) {
// debugger // debugger
if (curComponent.value && curComponent.value.threeModel && curComponent.value.threeModel.length > 0) { if (curComponent.value && curComponent.value.threeModel && curComponent.value.threeModel.length > 0) {
curComponent.value.threeModel.forEach((item: any) => { curComponent.value.threeModel.forEach((item: any) => {