update

src/components/chinaMap/chinaMap.vue

@@ -66,6 +66,12 @@
                 </div>
             </div>
             <div class="china-map-container"></div>
+
+            <div class="map-legend">
+                <div class="legend-item" v-for="(item,i) in legendList" :key="i">
+                    <div><img class="legend-img" :src="item.img" alt=""> {{ item.text }}</div>
+                </div>
+            </div>
         </div>
         <div class="center-footer">
             <div class="count-item">
@@ -82,8 +88,25 @@
 <script lang="ts" setup>
 import {onMounted, ref} from 'vue'
 import * as echarts from 'echarts';
-import mapJson from '/@/components/chinaMap/json/new'
+import mapJson from '/@/components/chinaMap/json/c'
 
+// import bgImg from '/@/assets/images/china-textur.png'
+const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href
+const mapIcon1 = new URL('/@/assets/img/mapIcon1.png', import.meta.url).href
+const mapIcon2 = new URL('/@/assets/img/mapIcon2.png', import.meta.url).href
+const mapIcon3 = new URL('/@/assets/img/mapIcon3.png', import.meta.url).href
+const mapIcon4 = new URL('/@/assets/img/mapIcon4.png', import.meta.url).href
+const mapIcon5 = new URL('/@/assets/img/mapIcon5.png', import.meta.url).href
+const mapIcon6 = new URL('/@/assets/img/mapIcon6.png', import.meta.url).href
+
+const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href
+const legend2 = new URL('/@/assets/img/legend2.png', import.meta.url).href
+const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href
+const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href
+const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href
+const legend6 = new URL('/@/assets/img/legend6.png', import.meta.url).href
+const mapIcons = [mapIcon1, mapIcon2, mapIcon3, mapIcon4, mapIcon5, mapIcon6]
+const legendList = [{img: legend1, text: '油田医院'}, {img: legend2, text: '医疗点'}, {img: legend3, text: '救护车'}, {img: legend4, text: '合作医院'}, {img: legend5, text: '地方医院'}, {img: legend6, text: '直升机'}]
 const formState = ref({
     user: '',
     password: "",
@@ -123,8 +146,46 @@ const list = ref([
     }
 ])
 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://http://192.168.1.7:9200/src/assets/img/tree.png',  // 图片 URL
+    // 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://' + mapIcon1,  // 图片 URL
+},
+    {
+        type: "scatter",
+        zlevel: 100,
+        coordinateSystem: "geo",
+        //自定义图片的 位置（lng, lat）
+        data: [{name: '太原', value: [112.55, 37.98], id: 'taiyuan'}],
+        //自定义图片的 大小
+        symbolSize: [25, 63],
+        symbol: 'image://' + mapIcon2,  // 图片 URL
+    }])
 
 function changeTab(i) {
+    let x = Math.random() + 3 - Math.random() - i;
+    let y = Math.random() - 2 + Math.random() + i
+    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)
+    initMap()
     list.value = list.value.map(item => {
         item.isChecked = false
         return item
@@ -133,13 +194,16 @@ function changeTab(i) {
     list.value[i].isChecked = true
 }
 
+let myChart = ref(null)
 onMounted(() => {
     initMap();
 })
 
 function initMap() {
-    const bgImg = 'https://img1.baidu.com/it/u=514808758,3636401112&fm=253&fmt=auto&app=120&f=JPEG?w=1139&h=751'
+    // if (!myChart.value) {
-    let myChart = echarts.init(document.querySelector('.china-map-container'));
+    //     myChart.value.clear()
+    // }
+    myChart.value = echarts.init(document.querySelector('.china-map-container'));
     echarts.registerMap('china', mapJson);
     let option = {
         tooltip: {
@@ -156,34 +220,34 @@ function initMap() {
             {
                 map: 'china',
                 zlevel: 3,
-                aspectScale: .75, //长宽比
+                aspectScale: .8, //长宽比
-                zoom: 1.5,
+                zoom: 1.1,
                 roam: false,
-                top: '165',
+                top: '60',
                 left: 'center',
                 itemStyle: {
                     areaColor: "#173a58",
                     shadowColor: "#173a58",
                     shadowOffsetX: 0,
                     shadowOffsetY: 5,
-                    borderWidth: 4,//外部边框
+                    borderWidth: 6,//外部边框
-                    borderColor: "#64cafc",
+                    borderColor: "#6ccffe",
                 }
             },
             {
                 map: 'china',
                 zlevel: 2,
-                aspectScale: .75, //长宽比
+                aspectScale: .8, //长宽比
-                zoom: 1.5,
+                zoom: 1.1,
                 roam: false,
-                top: '165',
+                top: '60',
                 left: 'center',
                 itemStyle: {
                     areaColor: "#1e2c38",
                     shadowColor: "#1e2c38",
                     shadowOffsetX: 0,
                     shadowOffsetY: 10,
-                    borderWidth: 4,//外部边框
+                    borderWidth: 6,//外部边框
                     borderColor: "#384d61",
                 }
             },
@@ -194,11 +258,11 @@ function initMap() {
                 name: '中国地图',
                 type: 'map',
                 zlevel: 9,
-                zoom: 1.5,
+                zoom: 1.1,
-                aspectScale: .75, //长宽比
+                aspectScale: .8, //长宽比
                 hoverAnimation: false,
                 silent: false,
-                top: '165',
+                top: '60',
                 left: 'center',
                 label: {
                     show: true,
@@ -206,21 +270,10 @@ function initMap() {
                     height: 31,
                     lineHeight: 31,
                     textStyle: {
-                        color: "#ddd",
+                        color: "#fff",
                         fontSize: 13,
-                        fontStyle: "italic",
-                        fontWeight: "bold",
                         marginLeft: 5
                     },
-                    emphasis: {
-                        // areaColor: '#2074ed',//鼠标悬浮色
-                        areaColor: {
-                            type: 'pattern',
-                            image: bgImg,
-                            repeat: 'no-repeat'
-                        },
-                        borderWidth: 0,
-                    },
                 },
                 itemStyle: {
                     // 给地图添加背景图片
@@ -229,38 +282,26 @@ function initMap() {
                         image: bgImg,
                         repeat: 'no-repeat'
                     },
-                    borderColor: "#64cafc",
+                    borderColor: "#359de5",
-                    borderWidth: 1,//内部边框
+                    borderWidth: 2,//内部边框
                 },
             },
-            {
+            ...icons.value
-                type: "scatter",
-                zlevel: 100,
-                coordinateSystem: "geo",
-                //自定义图片的 位置（lng, lat）
-                data: [{name: '西安', value: ['108.88', '34.40'], id: 'xian'}],
-                //自定义图片的 大小
-                symbolSize: [50, 50],
-                //自定义图片的 路径
-                // symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png',  // 图片 URL
-                symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567',  // 图片 URL
-            },
-            {
-                type: "scatter",
-                zlevel: 100,
-                coordinateSystem: "geo",
-                //自定义图片的 位置（lng, lat）
-                data: [{name: '太原', value: [112.55, 37.98], id: 'taiyuan'}],
-                //自定义图片的 大小
-                symbolSize: [50, 50],
-                //自定义图片的 路径
-                // symbol: 'image://http://192.168.1.7:9200/src/assets/img/tree.png',  // 图片 URL
-                symbol: 'image://https://img2.baidu.com/it/u=1568770988,2090980470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567',  // 图片 URL
-            }
         ],
-
     };
-    myChart.setOption(option);
+    myChart.value.setOption(option);
+    myChart.value.on('click', function (res) {
+        console.log(res);
+        if ('scatter' === res.componentSubType) {
+            alert(`点击了 ${res.name} 图标`);
+        }
+        if ('map' === res.componentSubType) {
+            alert(`点击了 ${res.name} 地图`);
+        }
+    });
+    window.addEventListener('resize', () => {
+        myChart.value.resize()
+    })
 }
 </script>
 <style lang="less" scoped>
@@ -275,6 +316,7 @@ function initMap() {
         flex: 1;
         display: flex;
         flex-direction: column;
+        position: relative;
     }
 
     .tab-list {
@@ -284,7 +326,7 @@ function initMap() {
 
         .tab {
             width: calc(100% / 8);
-            height: 38px;
+            height: 43px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -304,13 +346,16 @@ function initMap() {
 
     .route-navigation {
         margin: 12px 0;
+        width: 100%;
         height: 46px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #002E64;
         border-radius: 6px;
-        position: relative;
+        position: absolute;
+        top: 40px;
+        z-index: 999;
         transition: all 0.3s;
 
         :deep(.form-item-self) {
@@ -428,9 +473,31 @@ function initMap() {
 
     .china-map-container {
         flex: 1;
+        margin: 10px;
         //border: 1px solid red;
     }
 
+    .map-legend {
+        position: absolute;
+        bottom: 20px;
+        left: 0;
+        width: 200px;
+        //border: 1px solid red;
+        display: flex;
+        flex-wrap: wrap;
+
+        .legend-item {
+            width: 50%;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 30px;
+
+            .legend-img {
+                width: 20px;
+            }
+        }
+    }
+
     .center-footer {
         display: flex;
         justify-content: center;
@@ -461,4 +528,6 @@ function initMap() {
         }
     }
 }
-</style>
+</style>
+
+