update 看板接口对接 增加路由依赖

src/components/chinaMap/chinaMap.vue

@@ -2,7 +2,7 @@
     <div class="center-map">
         <div class="china-map-box">
             <div class="tab-list">
-                <div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab" @click="changeTab(i)">
+                <div v-for="(item, i) in list" :class="[currentIndex == i ? 'active' : '']" class="tab" @click="changeTab(item, i)">
                     {{ item.name }}
                 </div>
             </div>
@@ -36,7 +36,7 @@
                     <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
                 </div>
             </div>
-            <div class="china-map-container"></div>
+            <div class="mapContainer" id="mapContainer"></div>
             <div v-show="false" id="container"></div>
             <div v-show="false" id="panel"></div>
             <div class="map-legend">
@@ -59,11 +59,9 @@
 </template>
 <script lang="ts" setup>
     import { onMounted, ref } from 'vue';
-    import * as echarts from 'echarts';
-    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';
+    import { Map } from '/@/assets/mapUtils/map';
+    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch } from '/@/components/chinaMap/chinaHooks';
 
     const formState = ref({
         start: '西安北站',
@@ -71,105 +69,28 @@
     });
     const list = ref(tabList);
     const currentIndex = ref(0);
-    const icons = ref([
-        {
-            type: 'scatter',
-            zlevel: 100,
-            coordinateSystem: 'geo',
-            //自定义图片的 位置（lng, lat）
-            data: [{ name: '西安', value: ['108.88', '34.40'], id: 'xian' }],
-            //自定义图片的 大小
-            symbolSize: [25, 63],
-            //自定义图片的 路径
-            // symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567',  // 图片 URL
-            symbol: 'image://' + mapIcons[0], // 图片 URL
-        },
-    ]);
 
-    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 = {
-            type: 'scatter',
-            zlevel: 100,
-            coordinateSystem: 'geo',
-            //自定义图片的 位置（lng, lat）
-            data: [{ name: '太原', value: [112.55 + Math.random() + x, 37.98 + Math.random() + y], id: 'taiyuan' }],
-            //自定义图片的 大小
-            symbolSize: [25, 63],
-            symbol: 'image://' + mapIcons[Math.floor(Math.random() * 6)], // 图片 URL
-        };
-        icons.value = [];
-        icons.value.push(o);
-        // icons.value.push(line);
+    function changeTab(item, i: number) {
         currentIndex.value = i;
-        let myChart = echarts.init(document.querySelector('.china-map-container'));
-        initMap(myChart);
+        getMapData(item.type, { type: item.type });
     }
 
-    async function getMapData(params) {
-        const data = await mapApiSwitch(params.type, {});
-        console.log('--->data', data);
+    async function getMapData(type, params = {}) {
+        const { code, result } = await mapApiSwitch(type, params);
+        if (code == 200 && Array.isArray(result) && result.length > 0) {
+            Map.createOverlay(result);
+        }
+        console.log('--->data', result);
     }
 
     onMounted(() => {
         console.log('reload');
-        let myChart = echarts.init(document.querySelector('.china-map-container'));
-        echarts.registerMap('china', mapJson);
-        initMap(myChart);
-        getMapData({ type: tabList[0].type });
+        initMap();
+        getMapData(tabList[0].type);
     });
 
-    function initMap(myChart) {
-        let option = createChartOption({ icons });
-        myChart.setOption(option);
-        // 关闭之前的点击事件
-        myChart.off('click');
-        myChart.on('click', function (res) {
-            mapClick(res, myChart);
-        });
-        myChart.getZr().on('click', (params) => {
-            if (params.target) {
-                // alert('画布非空白区');
-            } else {
-                // alert('画布空白区');
-                myChart.dispatchAction({
-                    // 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
-                    type: 'unselect',
-                    // 指定 series 的索引
-                    seriesIndex: 0,
-                    // 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
-                    dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
-                });
-                myChart.dispatchAction({
-                    // 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
-                    type: 'geoUnSelect',
-                    // 指定 series 的索引
-                    seriesIndex: 0,
-                    // 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
-                    dataIndex: new Array(101).fill(null).map((_, i) => i), // 0 代表取消选中 data 中第1项的选中，依此类推
-                });
-            }
-        });
-        window.addEventListener('resize', () => {
-            myChart.resize();
-        });
-    }
-
-    function mapClick(res, myChart) {
-        if (res.componentType !== 'series') {
-            myChart.setOption({
-                series: [{ selected: {} }], // 取消所有省份的选中状态
-            });
-        }
-
-        console.log('res', res);
-        if ('scatter' === res.componentSubType) {
-            // alert(`点击了 ${res.name} 图标`);
-        }
-        if ('map' === res.componentSubType) {
-            // alert(`点击了 ${res.name} 地图`);
-        }
+    function initMap() {
+        Map.initMap({ el: 'mapContainer' });
     }
 
     const routeList = ref([]);
@@ -412,9 +333,9 @@
             }
         }
 
-        .china-map-container {
+        .mapContainer {
             flex: 1;
-            margin: 10px;
+            margin: 10px 0;
             //border: 1px solid red;
         }