Merge pull request #6459 from dataease/pr@dev@feat_flow_map_online_map_key

feat: 流向地图使用自定义key

core/frontend/package.json

@@ -26,17 +26,8 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.4.9",
-    "@antv/l7": "2.15.0",
-    "@antv/l7-component": "2.15.0",
-    "@antv/l7-core": "2.15.0",
-    "@antv/l7-layers": "2.15.0",
-    "@antv/l7-maps": "2.15.0",
-    "@antv/l7-renderer": "2.15.0",
-    "@antv/l7-scene": "2.15.0",
-    "@antv/l7-source": "2.15.0",
-    "@antv/l7-utils": "2.15.0",
-    "@antv/s2": "1.49.1",
-    "@antv/util": "^2.0.17",
+    "@antv/l7": "^2.15.0",
+    "@antv/s2": "^1.49.1",
     "@riophae/vue-treeselect": "0.4.0",
     "@tinymce/tinymce-vue": "^3.2.8",
     "axios": "^0.21.3",

core/frontend/src/views/chart/chart/map/map_antv.js

@@ -1,8 +1,9 @@
 import { Scene, LineLayer } from '@antv/l7'
 import { GaodeMap } from '@antv/l7-maps'
 import { getLanguage } from '@/lang'
+import { queryMapKey } from '@/api/map/map'
 
-export function baseFlowMapOption(chartDom, chartId, chart, action) {
+export async function baseFlowMapOption(chartDom, chartId, chart, action) {
   const xAxis = JSON.parse(chart.xaxis)
   const xAxisExt = JSON.parse(chart.xaxisExt)
   let customAttr
@@ -20,9 +21,11 @@ export function baseFlowMapOption(chartDom, chartId, chart, action) {
     } catch (e) {
     //   ignore
     }
+    const key = await getMapKey()
     chartDom = new Scene({
       id: chartId,
       map: new GaodeMap({
+        token: key ?? undefined,
         lang: lang,
         pitch: size.mapPitch,
         style: mapStyle
@@ -85,3 +88,11 @@ export function baseFlowMapOption(chartDom, chartId, chart, action) {
     })
   return chartDom
 }
+
+const getMapKey = async() => {
+  const key = 'online-map-key'
+  if (!localStorage.getItem(key)) {
+    await queryMapKey().then(res => localStorage.setItem(key, res.data))
+  }
+  return localStorage.getItem(key)
+}

core/frontend/src/views/chart/components/ChartComponentG2.vue

@@ -242,7 +242,7 @@ export default {
       })
       window.addEventListener('resize', this.calcHeightDelay)
     },
-    drawView() {
+    async drawView() {
       const chart = JSON.parse(JSON.stringify(this.chart))
       // type
       // if (chart.data) {
@@ -298,7 +298,7 @@ export default {
       } else if (chart.type === 'chart-mix') {
         this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'flow-map') {
-        this.myChart = baseFlowMapOption(this.myChart, this.chartId, chart, this.antVAction)
+        this.myChart = await baseFlowMapOption(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'bidirectional-bar') {
         this.myChart = baseBidirectionalBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else {
@@ -338,7 +338,6 @@ export default {
       }
       this.setBackGroundBorder()
     },
-
     antVAction(param) {
       switch (this.chart.type) {
         case 'treemap':