diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts index fa046b0a8f..5a3147e3d4 100644 --- a/core/core-frontend/src/locales/en.ts +++ b/core/core-frontend/src/locales/en.ts @@ -2064,7 +2064,8 @@ export default { map_type: 'Map Provider', map_type_gaode: 'Gaode Map', map_type_tianditu: 'Tianditu', - map_type_baidu: 'Baidu Map' + map_type_baidu: 'Baidu Map', + map_type_tencent: 'QQ Map' }, dataset: { field_value: 'Field Value', diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index c8cb85618a..e2e8025204 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/core/core-frontend/src/locales/tw.ts @@ -2007,7 +2007,8 @@ export default { map_type: '地圖提供商', map_type_gaode: '高德地圖', map_type_tianditu: '天地圖', - map_type_baidu: '百度地圖' + map_type_baidu: '百度地圖', + map_type_tencent: '騰訊地圖' }, dataset: { field_value: '欄位值', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index a1d5ea67b9..1308142f87 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -2013,7 +2013,8 @@ export default { map_type: '地图提供商', map_type_gaode: '高德地图', map_type_tianditu: '天地图', - map_type_baidu: '百度地图' + map_type_baidu: '百度地图', + map_type_tencent: '腾讯地图' }, dataset: { field_value: '字段值', 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 9eaebe297e..840c36fa09 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 @@ -21,6 +21,7 @@ import { useMapStoreWithOut } from '@/store/modules/map' import { queryMapKeyApi } from '@/api/setting/sysParameter' import { gaodeMapStyleOptions, + qqMapStyleOptions, tdtMapStyleOptions } from '@/views/chart/components/js/panel/charts/map/common' @@ -292,6 +293,8 @@ const mapStyleOptions = computed(() => { switch (mapType.value) { case 'tianditu': return tdtMapStyleOptions + case 'qq': + return qqMapStyleOptions default: return gaodeMapStyleOptions } 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 058f3a56c4..e9de26b67b 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 @@ -72,6 +72,11 @@ export const tdtMapStyleOptions = [ { name: t('chart.map_style_darkblue'), value: 'indigo' } ] +export const qqMapStyleOptions = [ + { name: t('chart.map_style_normal'), value: 'normal' }, + { name: t('commons.custom'), value: 'custom' } +] + export declare type MapMouseEvent = MouseEvent & { feature: GeoJSON.Feature } diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index 4c1d76585e..c45090fb57 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -35,14 +35,16 @@ import type { Plot } from '@antv/g2plot' import type { PickOptions } from '@antv/g2plot/lib/core/plot' import { defaults, find } from 'lodash-es' import { useI18n } from '@/hooks/web/useI18n' -const { t: tI18n } = useI18n() import { isMobile } from '@/utils/utils' -import { GaodeMap, TMap } from '@antv/l7-maps' +import { GaodeMap, TMap, TencentMap } from '@antv/l7-maps' import { gaodeMapStyleOptions, + qqMapStyleOptions, tdtMapStyleOptions } from '@/views/chart/components/js/panel/charts/map/common' +const { t: tI18n } = useI18n() + export function getPadding(chart: Chart): number[] { if (chart.drill) { return [0, 10, 22, 10] @@ -1242,38 +1244,55 @@ export function configL7Zoom( if (!scene?.getControlByName('zoom')) { if (!scene.map) { scene.once('loaded', () => { - if ( - mapKey?.mapType === 'tianditu' && - scene.map?.defaultMapType?.name === 'TMAP_NORMAL_MAP' - ) { - //天地图 - const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom() - const center = - basicStyle.autoFit === false - ? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] - : [scene.map.getCenter().getLng(), scene.map.getCenter().getLat()] - const newZoomOptions = { - initZoom: initZoom, - center: center, - buttonColor: basicStyle.zoomButtonColor, - buttonBackground: basicStyle.zoomBackground - } as any - scene.addControl(new CustomZoom(newZoomOptions)) - } else { - scene.map.on('complete', () => { - const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom() - const center = - basicStyle.autoFit === false - ? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] - : [scene.map.getCenter().lng, scene.map.getCenter().lat] - const newZoomOptions = { - initZoom: initZoom, - center: center, - buttonColor: basicStyle.zoomButtonColor, - buttonBackground: basicStyle.zoomBackground - } as any - scene.addControl(new CustomZoom(newZoomOptions)) - }) + switch (mapKey?.mapType) { + case 'tianditu': + //天地图 + { + const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom() + const center = + basicStyle.autoFit === false + ? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] + : [scene.map.getCenter().getLng(), scene.map.getCenter().getLat()] + const newZoomOptions = { + initZoom: initZoom, + center: center, + buttonColor: basicStyle.zoomButtonColor, + buttonBackground: basicStyle.zoomBackground + } as any + scene.addControl(new CustomZoom(newZoomOptions)) + } + break + case 'qq': + { + const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom() + const center = + basicStyle.autoFit === false + ? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] + : [scene.map.getCenter().lng, scene.map.getCenter().lat] + const newZoomOptions = { + initZoom: initZoom, + center: center, + buttonColor: basicStyle.zoomButtonColor, + buttonBackground: basicStyle.zoomBackground + } as any + scene.addControl(new CustomZoom(newZoomOptions)) + } + break + default: + scene.map.on('complete', () => { + const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom() + const center = + basicStyle.autoFit === false + ? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] + : [scene.map.getCenter().lng, scene.map.getCenter().lat] + const newZoomOptions = { + initZoom: initZoom, + center: center, + buttonColor: basicStyle.zoomButtonColor, + buttonBackground: basicStyle.zoomBackground + } as any + scene.addControl(new CustomZoom(newZoomOptions)) + }) } }) } else { @@ -1408,6 +1427,16 @@ export function getMapStyle( mapStyle = basicStyle.mapStyle } break + case 'qq': + if ( + !find(qqMapStyleOptions, s => s.value === basicStyle.mapStyle) || + basicStyle.mapStyle === 'normal' + ) { + mapStyle = 'normal' + } else { + mapStyle = basicStyle.mapStyleUrl + } + break default: if (!find(gaodeMapStyleOptions, s => s.value === basicStyle.mapStyle)) { basicStyle.mapStyle = 'normal' @@ -1457,6 +1486,14 @@ export async function getMapScene( } 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) @@ -1465,6 +1502,15 @@ export async function getMapScene( mapRendering(container) scene.once('loaded', () => { mapRendered(container) + if (mapKey.mapType === 'qq') { + scene.map.setBaseMap({ + //底图设置（参数为：VectorBaseMap对象） + type: 'vector', //类型：失量底图 + features: basicStyle.showLabel === false ? ['base', 'building2d'] : undefined + //仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果 + }) + scene.setMapStyle(mapStyle) + } // 去除天地图自己的缩放按钮 if (mapKey.mapType === 'tianditu') { if (mapStyle === 'normal') { @@ -1526,6 +1572,18 @@ export function getMapObject( preserveDrawingBuffer: true } }) + case 'qq': + return new TencentMap({ + token: mapKey?.key ?? undefined, + style: mapStyle, + pitch: miscStyle.mapPitch, + center, + zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 12, + showLabel: !(basicStyle.showLabel === false), + WebGLParams: { + preserveDrawingBuffer: true + } + }) default: return new GaodeMap({ token: mapKey?.key ?? undefined, diff --git a/core/core-frontend/src/views/system/parameter/map/OnlineMap.vue b/core/core-frontend/src/views/system/parameter/map/OnlineMap.vue index 8521312b6c..d52ad540e0 100644 --- a/core/core-frontend/src/views/system/parameter/map/OnlineMap.vue +++ b/core/core-frontend/src/views/system/parameter/map/OnlineMap.vue @@ -17,6 +17,7 @@ +
@@ -54,6 +55,11 @@ v-if="!mapLoading && mapLoaded && mapEditor.key && mapEditor.mapType === 'tianditu'" :map-key="mapEditor.key" /> + +import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue' + +const domId = ref('de-map-container') +const mapInstance = ref(null) +const mapReloading = ref(false) + +const props = defineProps<{ + mapKey: string + securityCode?: string +}>() + +const loadMap = () => { + if (!props.mapKey) { + return + } + const mykey = props.mapKey + const url = `https://map.qq.com/api/gljs?v=1.exp&key=${mykey}` + + loadScript(url) + .then(() => { + if (mapInstance.value) { + mapInstance.value?.destroy() + mapInstance.value = null + mapReloading.value = true + setTimeout(() => { + domId.value = domId.value + '-de-' + mapReloading.value = false + nextTick(() => { + createMapInstance() + }) + }, 1500) + + return + } + createMapInstance() + }) + .catch(e => { + console.error(e) + if (mapInstance.value) { + mapInstance.value.destroy() + mapInstance.value = null + } + }) +} +const createMapInstance = () => { + if (window.TMap) { + const center = new window.TMap.LatLng(39.90923, 116.397428) + mapInstance.value = new window.TMap.Map(document.getElementById(domId.value), { + viewMode: '2D', + zoom: 11, + center: center + }) + mapInstance.value?.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ZOOM) + mapInstance.value?.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ROTATION) + mapInstance.value?.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.SCALE) + } +} +const loadScript = (url: string) => { + return new Promise(function (resolve, reject) { + const scriptId = 'de-qq-script-id' + let dom = document.getElementById(scriptId) + if (dom) { + dom.parentElement?.removeChild(dom) + dom = null + window.TMap = null + } + const script = document.createElement('script') + + script.id = scriptId + script.onload = function () { + return resolve(null) + } + script.onerror = function () { + return reject(new Error('Load script from '.concat(url, ' failed'))) + } + script.src = url + const head = document.head || document.getElementsByTagName('head')[0] + ;(document.body || head).appendChild(script) + }) +} + +onMounted(() => { + loadMap() +}) +onBeforeUnmount(() => { + const scriptId = 'de-qq-script-id' + let dom = document.getElementById(scriptId) + if (dom) { + dom.parentElement?.removeChild(dom) + dom = null + window.TMap = null + } +}) + + + + + diff --git a/core/core-frontend/src/views/system/parameter/map/OnlineMapTdt.vue b/core/core-frontend/src/views/system/parameter/map/OnlineMapTdt.vue index b97d7ead7f..af4e037992 100644 --- a/core/core-frontend/src/views/system/parameter/map/OnlineMapTdt.vue +++ b/core/core-frontend/src/views/system/parameter/map/OnlineMapTdt.vue @@ -58,7 +58,7 @@ const createMapInstance = () => { } const loadScript = (url: string) => { return new Promise(function (resolve, reject) { - const scriptId = 'de-gaode-script-id' + const scriptId = 'de-tdt-script-id' let dom = document.getElementById(scriptId) if (dom) { dom.parentElement?.removeChild(dom) @@ -84,7 +84,7 @@ onMounted(() => { loadMap() }) onBeforeUnmount(() => { - const scriptId = 'de-gaode-script-id' + const scriptId = 'de-tdt-script-id' let dom = document.getElementById(scriptId) if (dom) { dom.parentElement?.removeChild(dom)