地图修改

.env.development

@@ -6,7 +6,7 @@ ENV = 'development'
 
 # 共享电动车管理系统/开发环境
 # VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
-VUE_APP_BASE_API = 'http://localhost:8080'
+VUE_APP_BASE_API = 'http://192.168.2.189:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/system/area.js

@@ -54,6 +54,14 @@ export function updateArea(data) {
     data: data
   })
 }
+// 修改导览
+export function putguide(data) {
+  return request({
+    url: '/system/area/guide',
+    method: 'put',
+    data: data
+  })
+}
 // 修改运营区
 export function updateArea2(data) {
   return request({

src/components/Map/TrajectoryMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
+  <div class="place-search-map" :style="{ width: width, height: height }" v-loading="loading">
     <div id="container"></div>
     <div class="input-card">
       <h4>轨迹回放控制</h4>
@@ -52,7 +52,7 @@ export default {
       loading: false,
       keyword: null,
       markers: [],
-      line:[],
+      line: [],
       area: {
         province: '福建省',
         city: '宁德市',
@@ -99,7 +99,40 @@ export default {
     // 显示轨迹
     trajectory() {
       this.line = JSON.parse(this.tripRouteStr)
-      console.log("this.line================"+this.line)
+      console.log("this.line================" + this.line)
+      let abb;
+      try {
+        abb = JSON.parse(this.tripRouteStr);
+      } catch (error) {
+        console.error("Error parsing tripRouteStr:", error);
+        return;
+      }
+      let latitude = parseFloat(abb[0][1]);
+      let longitude = parseFloat(abb[0][0]);
+      let latitude1 = parseFloat(abb[abb.length - 1][1]);
+      let longitude1 = parseFloat( abb[abb.length - 1][0]);
+      
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: [longitude, latitude],
+        icon: new AMap.Icon({
+          size: new AMap.Size(25, 38),  // 图标大小
+          image: "https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr",
+          imageSize: new AMap.Size(25, 38)  // 图标图片大小
+        }),
+        offset: new AMap.Pixel(-12.5, -19.5),
+      });
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: [longitude1, latitude1],
+        icon: new AMap.Icon({
+          size: new AMap.Size(25, 38),  // 图标大小
+          image: "https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx",
+          imageSize: new AMap.Size(25, 38)  // 图标图片大小
+        }),
+        offset: new AMap.Pixel(-12.5, -19.5),
+      });
+      // console.log(latitude,longitude,'longitudelongitudelongitude');
       let line = this.line;
       this.marker = new AMap.Marker({
         map: this.map,
@@ -196,7 +229,7 @@ export default {
     line-height: 1.5;
     border-radius: 1rem;
     -webkit-appearance: button;
-    cursor:pointer;
+    cursor: pointer;
   }
 
   .input-item {

src/views/system/area/guide.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="input-card-right">
       <div class="img">
-        <image-upload v-model="picture" />
+        <image-upload :limit="1" :isShowTip="false" v-model="picture" />
       </div>
 
       <el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')">
@@ -16,8 +16,12 @@
       <el-button @click="generateMap" :disabled="!canGenerateMap">
         生成导览地图
       </el-button>
+
+      <el-button @click="saveMap" :disabled="!canSaveMap">
+        保存
+      </el-button>
     </div>
-   
+
     <div id="amap-container" class="map-container"></div>
 
     <div class="coordinates">
@@ -25,15 +29,16 @@
       <div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div>
     </div>
   </div>
-  
 </template>
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import globalConfig from '@/utils/config/globalConfig';
-import {getArea, optionselect as getAreaOptionselect} from "@/api/system/area";
+import { getArea, putguide } from "@/api/system/area";
+
 export default {
   name: "NewPage",
+
   data() {
     return {
       map: null,
@@ -44,17 +49,31 @@ export default {
       picture: '',
       buttonStyleActive: 'background-color: #409EFF; color: white;',
       buttonStyleInactive: 'background-color: #fff; color: #409EFF;',
+      areaLon: null,
+      areaLat: null,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        parkingName: null,
+        areaId: null,
+        type: "2"
+      },
+      // 默认区域id
+      defaultAreaId: "",
+      isMapGenerated: false,
     };
   },
   computed: {
     canGenerateMap() {
       return this.picture && this.topRightCoord && this.bottomLeftCoord;
+    },
+    canSaveMap() {
+      return this.isMapGenerated;
     }
   },
   created() {
     const areaId = this.$route.params && this.$route.params.areaId;
     this.getArea(areaId);
-    // this.getAreaList();
   },
   mounted() {
     this.initMap();
@@ -67,7 +86,6 @@ export default {
         this.areaLon = response.data.longitude;
         this.areaLat = response.data.latitude;
         this.defaultAreaId = response.data.areaId;
-        this.getList();
       });
     },
     initMap() {
@@ -84,6 +102,7 @@ export default {
         this.map = new AMap.Map("amap-container", {
           viewMode: "3D",
           zoom: 13,
+          center: [this.areaLon, this.areaLat], // 初始化地图中心点位置
         });
         this.map.setFitView();
         this.map.on('click', this.handleMapClick);
@@ -93,33 +112,49 @@ export default {
     },
     setClickType(type) {
       this.clickType = type;
+      // 清除相应的坐标和标记
+      if (type === 'topRight' && this.topRightCoord) {
+        this.clearMarker('topRight');
+        this.topRightCoord = null;
+      } else if (type === 'bottomLeft' && this.bottomLeftCoord) {
+        this.clearMarker('bottomLeft');
+        this.bottomLeftCoord = null;
+      }
     },
     handleMapClick(event) {
       const lnglat = event.lnglat;
 
+      // 只有在点击了“右上角坐标”或“左下角坐标”按钮后才能添加标记
       if (this.clickType === 'topRight') {
         this.topRightCoord = lnglat;
+        this.addMarker(lnglat, 'topRight');
       } else if (this.clickType === 'bottomLeft') {
         this.bottomLeftCoord = lnglat;
+        this.addMarker(lnglat, 'bottomLeft');
       }
 
-      // 创建标记
-      const marker = new AMap.Marker({
-        position: lnglat,
-      });
-      this.map.add(marker);
-      this.markers.push(marker);
-
       // 清除点击类型
       this.clickType = null;
     },
-    clearMarkers() {
-      this.markers.forEach(marker => {
-        this.map.remove(marker);
+    addMarker(lnglat, type) {
+      // 清除之前的标记
+      this.clearMarker(type);
+
+      // 创建新标记
+      const marker = new AMap.Marker({
+        position: lnglat,
+      });
+      this.map.add(marker);
+      this.markers.push({ marker, type });
+    },
+    clearMarker(type) {
+      this.markers = this.markers.filter(({ marker, type: markerType }) => {
+        if (markerType === type) {
+          this.map.remove(marker);
+          return false;
+        }
+        return true;
       });
-      this.markers = [];
-      this.topRightCoord = null;
-      this.bottomLeftCoord = null;
     },
     generateMap() {
       if (!this.canGenerateMap) {
@@ -136,14 +171,20 @@ export default {
       const topRight = lnglatToFixed(this.topRightCoord);
       const bottomLeft = lnglatToFixed(this.bottomLeftCoord);
 
+      console.log('Top Right:', topRight);
+      console.log('Bottom Left:', bottomLeft);
+
       // 计算边界
       const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]);
 
+      console.log('Bounds:', bounds);
+
       // 创建图片图层
       const imageLayer = new AMap.ImageLayer({
         url: this.picture,
         bounds: bounds,
-        zooms: [15, 20]
+        zooms: [15, 20],
+        zIndex: 999 // 设置zIndex确保图层在其他图层之上
       });
 
       // 清除现有图层
@@ -155,6 +196,34 @@ export default {
 
       // 添加图片图层
       this.map.add(imageLayer);
+
+      // 设置地图已生成的标志
+      this.isMapGenerated = true;
+    },
+    saveMap() {
+      if (!this.canSaveMap) {
+        this.$message.error('请先生成导览地图');
+        return;
+      }
+
+      // 格式化坐标为字符串格式，不包含方括号
+      const formatLngLat = (lnglat) => `${lnglat.lng},${lnglat.lat}`;
+
+      // 保存逻辑
+      const mapData = {
+        guideMap: this.picture,
+        upperRight: formatLngLat(this.topRightCoord),
+        lowerLeft: formatLngLat(this.bottomLeftCoord),
+        areaId: this.defaultAreaId
+      };
+
+      putguide(mapData).then(response => {
+        // 处理更新后的响应
+      });
+
+      // 例如，将 mapData 发送到后端保存
+      console.log('保存地图数据:', mapData);
+      this.$message.success('地图数据已保存');
     }
   },
 };
@@ -172,11 +241,14 @@ export default {
 }
 
 .input-card-right {
+  position: fixed;
+  top: 100px;
+  left: 230px;
+  z-index: 100;
   width: 100%;
   display: flex;
   flex-wrap: nowrap;
   align-items: flex-end;
-  // justify-content: center;
   margin-bottom: 10px;
 }
 
@@ -193,4 +265,4 @@ export default {
   padding: 10px;
   border-radius: 5px;
 }
-</style>
+</style>