定点分析调整

src/components/Map/YztMap/index.vue

@@ -4,6 +4,7 @@
       ref="mapRef"
       id="YztMap"
       class="map-container"
+      :class="{ 'custom-cursor': mapStore.isMapSelect }"
       :style="{
         width: width,
         height: height
@@ -25,6 +26,7 @@ import { getDictLabel } from '@/utils/dict';
 import { methodList, titleList } from '../data';
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
+import useMapStore from '@/store/modules/map';
 
 interface Props {
   activeMap: string;
@@ -36,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
+const mapStore = useMapStore();
 const emits = defineEmits(['update:showMask', 'selectGraphics', 'handleShowWarehouse', 'handleShowVideo', 'handleShowPeople']);
 
 const mapRef = ref(null);
@@ -404,4 +407,9 @@ defineExpose({ getMap, getDrawTool, getMapUtils, addMarker, clearMarker });
     border-top: none;
   }
 }
+.custom-cursor {
+  cursor:
+    url('@/assets/images/map/mark.png') 13 31,
+    auto !important;
+}
 </style>

src/components/Map/index.vue

@@ -1,13 +1,12 @@
 <template>
   <div ref="containerRef" class="map-container">
-    <div id="aMap" class="map-container2" :style="{ width: width, height: height }"></div>
+    <div id="aMap" class="map-container2" :class="{ 'custom-cursor': mapStore.isMapSelect }" :style="{ width: width, height: height }" />
     <rightTool :mapState="mapState" type="AMap" :showMask="showMask" @changeShowMask="changeShowMask" />
   </div>
 </template>
 
 <script setup lang="ts" name="Map">
 import rightTool from './rightTool.vue';
-import ScaleLine from 'ol/control/ScaleLine';
 import { useAMap } from '@/hooks/AMap/useAMap';
 import { useDrawTool } from '@/hooks/AMap/useDrawTool';
 import { getPointInfoList } from '@/api/globalMap';
