轨迹

src/api/globalMap/MobilePlatform.ts

@@ -7,3 +7,16 @@ export const getMobileWorkstationList = (data) => {
     data: data
   });
 };
+
+// 列表信息
+export const getMobileWorkstationTrajectory = (id) => {
+  return request({
+    url: '/api/gateway/v2/get_mobile_workstation_trajectory',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};

src/components/Map/index.vue

@@ -89,7 +89,7 @@ let AMap, map, scale;
 // 鼠标绘制工具
 const drawTool = useDrawTool();
 // 初始化地图
-const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover, creatMask } =
+const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover, creatMask, trackPlayback } =
   useAMap({
     key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@@ -113,7 +113,8 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
       map.on('zoomchange', zoomChangeHandler);
       // 添加遮罩
     // , { strokeColor: '#ff0000',strokeWeight: 2, offset }
-      creatMask([{ strokeColor: '#2a8797', strokeOpacity: 0.6,strokeWeight: 6, fillOpacity: 0}, { strokeWeight: 2, fillColor: '#4f95ff', fillOpacity: 0.2 }]);
+    //   { strokeColor: '#2a8797', strokeOpacity: 0.6,strokeWeight: 6, fillOpacity: 0},
+      creatMask([{ strokeWeight: 2, fillColor: '#4f95ff', fillOpacity: 0.2 }]);
       drawTool.initMouseTool({ container: 'aMap', map, AMap });
       handleResize();
     },
@@ -414,7 +415,7 @@ const setCenter = (item) => {
   map.setCenter([item.longitude, item.latitude]);
 };
 
-defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool, handleHover });
+defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool, handleHover, trackPlayback });
 const handleResize = () => {
   const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
   const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;

src/hooks/AMap/useAMap.ts

@@ -14,7 +14,7 @@ export function useAMap(options) {
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: options.plugins
         ? options.plugins
-        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch']
+        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation']
     }).then((res) => {
       AMap = res;
       map = new AMap.Map('aMap', {
@@ -64,8 +64,10 @@ export function useAMap(options) {
   };
   // 添加搜索的标记的
   const addSearchMarker = (item) => {
-    map.setCenter([item.longitude, item.latitude]);
-    addMarker(item, true);
+    debugger
+    map.setZoom(18);
+    map.setCenter(item.lnglat);
+    addMarker([item], true);
   };
 
   const addMarker = (points, isSearchItem?: boolean) => {
@@ -257,6 +259,57 @@ export function useAMap(options) {
       });
     });
   };
+
+  let moveMarker, movePolyline, movePassedPolyline, timerId;
+  const trackPlayback = (lineArr) => {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+    movePolyline?.remove();
+    movePassedPolyline?.remove();
+    moveMarker?.remove();
+    moveMarker = new AMap.Marker({
+      map: map,
+      position: [116.478935, 39.997761],
+      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
+      offset: new AMap.Pixel(-13, -26)
+    });
+    // 绘制轨迹
+    movePolyline = new AMap.Polyline({
+      map: map,
+      path: lineArr,
+      showDir: true,
+      strokeColor: '#28F', //线颜色
+      // strokeOpacity: 1,     //线透明度
+      strokeWeight: 6 //线宽
+      // strokeStyle: "solid"  //线样式
+    });
+
+    movePassedPolyline = new AMap.Polyline({
+      map: map,
+      strokeColor: '#AF5', //线颜色
+      strokeWeight: 6 //线宽
+    });
+
+    moveMarker.on('moving', function (e) {
+      movePassedPolyline.setPath(e.passedPath);
+      map.setCenter(e.target.getPosition(), true);
+    });
+
+    moveMarker.on('moveend', function (e) {
+      timerId = setTimeout(() => {
+        movePolyline.remove();
+        movePassedPolyline.remove();
+        moveMarker.remove();
+      }, 2000);
+    });
+    moveMarker.moveAlong(lineArr, {
+      // 每一段的时长
+      duration: 1000, //可根据实际采集时间间隔设置
+      // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+      autoRotation: true
+    });
+  };
   onMounted(() => {
     initMap(options);
   });
@@ -272,6 +325,7 @@ export function useAMap(options) {
     showInfo,
     hideInfo,
     handleHover,
-    creatMask
+    creatMask,
+    trackPlayback
   };
 }

