feat: 高德地圖demo (#219)

Signed-off-by: aonoa <1991849113@qq.com>

apps/admin/src/pages/demo/charts/Map.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+
+</script>
+<template>
+  <div>Demo待补充</div>
+</template>

apps/admin/src/pages/demo/charts/map/Baidu.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+
+</script>
+<template>
+  <div>Demo待补充</div>
+</template>

apps/admin/src/pages/demo/charts/map/Gaode.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Gaode } from '@vben/demo'
+</script>
+<template>
+  <Gaode />
+</template>

apps/admin/src/pages/demo/charts/map/Google.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+
+</script>
+<template>
+  <div>Demo待补充</div>
+</template>

packages/demo/index.ts

@@ -6,3 +6,4 @@ export { default as FixedColumn } from './src/Table/fixedColumn.vue'
 export { default as TreeTable } from './src/Table/TreeTable.vue'
 export { default as Modal } from './src/Modal/index.vue'
 export { default as Basic } from './src/Basic/index.vue'
+export { default as Gaode } from './src/Charts/Gaode.vue'

packages/demo/package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@vben/request": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",

packages/demo/src/Charts/Gaode.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+let map = null;
+
+onMounted(() => {
+  AMapLoader.load({
+    key: "d7bb98e7185300250dd5f918c12f484b", // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+  })
+    .then((AMap) => {
+      map = new AMap.Map("container", {
+        // 设置地图容器id
+        viewMode: "3D", // 是否为3D地图模式
+        zoom: 11, // 初始化地图级别
+        center: [116.397428, 39.90923], // 初始化地图中心点位置
+      });
+      map.addControl(new AMap.Scale());
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+});
+
+onUnmounted(() => {
+  map?.destroy();
+});
+</script>
+
+<template>
+  <div id="container"></div>
+</template>
+
+<style scoped>
+#container {
+  width: 100%;
+  height: 830px;
+}
+</style>

packages/locale/src/lang/en/routes.ts

@@ -34,6 +34,15 @@ export default {
       doc: "Project doc (embedded)",
       docExternal: "Project doc (external)"
     },
+    charts: {
+      baiduMap: "Baidu map",
+      aMap: "A map",
+      googleMap: "Google map",
+      charts: "Chart",
+      map: "Map",
+      line: "Line",
+      pie: "Pie"
+    },
     system: {
       moduleName: "System management",
       account: "Account management",

packages/locale/src/lang/zh-CN/routes.ts

@@ -35,6 +35,15 @@ export default {
       doc: "项目文档(内嵌)",
       docExternal: "项目文档(外链)"
     },
+    charts: {
+      baiduMap: "百度地图",
+      aMap: "高德地图",
+      googleMap: "谷歌地图",
+      charts: "图表",
+      map: "地图",
+      line: "折线图",
+      pie: "饼图"
+    },
     system: {
       moduleName: "系统管理",
       account: "账号管理",

packages/router/src/routes/modules/demo/charts.ts

@@ -1,17 +1,92 @@
 import {LAYOUT} from '../../basic'
 
+// const charts: RouteRecordItem = {
+//   path: '/charts',
+//   name: 'Charts',
+//   component: LAYOUT,
+//   redirect: '/charts/index',
+//   meta: {
+//     title: '图表',
+//     orderNo: 6,
+//     icon: 'material-symbols:bubble-chart-outline',
+//     root: true
+//   },
+//   children: []
+// }
+//
+// export default charts
+
 const charts: RouteRecordItem = {
   path: '/charts',
   name: 'Charts',
   component: LAYOUT,
-  redirect: '/charts/index',
+  redirect: '/charts/echarts/map',
   meta: {
-    title: '图表',
-    orderNo: 6,
-    icon: 'material-symbols:bubble-chart-outline',
-    root: true
+    orderNo: 500,
+    icon: 'ion:bar-chart-outline',
+    title: 'routes.demo.charts.charts',
   },
-  children: []
-}
+  children: [
+    {
+      path: 'baiduMap',
+      name: 'BaiduMap',
+      meta: {
+        title: 'routes.demo.charts.baiduMap',
+      },
+      component: () => import('@/pages/demo/charts/map/Baidu.vue'),
+    },
+    {
+      path: 'aMap',
+      name: 'AMap',
+      meta: {
+        title: 'routes.demo.charts.aMap',
+      },
+      component: () => import('@/pages/demo/charts/map/Gaode.vue'),
+    },
+    {
+      path: 'googleMap',
+      name: 'GoogleMap',
+      meta: {
+        title: 'routes.demo.charts.googleMap',
+      },
+      component: () => import('@/pages/demo/charts/map/Google.vue'),
+    },
+    {
+      path: 'echarts',
+      name: 'Echarts',
+      component: LAYOUT,
+      meta: {
+        title: 'Echarts',
+      },
+      redirect: '/charts/echarts/map',
+      children: [
+        {
+          path: 'map',
+          name: 'Map',
+          component: () => import('@/pages/demo/charts/Map.vue'),
+          meta: {
+            title: 'routes.demo.charts.map',
+          },
+        },
+        {
+          path: 'line',
+          name: 'Line',
+          component: () => import('@/pages/demo/charts/Line.vue'),
+          meta: {
+            title: 'routes.demo.charts.line',
+          },
+        },
+        {
+          path: 'pie',
+          name: 'Pie',
+          component: () => import('@/pages/demo/charts/Pie.vue'),
+          meta: {
+            title: 'routes.demo.charts.pie',
+          },
+        },
+      ],
+    },
+  ],
+};
 
-export default charts
+export default charts;