场站+服务管理功能开发，角色权限完善，总览弹窗接口联调

web/src/components/Home/Map.vue

@@ -1,10 +1,28 @@
 <template>
   <div class="map">
-    <div>
-      <div class="icon1" @click="showModal(testVal)"></div>
-      <div class="icon"></div>
+   
+    <div ref="mapContent" class="mapContent" >
+      <tdt-map
+        ref="tiandituMap"
+        :center="center"
+        :zoom="zoom"
+        @init="init"
+        map-style="black"
+        class="amap-box"
+        :mid="'amap-vue'"
+      >
+        <tdt-marker
+          v-for="marker in markers"
+          :position="[marker.lon, marker.lat]"
+          :key="marker.id"
+          :icon="marker.iconMap"
+          style="width: 20px; height: 20px"
+          @click="clickArrayMarker(marker)"
+          :title="marker.name"
+        >
+        </tdt-marker>
+      </tdt-map>
     </div>
-    <div ref="mapContent"></div>
     <a-modal
       class="modal"
       ref="modal"
@@ -16,10 +34,7 @@
       :mask="true"
     >
       <template #closeIcon>
-        <i
-          class="iconfont icon-guanbi"
-          style="font-size:20px; cursor: pointer; color: #fff; "
-        />
+        <i class="iconfont icon-guanbi" style="font-size: 20px; cursor: pointer; color: #fff" />
       </template>
       <div class="modal-content">
         <div class="home-modal">
@@ -32,39 +47,133 @@
 <script>
 import { getReq, postReq } from '@/request/api'
 import Modal from '@/components/Home/Modal.vue'
+import { loadTMap } from '@/utils/loadTMap'
+import {gcj02ToWgs84} from '@/utils/gcj02ToWgs84'
+import { TdtMap } from 'vue-tianditu'
+
 export default {
   name: 'Map',
-  components: { Modal },
+  components: { Modal, TdtMap },
 
   data() {
     return {
+      center: [],
+      // zoom: 16,
+      zoom: 2,
+      map: null,
+      currentMarker: {},
       showCtrModal: false,
+      markers: [],
+
       testVal: {
         name: '场站211',
         id: '2'
       },
-      changeStationId:''
+      changeStationId: '',
+      targetKey: '98d875e39cf0ebab01e56a0f86c5ed44'
     }
   },
-  mounted() {},
+  mounted() {
+    this.initMap()
+    // this.getMarkList()
+  },
   methods: {
-    async showModal(currentVal) {
-      this.changeStationId=currentVal.id
-      console.log(currentVal, 'cccccccccccccccccccccc')
-      this.showCtrModal = true
+    init(map) {
+      this.map = map
+      // console.log(this.map.getCenter(),"this.map.getCenter()")
+      this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
+      // 监听地图加载完成事件
+      this.map.addEventListener('load', () => {
+        const c= this.map.getCenter()
+        this.center =gcj02ToWgs84(c);
+        console.log('GCJ02坐标:', this.center);
+      });
+      this.getMarkList()
+    },
+    async getMarkList() {
       try {
-        const query = {
-          // station_id:this.changeStationId
+        let query = {
+          role_id: localStorage.getItem('user')[0].role_id
         }
-        const res = await postReq(query, '')
-        if (res.code == 200) {
-          this.modalInfo = res.data.records
+        const res = await getReq('/queryStationList', query)
+        if (res.errcode === 0) {
+          this.markers = res.data.map((item) => {
+            console.log(gcj02ToWgs84(+item.lon, +item.lat),"gcj02ToWgs84(+item.lon, +item.lat)")
+            let wgs = +item.lat && +item.lon ? gcj02ToWgs84(+item.lon, +item.lat) : [null, null]
+            return {
+              ...item,
+              lon: wgs[0],
+              lat: wgs[1],
+              iconMap: !+item.status
+                ? require('../../assets/home/homeIcon1.png')
+                : require('../../assets/home/homeIcon.png')
+            }
+          })
+          console.log("this.markers ",this.markers )
+        } else {
+          this.markers = []
+          throw res
+        }
+      } catch (error) {
+        console.log(error,'eeeeeeeeeeeeeeee')
+      }
+    },
+    async initMap() {
+      try {
+        const [mapKey] = await Promise.all([this.getSysConfig('map-key')])
+        // const gcj02LngLat=map.getCenter()
+        // console.log(gcj02LngLat.getLng())
+        console.log(mapKey,"mapKey")
+        await loadTMap(mapKey)
+        
+
+        // 创建地图实例（需要HTML中存在id为mapContainer的元素）  
+        // this.map = new T.Map("amap-vue");  
+        // // this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12); // 初始中心点  
+        
+        // const centerGcj02 = this.map.getCenter();  
+        // console.log("GCJ02坐标:", centerGcj02.getLng(), centerGcj02.getLat());  
+        // const centerWgs84=gcj02ToWgs84(centerGcj02.getLng(),centerGcj02.getLat())
+
+
+
+        // this.center =[]
+      } catch (err) {
+        console.error('天地图加载失败:', err)
+      }
+    },
+    async getSysConfig() {
+      let sysConfig
+      try {
+        const query = {}
+        const res = await getReq('/', query)
+        if (res.errcode === 0) {
+          sysConfig = res.data.value
         } else {
           throw res
         }
-      } catch (err) {
-        console.log(err, 'eeeeeeeeeeeeeeeerr')
+      } catch (error) {
+        sysConfig = this.targetKey
       }
+      return sysConfig
+    },
+    async clickArrayMarker(currentVal) {
+      this.changeStationId = currentVal.station_id
+      console.log(currentVal, 'cccccccccccccccccccccc')
+      this.showCtrModal = true
+      // try {
+      //   const query = {
+      //     // station_id:this.changeStationId
+      //   }
+      //   const res = await postReq(query, '')
+      //   if (res.errcode === 0) {
+      //     this.modalInfo = res.data.records
+      //   } else {
+      //     throw res
+      //   }
+      // } catch (err) {
+      //   console.log(err, 'eeeeeeeeeeeeeeeerr')
+      // }
     }
   }
 }
@@ -73,6 +182,10 @@ export default {
 .map {
   width: 100%;
   height: 100%;
+
+  .mapContent{
+    height:100%;
+  }
   .icon1 {
     width: 32px;
     height: 80px;
@@ -112,11 +225,11 @@ export default {
       margin: auto;
       box-shadow: none;
       background: transparent;
-.ant-modal-close{
-  position: absolute;
-    right: 0;
-    top: 3px;
-}
+      .ant-modal-close {
+        position: absolute;
+        right: 0;
+        top: 3px;
+      }
       .ant-modal-body {
         height: calc(100% - 45px);
         color: #fff;
@@ -148,5 +261,9 @@ export default {
   .home-modal {
     height: 100%;
   }
+
+  :deep(.tdt-marker-icon){
+    height:auto!important;
+  }
 }
 </style>