diff --git a/core/frontend/package.json b/core/frontend/package.json
index 14f8ab7380..67b10f2aae 100644
--- a/core/frontend/package.json
+++ b/core/frontend/package.json
@@ -5,11 +5,11 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service build",
+    "build": "vue-cli-service build",
     "serves": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
-    "dll": "SET NODE_OPTIONS=--openssl-legacy-provider && webpack -p --progress --config ./webpack.dll.conf.js",
+    "dll": "webpack -p --progress --config ./webpack.dll.conf.js",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src --fix",
     "lint-staged": "lint-staged",
diff --git a/core/frontend/src/views/chart/chart/map/map_antv.js b/core/frontend/src/views/chart/chart/map/map_antv.js
index 4576dfc5dc..e8485d8eaf 100644
--- a/core/frontend/src/views/chart/chart/map/map_antv.js
+++ b/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)
+}
diff --git a/core/frontend/src/views/chart/components/ChartComponentG2.vue b/core/frontend/src/views/chart/components/ChartComponentG2.vue
index 55cf385ce7..ce70e53ed4 100644
--- a/core/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/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':