src/views/globalMap/RightMenu/MobilePlatform.vue

@@ -25,9 +25,9 @@
           <div class="td">{{ item.work_unit }}</div>
           <div class="td">{{ item.position }}</div>
           <div class="td">
-            <el-button type="text" size="small" @click="handleConnect(index, item)">连线</el-button>
-            <el-button type="text" size="small" @click="handleCollaborate(index, item)">协同</el-button>
-            <el-button type="text" size="small" @click="handleTrack(item)">轨迹</el-button>
+            <div class="text" @click="handleConnect(index, item)">连线</div>
+            <div class="text" @click="handleCollaborate(index, item)">协同</div>
+            <div class="text"  @click="handleTrack(item)">轨迹</div>
           </div>
         </div>
       </div>
@@ -37,8 +37,10 @@
 
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue';
-import { getMobileWorkstationList } from '@/api/globalMap/MobilePlatform';
+import { getMobileWorkstationList, getMobileWorkstationTrajectory } from '@/api/globalMap/MobilePlatform';
 import { onMounted, reactive } from 'vue';
+
+const trackPlayback = inject('trackPlayback');
 // 数据列表,直接定义为数组
 const dataList = reactive([]);
 //入参
@@ -67,6 +69,22 @@ const handleCancel = () => {
   queryParams.keywords = '';
   initData();
 };
+const handleConnect = () => {
+
+}
+const handleCollaborate = () => {
+
+}
+// 轨迹
+const handleTrack = (item) => {
+  getMobileWorkstationTrajectory(item.id).then((res) => {
+    const trajectory = [];
+    res.rows.forEach((item) => {
+      trajectory.push([item.longitude, item.latitude]);
+    });
+    trackPlayback(trajectory);
+  });
+};
 //调用函数
 onMounted(() => {
   initData();
@@ -176,4 +194,12 @@ onMounted(() => {
     background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
   }
 }
+.text {
+  font-size: 38px;
+  color: #247dff;
+  margin-right: 20px;
+  &:last-child {
+    margin-right: 0;
+  }
+}
 </style>

src/views/globalMap/index.vue

@@ -141,10 +141,19 @@ const findChecked = (dataList, name) => {
 const selectSearchMarker = (item) => {
   const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
   let item2 = deepClone(item);
-  if (iconList[item.component]) {
-    item2.image = iconList[item.component].image;
-    item2.size = iconList[item.component].size;
+  // 获取图标
+  if (iconList[item2.dataType]) {
+    item2.icon = iconList[item2.dataType].image;
+    item2.image = iconList[item2.dataType].image;
+    item2.imageHover = iconList[item2.dataType].imageHover;
+    item2.size = iconList[item2.dataType].size;
+  } else {
+    item2.icon = iconList['common'].image;
+    item2.image = iconList['common'].image;
+    item2.imageHover = iconList['common'].imageHover;
+    item2.size = iconList['common'].size;
   }
+  item2.lnglat = [item2.longitude, item2.latitude];
   dom.addSearchMarker(item2);
 };
 const handleAnalysisData = (data) => {
@@ -183,6 +192,14 @@ const getMarkers = () => {
   }
   return {};
 };
+const trackPlayback = (data) => {
+  if (['satellite2', 'satellite3'].includes(activeMap.value)) {
+    return map2Ref.value.trackPlayback(data);
+  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
+    return mapRef.value.trackPlayback(data);
+  }
+  return {};
+};
 let showNearbyVideos = ref(false);
 let location = reactive([]);
 // 显示附近视频
@@ -203,6 +220,7 @@ const handleShowWarehouse = (data) => {
 // })
 
 provide('getMap', getMap);
+provide('trackPlayback', trackPlayback);
 provide('showDetail', showDetail);
 provide('getDrawTool', getDrawTool);
 provide('getMarkers', getMarkers);