update

src/components/chinaMap/chinaMap.vue

@@ -60,9 +60,10 @@
 <script lang="ts" setup>
     import { onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
-    import mapJson from '/@/components/chinaMap/json/c';
-    import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption } from './chinaHooks.ts';
+    import mapJson from '/@/components/chinaMap/json/c.json';
+    import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption, mapApiSwitch } from '/@/components/chinaMap/chinaHooks';
     import { message } from 'ant-design-vue';
+    import { getAllList } from '/@/components/chinaMap/chinaMapApi';
 
     const formState = ref({
         start: '西安北站',
@@ -85,7 +86,7 @@
         },
     ]);
 
-    function changeTab(i) {
+    function changeTab(i: number) {
         let x = Math.random() + 5 - Math.floor(Math.random() * 10) - i + Math.random() * 3.5;
         let y = Math.floor(Math.random() * 10) - 5 + Math.random() + i + Math.random() * 5;
         const o = {
@@ -98,38 +99,6 @@
             symbolSize: [25, 63],
             symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL
         };
-        const line = {
-            name: '线路',
-            type: 'lines',
-            coordinateSystem: 'geo',
-            zlevel: 100,
-            large: true,
-            effect: {
-                show: true,
-                constantSpeed: 30,
-                symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-                symbolSize: 0,
-                trailLength: 0,
-            },
-            lineStyle: {
-                normal: {
-                    color: '#0fff17',
-                    width: 2,
-                    opacity: 1.0,
-                    curveness: 0.15,
-                },
-            },
-            data: [
-                {
-                    fromName: '六安',
-                    toName: '合肥市',
-                    coords: [
-                        [116.27, 31.786],
-                        [117.37, 31.386],
-                    ],
-                },
-            ],
-        };
         icons.value = [];
         icons.value.push(o);
         // icons.value.push(line);
@@ -138,11 +107,17 @@
         initMap(myChart);
     }
 
+    async function getMapData(params) {
+        const data = await mapApiSwitch(params.type, {});
+        console.log('--->data', data);
+    }
+
     onMounted(() => {
         console.log('reload');
         let myChart = echarts.init(document.querySelector('.china-map-container'));
         echarts.registerMap('china', mapJson);
         initMap(myChart);
+        getMapData({ type: tabList[0].type });
     });
 
     function initMap(myChart) {
@@ -212,6 +187,10 @@
         panelTitle.value = str;
     }
 
+    /**
+     * @desc 路线规划
+     * @param callback
+     */
     function searchRoute(callback: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null) {
         showRoutePanel.value = false;
         panelTitle.value = '';
@@ -248,7 +227,7 @@
                 setTitle(routes[0]);
                 let arr = [];
                 arr.push(data.originName);
-                routes[0].steps.map((item) => {
+                routes[0].steps.map((item: any) => {
                     arr.push(item.instruction);
                 });
                 arr.push(data.destinationName);
@@ -490,4 +469,4 @@
             }
         }
     }
-</style>
+</style>