定点分析调整

src/utils/olMap/olMap.ts

@@ -971,7 +971,6 @@ export class olMap {
         image: icon
       })
     );
-    debugger
     this.traceFeature = new Feature({
       geometry: new LineString(lineArr)
     });

src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -7,6 +7,7 @@
           <i class="icon-position2" />
           <div class="text1" :title="selectData.event_title">{{ selectData.event_title }}</div>
         </div>
+        <div class="common-btn-primary3" @click="toSelect">定点选取</div>
       </div>
       <div v-else class="search-box">
         <div class="text-box">
@@ -56,7 +57,7 @@
           </div>
         </div>
       </div>
-      <div v-show="!!routeData && routeData.length > 0" class="route-box">
+      <div v-show="showAddress && !!routeData && routeData.length > 0" class="route-box">
         <div class="route-item1">
           <i class="icon-position3" />
           <div class="text1">路线始点：</div>
@@ -66,7 +67,7 @@
         <div class="route-list">
           <div v-for="(item, index) in routeData" :key="index" class="route-item2" @click="drawRoute(item)">
             <div class="text-box1">
-              <div :class="'tag' + index">{{ getTag(index) }}</div>
+              <div :class="'tag tag' + index">{{ getTag(index) }}</div>
               <div class="text1">{{ item.strategy }}</div>
             </div>
             <div class="route-info">
@@ -122,7 +123,7 @@ let showAddress = ref(true);
 let routeData = ref([]);
 let routeLine, startMarker, endMarker;
 let routesAddress = ref('');
