update 地图

src/components/chinaMap/chinaHooks.ts

@@ -47,6 +47,110 @@ export const legendList = [
     { img: legend5, text: '地方医院' },
     { img: legend6, text: '直升机' },
 ];
+const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
+
+export function createChartOption({ icons }) {
+    return {
+        tooltip: {
+            show: false,
+            // formatter: (params) => {
+            //     console.log('params', params);
+            //     if (!params?.data?.id) {
+            //         return '';
+            //     }
+            //     return `<div style="color:red;width:300px"> ${params.name}</div>
+            //             <div>id: ${params?.data?.id}</div>`;
+            // },
+        },
+        geo: [
+            {
+                map: 'china',
+                zlevel: 3,
+                aspectScale: 0.8, //长宽比
+                zoom: 1.1,
+                // roam: true,
+                // draggable: true,
+                top: '60',
+                left: 'center',
+                itemStyle: {
+                    areaColor: '#173a58',
+                    shadowColor: '#173a58',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 5,
+                    borderWidth: 6, //外部边框
+                    borderColor: '#6ccffe',
+                },
+            },
+            {
+                map: 'china',
+                zlevel: 2,
+                aspectScale: 0.8, //长宽比
+                zoom: 1.1,
+                // roam: true,
+                // draggable: true,
+                top: '60',
+                left: 'center',
+                itemStyle: {
+                    areaColor: '#1e2c38',
+                    shadowColor: '#1e2c38',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 10,
+                    borderWidth: 6, //外部边框
+                    borderColor: '#384d61',
+                },
+            },
+        ],
+        series: [
+            {
+                map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
+                name: '中国地图',
+                type: 'map',
+                selected: {}, // 默认所有省份都是未选中状态
+                selectedMode: 'single', // 选中模式为单选
+                zlevel: 9,
+                zoom: 1.1,
+                aspectScale: 0.8, //长宽比
+                // roam: true,
+                // draggable: true,
+                hoverAnimation: false,
+                silent: false,
+                top: '60',
+                left: 'center',
+                label: {
+                    show: true,
+                    padding: [0, 10],
+                    height: 31,
+                    lineHeight: 31,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 13,
+                        marginLeft: 5,
+                    },
+                },
+                itemStyle: {
+                    // 给地图添加背景图片
+                    areaColor: {
+                        type: 'pattern',
+                        image: bgImg,
+                        repeat: 'no-repeat',
+                    },
+                    borderColor: '#359de5',
+                    borderWidth: 2, //内部边框,
+                },
+                // 鼠标悬浮
+                emphasis: {
+                    label: {
+                        color: '#fff',
+                    },
+                    itemStyle: {
+                        areaColor: '#008CFF',
+                    },
+                },
+            },
+            ...icons.value,
+        ],
+    };
+}
 
 /**
  * @description 秒转小时

src/components/chinaMap/chinaMap.vue

@@ -15,12 +15,12 @@
                         <a-input v-model:value="formState.end"></a-input>
                     </a-form-item>
                     <a-form-item>
-                        <a-button class="reset-btn">清空</a-button>
+                        <a-button class="reset-btn" @click="clickSearch">清空</a-button>
                         <a-button class="search-btn" @click="searchRoute">路线规划</a-button>
                     </a-form-item>
                 </a-form>
                 <div class="line-container" v-show="showRoutePanel" v-click-outside="outClick">
-                    <div class="has-data">
+                    <div v-show="routeList.length" class="has-data">
                         <div class="line-title"> {{ panelTitle }}</div>
                         <div class="line-content">
                             <div class="start">起点</div>
@@ -33,7 +33,7 @@
                             <div class="end">终点</div>
                         </div>
                     </div>
-                    <div v-show="false" class="empty-data"> 暂无数据</div>
+                    <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
                 </div>
             </div>
             <div class="china-map-container"></div>
@@ -61,11 +61,9 @@
     import { onMounted, ref } from 'vue';
     import * as echarts from 'echarts';
     import mapJson from '/@/components/chinaMap/json/c';
-    import { tabList, mapIcons, legendList, getTimeStr, getKmStr } from './chinaHooks.ts';
+    import { tabList, mapIcons, legendList, getTimeStr, getKmStr, createChartOption } from './chinaHooks.ts';
     import { message } from 'ant-design-vue';
 
-    const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
-
     const formState = ref({
         start: '西安北站',
         end: '',
@@ -84,22 +82,21 @@
             //自定义图片的 路径
             // 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
-        },
+            label: {
-        {
+                borderColor: 'red',
-            type: 'scatter',
+                borderWidth: 2,
-            zlevel: 100,
+                borderType: 'solid',
-            coordinateSystem: 'geo',
+                shadowBlur: '10px',
-            //自定义图片的 位置（lng, lat）
+                shadowColor: 'red',
-            data: [{ name: '太原', value: [112.55, 37.98], id: 'taiyuan' }],
+                shadowOffsetX: '5px',
-            //自定义图片的 大小
+                shadowOffsetY: '5px',
-            symbolSize: [25, 63],
+            },
-            symbol: 'image://' + mapIcons[1], // 图片 URL
         },
     ]);
 
     function changeTab(i) {
-        let x = Math.random() + 3 - Math.random() - i;
+        let x = Math.random() + 5 - Math.random() - i;
-        let y = Math.random() - 2 + Math.random() + i;
+        let y = Math.random() - 5 + Math.random() + i;
         const o = {
             type: 'scatter',
             zlevel: 100,
@@ -110,8 +107,41 @@
             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);
         currentIndex.value = i;
         let myChart = echarts.init(document.querySelector('.china-map-container'));
         initMap(myChart);
@@ -125,91 +155,34 @@
     });
 
     function initMap(myChart) {
-        let option = {
+        let option = createChartOption({ icons });
-            tooltip: {
-                show: false,
-                formatter: '{b0}: {c0}',
-            },
-            geo: [
-                {
-                    map: 'china',
-                    zlevel: 3,
-                    aspectScale: 0.8, //长宽比
-                    zoom: 1.1,
-                    roam: false,
-                    top: '60',
-                    left: 'center',
-                    itemStyle: {
-                        areaColor: '#173a58',
-                        shadowColor: '#173a58',
-                        shadowOffsetX: 0,
-                        shadowOffsetY: 5,
-                        borderWidth: 6, //外部边框
-                        borderColor: '#6ccffe',
-                    },
-                },
-                {
-                    map: 'china',
-                    zlevel: 2,
-                    aspectScale: 0.8, //长宽比
-                    zoom: 1.1,
-                    roam: false,
-                    top: '60',
-                    left: 'center',
-                    itemStyle: {
-                        areaColor: '#1e2c38',
-                        shadowColor: '#1e2c38',
-                        shadowOffsetX: 0,
-                        shadowOffsetY: 10,
-                        borderWidth: 6, //外部边框
-                        borderColor: '#384d61',
-                    },
-                },
-            ],
-            series: [
-                {
-                    map: 'china', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
-                    name: '中国地图',
-                    type: 'map',
-                    zlevel: 9,
-                    zoom: 1.1,
-                    aspectScale: 0.8, //长宽比
-                    hoverAnimation: false,
-                    silent: false,
-                    top: '60',
-                    left: 'center',
-                    label: {
-                        show: true,
-                        padding: [0, 10],
-                        height: 31,
-                        lineHeight: 31,
-                        textStyle: {
-                            color: '#fff',
-                            fontSize: 13,
-                            marginLeft: 5,
-                        },
-                    },
-                    itemStyle: {
-                        // 给地图添加背景图片
-                        areaColor: {
-                            type: 'pattern',
-                            image: bgImg,
-                            repeat: 'no-repeat',
-                        },
-                        borderColor: '#359de5',
-                        borderWidth: 2, //内部边框
-                    },
-                },
-                ...icons.value,
-            ],
-        };
         myChart.setOption(option);
+        // 关闭之前的点击事件
+        myChart.off('click');
         myChart.on('click', function (res) {
-            if ('scatter' === res.componentSubType) {
+            mapClick(res, myChart);
-                alert(`点击了 ${res.name} 图标`);
+        });
-            }
+        myChart.getZr().on('click', (params) => {
-            if ('map' === res.componentSubType) {
+            if (params.target) {
-                alert(`点击了 ${res.name} 地图`);
+                // 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', () => {
@@ -217,12 +190,27 @@
         });
     }
 
+    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} 地图`);
+        }
+    }
+
     const routeList = ref([]);
     const showRoutePanel = ref(false);
     const panelTitle = ref();
 
     function outClick() {
-        console.log('点击外面');
         showRoutePanel.value = false;
     }
 
@@ -275,12 +263,14 @@
                 arr.push(data.destinationName);
                 showRoutePanel.value = true;
                 routeList.value = arr;
-                console.log(arr);
             }
         });
     }
 
-    console.log();
+    function clickSearch() {
+        formState.value.start = '';
+        formState.value.end = '';
+    }
 </script>
 <style lang="less" scoped>
     .center-map {
@@ -304,7 +294,7 @@
 
             .tab {
                 width: calc(100% / 8);
-                height: 43px;
+                height: 40px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -444,6 +434,11 @@
                         flex: 1;
                     }
                 }
+
+                .empty-data {
+                    margin-top: 30%;
+                    text-align: center;
+                }
             }
         }