@@ -16,6 +15,7 @@ import { PointType } from '@/api/globalMap/type';
 import { methodList, titleList } from './data';
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
+import useMapStore from '@/store/modules/map';
 import mmJson from '@/assets/json/mm2.json';
 interface Props {
   activeMap: string;
@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
+const mapStore = useMapStore();
 
 const emits = defineEmits([
   'update:showMask',
@@ -455,4 +456,9 @@ defineExpose({
     border-radius: 6px;
   }
 }
+.custom-cursor {
+  cursor:
+    url('@/assets/images/map/mark.png') 13 31,
+    auto !important;
+}
 </style>

src/store/modules/map.ts

@@ -11,9 +11,23 @@ export const useMapStore = defineStore('map', () => {
     trackState.data = data;
     trackState.show = true;
   };
+
+  // 是否在选点
+  const isMapSelect = ref(false);
+
+  const setIsMapSelect = (flag: boolean) => {
+    isMapSelect.value = flag;
+  };
+
+  const getIsMapSelect = () => {
+    return isMapSelect.value;
+  };
   return {
     trackState,
-    setTrackState
+    setTrackState,
+    isMapSelect,
+    setIsMapSelect,
+    getIsMapSelect
   };
 });
 

src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -69,7 +69,7 @@
             v-for="(item, index) in routeData"
             :key="index"
             :class="index === selectIndex ? 'route-item2 route-item2-active' : 'route-item2'"
-            @click="drawRoute(item)"
+            @click="drawRoute(item, index)"
           >
             <div class="text-box1">
               <div :class="'tag tag' + index">{{ getTag(index) }}</div>
@@ -103,6 +103,14 @@ import { getEmergencyRescuePointInfoList } from '@/api/globalMap';
 import markImg from '@/assets/images/map/mark.png';
 import startImg from '@/assets/images/map/start.png';
 import endImg from '@/assets/images/map/end.png';
+import gcoord from 'gcoord';
+import Icon from 'ol/style/Icon';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import Style from 'ol/style/Style';
+import { LineString } from 'ol/geom';
+import { Stroke } from 'ol/style';
+import useMapStore from '@/store/modules/map';
 
 interface Props {
   location?: string | number[];
@@ -111,22 +119,16 @@ interface Props {
 const AMapType = ['vectorgraph', 'satellite'];
 const props = withDefaults(defineProps<Props>(), {});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { emergency_resource, disaster_relief_material } = toRefs<any>(proxy?.useDict('emergency_resource', 'disaster_relief_material'));
-import gcoord from 'gcoord';
-import Icon from 'ol/style/Icon';
-import Feature from 'ol/Feature';
-import Point from 'ol/geom/Point';
-import Style from 'ol/style/Style';
-import { LineString } from 'ol/geom';
-import { Stroke } from 'ol/style';
+const { disaster_relief_material } = toRefs<any>(proxy?.useDict('disaster_relief_material'));
 
+const mapStore = useMapStore();
 const amapKey = 'e45d4caa2bef3c84714a2ed9b1e27d98';
 let getMapUtils = inject('getMapUtils');
 let showAddress = ref(true);
 let routeData = ref([]);
 let routeLine, startMarker, endMarker;
 let routesAddress = ref('');
-let AMap, map, geocoder;
+let AMap, map;
 let eventList = ref([]);
 let selectData = ref({
   event_title: '',
@@ -149,6 +151,7 @@ let total = ref(0);
 let dataList = ref([]);
 const toSelect = () => {
   map.on('click', handleClickMap);
+  mapStore.setIsMapSelect(true);
   showAddress.value = false;
   routeData.value = [];
   clearMarker();
@@ -160,6 +163,7 @@ const handleClickMap = (e) => {
   } else {
     map.un('click', handleClickMap);
   }
+  mapStore.setIsMapSelect(false);
   getAddress([e.lnglat.getLng(), e.lnglat.getLat()]);
 };
 const confirmSelect = () => {
@@ -223,6 +227,44 @@ const selectEvent = (item, unFitView) => {
   }
   getList();
 };
+const createMarks = (item, unFitView) => {
+  clearMarker();
+  if (AMapType.includes(props.activeMap)) {
+    // 以 icon URL 的形式创建一个途经点
+    const icon = new AMap.Icon({
+      size: new AMap.Size(19, 31),
+      image: markImg
+    });
+    selectMarker = new AMap.Marker({
+      position: new AMap.LngLat(item.longitude, item.latitude),
+      icon: icon,
+      offset: new AMap.Pixel(-13, -30)
+    });
+    selectMarker.setMap(map);
+    if (!unFitView) {
+      map.setFitView([selectMarker]);
+    }
+  } else {
+    const icon = new Icon({
+      src: markImg,
+      width: 19,
+      height: 31
+    });
+    const feature = new Feature({
+      geometry: new Point([item.longitude, item.latitude])
+    });
+    feature.setStyle(
+      new Style({
+        image: icon
+      })
+    );
+    const vectorLayer = getMapUtils().getVectorLayer();
+    vectorLayer.getSource().addFeature(feature);
+    if (!unFitView) {
+      map.getView().setCenter([item.longitude, item.latitude]);
+    }
+  }
+};
 let selectIndex = ref(-1);
 const handleRoutes = async (item) => {
   selectIndex.value = -1;
@@ -405,6 +447,7 @@ const getAddress = async (location) => {
   if (result.status === '1' && result.regeocode) {
     tempState.address = result.regeocode.formatted_address;
   }
+  createMarks({ longitude: location[0], latitude: location[1] }, true);
 };
 const clearMarker = () => {
   if (!selectMarker) return;
@@ -571,6 +614,7 @@ onMounted(() => {
         align-items: center;
         padding: 7px 0;
         border-bottom: 1px solid #4574d5;
+        cursor: pointer;
         .text-box2 {
           .text2 {
             font-size: 14px;

src/views/globalMap/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div id="globalMap">
     <div class="global-map">
-      <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
       <YztMap
-        v-else-if="['satellite2', 'satellite3', 'imageMap', 'imageMap2'].includes(activeMap)"
+        v-if="['satellite2', 'satellite3', 'imageMap', 'imageMap2'].includes(activeMap)"
         ref="map2Ref"
         v-model:showMask="showMask"
         :active-map="activeMap"
@@ -223,6 +222,7 @@ const clickMenu = (item, dataList) => {
       map = getMap();
       //为地图注册click事件获取鼠标点击出的经纬度坐标
       map.on('click', handleClickMap);
+      mapStore.setIsMapSelect(true);
     }
   }
 };
@@ -326,33 +326,37 @@ let showNearbyVideos = ref(false);
 let showRainfall = ref(false);
 let location = ref([]);
 watch(showNearbyVideos, () => {
-  if (!showNearbyVideos.value) {
-    location.value = [];
-    if (!!tempMenu.value && !!tempMenu.value.name) {
-      leftMenuRef.value.setMenuChange(tempMenu.value, false);
-      tempMenu.value = {};
-      if (AMapType.includes(activeMap.value)) {
-        map.off('click', handleClickMap);
-      } else {
-        map.un('click', handleClickMap);
-      }
-    }
+  if (!!showNearbyVideos.value) {
+    closeClickMap();
+  } else {
+    clearData();
   }
 });
 watch(showRainfall, () => {
-  if (!showRainfall.value) {
-    location.value = [];
-    if (!!tempMenu.value && !!tempMenu.value.name) {
-      leftMenuRef.value.setMenuChange(tempMenu.value, false);
-      tempMenu.value = {};
-      if (AMapType.includes(activeMap.value)) {
-        map.off('click', handleClickMap);
-      } else {
-        map.un('click', handleClickMap);
-      }
-    }
+  if (!!showRainfall.value) {
+    closeClickMap();
+  } else {
+    clearData();
   }
 });
+const clearData = () => {
+  location.value = [];
+  if (!!tempMenu.value && !!tempMenu.value.name) {
+    leftMenuRef.value.setMenuChange(tempMenu.value, false);
+    tempMenu.value = {
+      name: '',
+      checked: false
+    };
+  }
+};
+const closeClickMap = () => {
+  if (AMapType.includes(activeMap.value)) {
+    map.off('click', handleClickMap);
+  } else {
+    map.un('click', handleClickMap);
+  }
+  mapStore.setIsMapSelect(false);
+};
 // 显示附近视频
 const handleShowVideo = (data) => {
   location.value = [data.longitude, data.latitude];
@@ -377,6 +381,7 @@ const handleClickMap = (e) => {
     } else {
       map.un('click', handleClickMap);
     }
+    mapStore.setIsMapSelect(false);
     rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item, nowLocation);
   }
 };
@@ -432,7 +437,12 @@ const initDataToPlay = (data) => {
 // })
 onBeforeUnmount(() => {
   if (!!map) {
-    map.off('click', handleClickMap);
+    if (AMapType.includes(activeMap.value)) {
+      map.off('click', handleClickMap);
+    } else {
+      map.un('click', handleClickMap);
+    }
+    mapStore.setIsMapSelect(false);
   }
   if (!!addMarkersTimer) {
     clearInterval(addMarkersTimer);