update 添加图标 完善地图功能

src/components/chinaMap/chinaMap.vue

@@ -19,7 +19,7 @@
                         <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 v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
                     <div v-show="routeList.length" class="has-data">
                         <div class="line-title"> {{ panelTitle }}</div>
                         <div class="line-content">
@@ -36,7 +36,9 @@
                     <div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
                 </div>
             </div>
-            <div class="mapContainer" id="mapContainer"></div>
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+                <div id="mapContainer" class="mapContainer"></div>
+            </div>
             <div v-show="false" id="container"></div>
             <div v-show="false" id="panel"></div>
             <div class="map-legend">
@@ -44,9 +46,10 @@
                     <div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
                 </div>
             </div>
+            <!--            <div class="level">地图层级：{{ level }}</div>-->
         </div>
         <div class="center-footer">
-            <div class="count-item">
+            <div class="count-item" @click="test">
                 <div class="num">1054</div>
                 <div class="text">累计受理</div>
             </div>
@@ -59,9 +62,16 @@
 </template>
 <script lang="ts" setup>
     import { onMounted, ref } from 'vue';
+    import $bus from '/@/utils/bus.ts';
+
     import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
-    import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch, TabType, aircraft } from '/@/components/chinaMap/chinaHooks';
+    import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
+
+    function test() {
+        Map.clearActiveHospital();
+        console.log('清空了');
+    }
 
     const formState = ref({
         start: '西安北站',
@@ -74,27 +84,66 @@
         // if (i == currentIndex.value) {
         //     return;
         // }
-        currentIndex.value = i;
+
+        currentIndex.value = i; // 地方医院
+        if (TabType.diFangYiYuan == item.type) {
+            Map.clearActiveHospital();
+            Map.map.on('moveend', logMapinfo);
+            return;
+        } else {
+            Map.clearActiveHospital();
+            Map.map.off('moveend', logMapinfo);
+        }
+
         // 直升机
         if (TabType.zhiShengJi == item.type) {
             Map.createAircraft(aircraft);
             return;
         }
+
         getMapData(item.type, { type: item.type });
     }
 
-    async function getMapData(type, params = {}) {
-        const { code, result } = await mapApiSwitch(type, params);
-        if (code == 200 && Array.isArray(result) && result.length > 0) {
-            Map.createOverlay(result);
+    function logMapinfo() {
+        let zoom = Map.map.getZoom();
+        if (zoom > 6) {
+            Map.map.getCity(function (info) {
+                const { citycode } = info;
+                Map.createActiveHospital(citycode);
+            });
         }
-        console.log('--->data', result);
+    }
+
+    const level = ref(0);
+
+    function setLevel() {
+        //获取当前地图级别
+        level.value = Map.map.getZoom();
+    }
+
+    async function getMapData(type, params = {}) {
+        try {
+            const { code, result } = await mapApiSwitch(type, params);
+            if (code == 200 && Array.isArray(result) && result.length > 0) {
+                Map.createOverlay(result);
+            }
+        } catch (e) {
+            console.log('error------------------------------');
+            console.warn(e);
+        }
+        1;
+        // console.log('--->data', result);
     }
 
     onMounted(() => {
         console.log('reload');
         initMap();
         getMapData(tabList[0].type);
+        Map.map.on('moveend', setLevel);
+        Map.map.on('zoomend', setLevel);
+        $bus.on('sendPosition', ({ lon, lat }) => {
+            Map.createMarker({ lon, lat });
+        });
     });
 
     function initMap() {
@@ -221,7 +270,7 @@
             background: #002e64;
             border-radius: 6px;
             position: absolute;
-            top: 40px;
+            top: 36px;
             z-index: 999;
             transition: all 0.3s;
 
@@ -343,14 +392,15 @@
 
         .mapContainer {
             flex: 1;
+            height: calc(100% + 22px);
             margin: 10px 0;
             //border: 1px solid red;
         }
 
         .map-legend {
             position: absolute;
-            bottom: 20px;
-            left: 0;
+            bottom: 15px;
+            left: 10px;
             width: 200px;
             //border: 1px solid red;
             display: flex;
@@ -368,6 +418,14 @@
             }
         }
 
+        .level {
+            position: absolute;
+            top: 50px;
+            left: 400px;
+            font-size: 18px;
+            color: #fff;
+        }
+
         .center-footer {
             display: flex;
             justify-content: center;