-let AMap, map, driving, geocoder;
+let AMap, map, geocoder;
 let eventList = ref([]);
 let selectData = ref({
   event_title: '',
@@ -145,16 +146,18 @@ let total = ref(0);
 let dataList = ref([]);
 const toSelect = () => {
   map.on('click', handleClickMap);
+  showAddress.value = false;
+  routeData.value = [];
+  clearMarker();
+  clearLine();
 };
 const handleClickMap = (e) => {
-  map.off('click', handleClickMap);
-  tempState.longitude = e.lnglat.getLng();
-  tempState.latitude = e.lnglat.getLat();
-  geocoder.getAddress([tempState.longitude, tempState.latitude], (status, result) => {
-    if (status === 'complete' && result.info === 'OK') {
-      tempState.address = result.regeocode.formattedAddress;
-    }
-  });
+  if (AMapType.includes(props.activeMap)) {
+    map.off('click', handleClickMap);
+  } else {
+    map.un('click', handleClickMap);
+  }
+  getAddress([e.lnglat.getLng(), e.lnglat.getLat()]);
 };
 const confirmSelect = () => {
   selectEvent(
@@ -179,10 +182,7 @@ const selectEvent = (item, unFitView) => {
   tempState.address = '';
   tempState.longitude = '';
   tempState.latitude = '';
-  if (!!selectMarker) {
-    selectMarker.setMap(null);
-    selectMarker = null;
-  }
+  clearMarker();
   if (AMapType.includes(props.activeMap)) {
     // 以 icon URL 的形式创建一个途经点
     const icon = new AMap.Icon({
@@ -214,6 +214,9 @@ const selectEvent = (item, unFitView) => {
     );
     const vectorLayer = getMapUtils().getVectorLayer();
     vectorLayer.getSource().addFeature(feature);
+    if (!unFitView) {
+      map.getView().setCenter([item.longitude, item.latitude]);
+    }
   }
   getList();
 };
@@ -255,19 +258,8 @@ const handleRoutes = async (item) => {
 
 const drawRoute = (route) => {
   const path = parseRouteToPath(route);
+  clearLine();
   if (AMapType.includes(props.activeMap)) {
-    if (!!startMarker) {
-      map.remove(startMarker);
-      startMarker = null;
-    }
-    if (!!endMarker) {
-      map.remove(endMarker);
-      endMarker = null;
-    }
-    if (!!routeLine) {
-      routeLine.setMap(null);
-      routeLine = null;
-    }
     const icon1 = new AMap.Icon({
       size: new AMap.Size(19, 31),
       image: startImg
@@ -299,24 +291,11 @@ const drawRoute = (route) => {
       lineJoin: 'round'
     });
     routeLine.setMap(map);
-
     // 调整视野达到最佳显示区域
     map.setFitView([startMarker, endMarker, routeLine]);
   } else {
     const vectorLayer = getMapUtils().getVectorLayer();
     const source = vectorLayer.getSource();
-    if (!!startMarker) {
-      source.removeFeaure(startMarker);
-      startMarker = null;
-    }
-    if (!!endMarker) {
-      source.removeFeaure(endMarker);
-      endMarker = null;
-    }
-    if (!!routeLine) {
-      source.removeFeaure(routeLine);
-      routeLine = null;
-    }
     startMarker = new Feature({
       geometry: new Point(path[0])
     });
@@ -374,12 +353,7 @@ const parseRouteToPath = (route) => {
     path = coordinatesPairs.map((pair) => {
       const [longitude, latitude] = pair.split(',');
       return gcoord.transform([longitude, latitude], gcoord.GCJ02, gcoord.WGS84);
-      // return [parseFloat(longitude), parseFloat(latitude)];
     });
-
-    // for (var j = 0, n = step.path.length; j < n; j++) {
-    //   path.push(step.path[j]);
-    // }
   }
   return path;
 };
@@ -422,16 +396,10 @@ const getList = () => {
     total.value = res.total;
   });
 };
-onMounted(async () => {
-  const gcj02Coord = gcoord.transform(props.location, gcoord.WGS84, gcoord.GCJ02);
-  tempState.longitude = props.location[0];
-  tempState.latitude = props.location[1];
-  map = getMapUtils().getMap();
-  if (AMapType.includes(props.activeMap)) {
-    AMap = getMapUtils().getAMap();
-    //构造路线导航类
-    driving = new AMap.Driving({});
-  }
+const getAddress = async (location) => {
+  const gcj02Coord = gcoord.transform(location, gcoord.WGS84, gcoord.GCJ02);
+  tempState.longitude = location[0];
+  tempState.latitude = location[1];
   // 调用高德逆向地理编码 API
   const response = await fetch(`https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${gcj02Coord[0]},${gcj02Coord[1]}`);
   const result = await response.json();
@@ -440,6 +408,56 @@ onMounted(async () => {
   if (result.status === '1' && result.regeocode) {
     tempState.address = result.regeocode.formatted_address;
   }
+};
+const clearMarker = () => {
+  if (!selectMarker) return;
+  if (AMapType.includes(props.activeMap)) {
+    selectMarker.remove();
+    selectMarker = null;
+  } else {
+    const vectorLayer = getMapUtils().getVectorLayer();
+    const source = vectorLayer.getSource();
+    source.removeFeature(selectMarker);
+    selectMarker = null;
+  }
+};
+const clearLine = () => {
+  if (AMapType.includes(props.activeMap)) {
+    if (!!startMarker) {
+      startMarker.remove();
+      startMarker = null;
+    }
+    if (!!endMarker) {
+      endMarker.remove();
+      endMarker = null;
+    }
+    if (!!routeLine) {
+      routeLine.remove();
+      routeLine = null;
+    }
+  } else {
+    const vectorLayer = getMapUtils().getVectorLayer();
+    const source = vectorLayer.getSource();
+    if (!!startMarker) {
+      source.removeFeature(startMarker);
+      startMarker = null;
+    }
+    if (!!endMarker) {
+      source.removeFeature(endMarker);
+      endMarker = null;
+    }
+    if (!!routeLine) {
+      source.removeFeature(routeLine);
+      routeLine = null;
+    }
+  }
+};
+onMounted(() => {
+  map = getMapUtils().getMap();
+  if (AMapType.includes(props.activeMap)) {
+    AMap = getMapUtils().getAMap();
+  }
+  getAddress(props.location);
 });
 </script>
 
@@ -633,6 +651,7 @@ onMounted(async () => {
         height: 30px;
         background: url('@/assets/images/electronicDisasterMapManage/close.png') no-repeat;
         background-size: 100% 100%;
+        cursor: pointer;
         margin-left: 5px;
       }
     }
@@ -644,26 +663,25 @@ onMounted(async () => {
       cursor: pointer;
       .text-box1 {
         display: flex;
-        .tag0 {
+        padding: 0 15px;
+        .tag {
           color: #fff;
-          background-color: #e65d63;
+          background-color: #2c81ff;
           border-radius: 10px;
           padding: 2px 6px;
           font-size: 36px;
         }
+        .tag0 {
+          color: #fff;
+          background-color: #e65d63;
+        }
         .tag1 {
           color: #fff;
           background-color: #f0b13c;
-          border-radius: 10px;
-          padding: 2px 6px;
-          font-size: 36px;
         }
         .tag2 {
           color: #fff;
           background-color: #6bc26b;
-          border-radius: 10px;
-          padding: 2px 6px;
-          font-size: 36px;
         }
         .text1 {
           font-size: 38px;
@@ -671,10 +689,9 @@ onMounted(async () => {
         }
       }
       .route-info {
-        display: flex;
         background-color: #2b3858;
         border: 1px solid #2e5174;
-        padding: 3px 5px;
+        padding: 5px 15px;
         margin-top: 10px;
         display: flex;
         align-items: center;
@@ -683,19 +700,19 @@ onMounted(async () => {
           align-items: center;
           .icon1 {
             display: inline-block;
-            width: 14px;
-            height: 13px;
+            width: 38px;
+            height: 34px;
             background: url('@/assets/images/electronicDisasterMapManage/icon3.png') no-repeat;
             background-size: 100% 100%;
-            margin-right: 5px;
+            margin-right: 15px;
           }
           .icon2 {
             display: inline-block;
-            width: 13px;
-            height: 16px;
+            width: 34px;
+            height: 42px;
             background: url('@/assets/images/electronicDisasterMapManage/icon4.png') no-repeat;
             background-size: 100% 100%;
-            margin-right: 5px;
+            margin-right: 15px;
           }
           .gradient-text2 {
             font-size: 40px;