地图调整

src/hooks/AMap/useAMap.ts

@@ -4,6 +4,7 @@ import { deepClone, initDrag } from '@/utils';
 import { mergeGeoJsonPolygons, wgs_gcj_encrypts } from '@/utils/gisUtils';
 import carImg from '@/assets/images/car.png';
 import { iconList } from '@/components/Map/mapData';
+import typhoonImg from '@/assets/images/typhoon/typhoon.png';
 
 export function useAMap(options) {
   let AMap, map, scale, cluster;
@@ -287,7 +288,7 @@ export function useAMap(options) {
         if (data.dataType === 41) {
           data.name1 = data.name;
         }
-        if (data.dataType === 41 && (data.temp === '1' || data.infoType === '防御第6号台风-临时队伍')) {
+        if (data.dataType === 41 && data.infoType === '临时队伍') {
           data.image = iconConfig.image2;
           data.imageHover = iconConfig.imageHover2;
           data.size = iconConfig.size2;
@@ -808,74 +809,78 @@ export function useAMap(options) {
   //生成路径图
   const createRoadMap = (data) => {
     if (!roadMapLayer) {
-      roadMapLayer = new AMap.LabelsLayer({
-        collision: false,
-        allowCollision: true,
-        opacity: 1,
-        zIndex: 999
-        // visible,
-        // zooms
-      });
-
+      roadMapLayer = new AMap.LayerGroup();
       map.add(roadMapLayer);
     }
     const nodes = [];
-    data.forEach((item) => {
+    let isForecast = false;
+    data.forEach((item, index) => {
       const node = generateNode(item);
       nodes.push(node);
-      // roadMapLayer.add(node);
+      // 节点间连线
+      if (index > 0) {
+        if (!isForecast && !!item.fcid) {
+          isForecast = true;
+          const node = generateEyeWind(item);
+          nodes.push(node);
+          map.setCenter([parseFloat(item.longitude), parseFloat(item.latitude)]);
+        }
+        const polyline = new AMap.Polyline({
+          path: [
+            [parseFloat(data[index - 1].longitude), parseFloat(data[index - 1].latitude)],
+            [parseFloat(item.longitude), parseFloat(item.latitude)]
+          ],
+          strokeColor: !!data[index - 1].fcid ? '#fafa0a' : '#363534',
+          strokeStyle: !!data[index - 1].fcid ? 'dashed' : 'solid',
+          strokeWeight: 2,
+          strokeOpacity: 1
+        });
+        map.add(polyline);
+        nodes.push(polyline);
+      }
     });
-    // roadMapLayer.add(nodes);
-    return roadMapLayer;
+    return { roadMapLayer, nodes };
   };
   // 生成路径节点
-  const generateNode = (item, extData?: any) => {
-    const size = 14;
-    const textStyle = {
-      fontSize: '100px',
-      color: '#ff0000',
-      borderColor: 'transparent',
-      backgroundColor: 'transparent',
-      borderWidth: 0,
-      cursor: 'pointer' // 鼠标悬停时显示指针
-    };
-    const text = new AMap.Text({
-      text: '测试', // 文本内容，可以根据需要自定义
-      position: [parseFloat(item.longitude), parseFloat(item.latitude)], // 文本位置（经纬度）
-      style: textStyle, // 文本样式
-      zIndex: 100, // 文本层级
-      draggable: false // 是否可拖动（可选）
+  const generateNode = (item) => {
+    let color = '#ffffff';
+    if (item.level >= 6 && item.level < 8) {
+      color = '#51fb52';
+    } else if (item.level >= 8 && item.level < 10) {
+      color = '#3165ec';
+    } else if (item.level >= 10 && item.level < 12) {
+      color = '#fffe00';
+    } else if (item.level >= 12 && item.level < 14) {
+      color = '#f2995f';
+    } else if (item.level >= 14 && item.level < 16) {
+      color = '#f20b04';
+    } else if (item.level >= 16) {
+      color = '#b7001d';
+    }
+    const node = new AMap.Marker({
+      position: [parseFloat(item.longitude), parseFloat(item.latitude)],
+      content: `<div style="width: 10px;height: 10px; border:1px solid #363534;border-radius: 50%; background: ${color}"></div>`,
+      offset: new AMap.Pixel(-5, -5),
+      extData: item
     });
-    // // 将文本覆盖物添加到地图
-    // map.add(text);
+    map.add(node);
+    return node;
+  };
+  const generateEyeWind = (item) => {
     const node = new AMap.Marker({
       position: [parseFloat(item.longitude), parseFloat(item.latitude)],
-      content: `<div style="width: 15px;height: 15px; border:3px solid #000;border-radius: 50%; background: #51fb52"></div>`,
-      // extData: { ...item }
+      content: `<img class="eye-wind" src="${typhoonImg}" width="30">`,
+      offset: new AMap.Pixel(-15, -15),
+      extData: item
     });
     map.add(node);
-    // node.on('mouseover', event => {
-    //   const {target} = event;
-    //   const {time} = target.getExtData();
-    //   const detail = this.getDataByTime(time);
-    //   infoTip.setPosition(target.getPosition());
-    //   infoTip.setContent(this.getInfoTipContent(detail));
-    //   map.add(infoTip);
-    // });
-    // node.on('mouseout', throttle(e => {
-    //   map.remove(infoTip);
-    // }, 1000));
-    // node.on('click', event => {
-    //   const extData = event.target.getExtData();
-    //   const {lng, lat} = event.target.getPosition();
-    //   // 渲染预测路径
-    //   const arr = this.paths[extData.time];
-    //   this.clearForecast();
-    //   this.renderForecast(arr);
-    //   this.updateMarker({...extData, lon: lng, lat});
-    // });
     return node;
   };
+  const clearRoadMap = (nodes) => {
+    nodes.forEach((node) => {
+      node.remove(node);
+    });
+  };
   onMounted(() => {
     initMap(options);
   });
@@ -900,6 +905,7 @@ export function useAMap(options) {
     trackPlayback,
     drawData,
     setAddress,
-    createRoadMap
+    createRoadMap,
+    clearRoadMap
   };
 }