重点车辆调整

src/hooks/AMap/useAMap.ts

@@ -407,14 +407,14 @@ export function useAMap(options) {
     moveMarker?.remove();
     let index = 0;
     const icon = new AMap.Icon({
-      size: new AMap.Size(26, 52),
+      size: new AMap.Size(13, 26),
       image: carImg
     });
     moveMarker = new AMap.Marker({
       map: map,
-      position: [116.478935, 39.997761],
+      position: lineArr[0],
       icon: icon,
-      offset: new AMap.Pixel(-13, -26)
+      anchor: 'center'
     });
     // 绘制轨迹
     movePolyline = new AMap.Polyline({
@@ -438,22 +438,23 @@ export function useAMap(options) {
       map.setCenter(e.target.getPosition(), true);
     });
 
-    moveMarker.on('moveend', function (e) {
-      index++;
-      if (index === lineArr.length - 1) {
-        timerId = setTimeout(() => {
-          movePolyline.remove();
-          movePassedPolyline.remove();
-          moveMarker.remove();
-        }, 5000);
-      }
-    });
+    // moveMarker.on('moveend', function (e) {
+    //   index++;
+    //   if (index === lineArr.length - 1) {
+    //     timerId = setTimeout(() => {
+    //       movePolyline.remove();
+    //       movePassedPolyline.remove();
+    //       moveMarker.remove();
+    //     }, 5000);
+    //   }
+    // });
     moveMarker.moveAlong(lineArr, {
       // 每一段的时长
       duration: 1000, //可根据实际采集时间间隔设置
       // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
       autoRotation: true
     });
+    return [movePolyline, movePassedPolyline, moveMarker];
   };
 
   const drawData = (data) => {

src/utils/olMap/olMap.ts

@@ -91,6 +91,8 @@ export class olMap {
   private carLayer;
   private carFeature;
   private traceFeature;
+  // 自定义绘制结束调用方法
+  private drawEndMethod;
 
   constructor(options) {
     this.options = options;
@@ -321,6 +323,7 @@ export class olMap {
       marker: 'Point',
       text: 'Point'
     };
+    debugger
     const data = getRgba(newOptions.color);
     let geometryFunction = null;
     if (newOptions.graphicsType === 'rectangle') {
@@ -700,19 +703,19 @@ export class olMap {
         })
       });
       this.map.addLayer(this.maskLayer2);
-      // this.maskLayer = new VectorLayer({
-      //   source: new VectorSource(),
-      //   style: new Style({
-      //     fill: new Fill({
-      //       color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
-      //     }),
-      //     stroke: new Stroke({
-      //       color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
-      //       width: 2
-      //     })
-      //   }),
-      //   zIndex: options.zIndex ? options.zIndex : 99
-      // });
+      this.maskLayer = new VectorLayer({
+        source: new VectorSource(),
+        style: new Style({
+          fill: new Fill({
+            color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
+          }),
+          stroke: new Stroke({
+            color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
+            width: 2
+          })
+        }),
+        zIndex: options.zIndex ? options.zIndex : 99
+      });
       // // 合并区边界
       // const format = new GeoJSON();
       // const data2 = mergeGeoJsonPolygons(json);
@@ -988,8 +991,9 @@ export class olMap {
     const icon = new Icon({
       crossOrigin: 'anonymous',
       src: carImg,
-      width: 26,
-      height: 52,
+      width: 13,
+      height: 26,
+      anchor: [0.5, 0.5],
       rotation: angle
     });
     this.carFeature.setStyle(
@@ -1005,7 +1009,7 @@ export class olMap {
       source: source,
       style: new Style({
         stroke: new Stroke({
-          color: 'rgb(37,232,142)',
+          color: '#AF5',
           width: 5
         })
       })
@@ -1046,6 +1050,7 @@ export class olMap {
     // 触发地图渲染
     const geo = this.carFeature.getGeometry().clone();
     this.carFeature.setGeometry(geo);
+    return [this.carLayer];
   }
   drawData(data) {
     const res = [];
@@ -1108,11 +1113,11 @@ export class olMap {
           // 图片加载完成后，可以访问其 width 和 height 属性
           const width = img.width;
           const height = img.height;
+          // const anchor = [9 / width, 1 - (9 / height)];
+          const anchor = [9, 9];
           const style = new Style({
             image: new Icon({
-              anchor: [0.5, 0.5],
-              anchorXUnits: 'fraction',
-              anchorYUnits: 'pixels',
+              anchor: [0.5, 1],
               src: item.icon,
               size: [width, height],
               scale: !!item.size[0] ? item.size[0] / width : 1
@@ -1149,4 +1154,7 @@ export class olMap {
   getMouseTool() {
     return this.drawTool;
   }
+  setDrawEndMethod(newMethod) {
+    this.drawEndMethod = newMethod;
+  }
 }

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -40,8 +40,12 @@
 import { Search } from '@element-plus/icons-vue';
 import { getVehicleList, getVehicleTrajectory } from "@/api/globalMap/KeyVehicles";
 import { onMounted, reactive, inject } from 'vue';
-// const getMap = inject('getMap');
+const AMapType = ['vectorgraph', 'satellite'];
 const trackPlayback = inject('trackPlayback');
+
+const props = defineProps({
+  activeMap: String
+});
 // 数据列表,直接定义为数组
 const dataList = reactive([]);
 //入参
@@ -86,13 +90,14 @@ const handleCollaborate = () => {};
 //   showDetail(item, 30);
 // };
 // 轨迹
+let obj = []
 const handleTrack = (item) => {
   getVehicleTrajectory(item.vehicle_no).then((res) => {
     const trajectory = [];
     res.rows.forEach((item) => {
       trajectory.push([item.lng, item.lat]);
     });
-    trackPlayback(trajectory);
+    obj = trackPlayback(trajectory);
     // handleShowDialog(trajectory);
   });
 };
@@ -100,6 +105,18 @@ const handleTrack = (item) => {
 onMounted(() => {
   initData();
 });
+onUnmounted(() => {
+  if (AMapType.includes(props.activeMap)) {
+    obj.forEach((item) => {
+      item.remove();
+    });
+  } else {
+    const source = obj[0].getSource();
+    if (source) {
+      source.clear();
+    };
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/RightMenu/OnlinePlotting/EditClassDialog.vue

@@ -10,10 +10,10 @@
       <el-form-item label="图标:" label-width="200px" prop="fileList">
         <FileUpload v-model="form.fileList" :file-type="['jpg', 'jpeg', 'png']" :limit="1" :file-size="20" :is-show-tip="false" class="upload-box" />
       </el-form-item>
-      <el-form-item label="图标宽度:" label-width="200px" prop="size.0">
+      <el-form-item v-if="form.value === 'marker'" label="图标宽度:" label-width="200px" prop="size.0">
         <el-input v-model="form.size[0]" class="custom-input2" placeholder="请输入图标宽度" />
       </el-form-item>
-      <el-form-item label="图标高度:" label-width="200px" prop="size.1">
+      <el-form-item v-if="form.value === 'marker'" label="图标高度:" label-width="200px" prop="size.1">
         <el-input v-model="form.size[1]" class="custom-input2" placeholder="请输入图标高度" />
       </el-form-item>
       <el-form-item label="排序:" label-width="200px" prop="order_num">

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -902,15 +902,15 @@ const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  webSock = createWebSocket('uhvw60vX7MpeWSWcXqK8S', getWebSocketData);
-  patternId.value = 'uhvw60vX7MpeWSWcXqK8S';
-  // createCollaboration(form.value).then(() => {
-  //   patternId.value = form.value.pattern_id;
-  //   webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
+  // webSock = createWebSocket('MbHKSVA00Y2tQG1Y_u8kL', getWebSocketData);
+  // patternId.value = 'MbHKSVA00Y2tQG1Y_u8kL';
+  createCollaboration(form.value).then(() => {
+    patternId.value = form.value.pattern_id;
+    webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
     showForm.value = false;
     collaboration.value = true;
     proxy?.$modal.msgSuccess('开启协同标绘成功');
-  // });
+  });
 };
 const handleShowDialog = () => {
   editData.value = {

src/views/globalMap/RightMenu/index.vue

@@ -78,7 +78,7 @@
           <!--手机工作平台-->
           <MobilePlatform v-if="menuState.menuData[menuState.activeIndex]?.name === '手机工作台'" @handle-menu="handleMenu" />
           <!--重点车辆-->
-          <KeyVehicles v-if="menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" @handle-menu="handleMenu" />
+          <KeyVehicles v-if="menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" :activeMap="activeMap" @handle-menu="handleMenu" />
           <!--卫星电话-->
           <SatellitePhone v-if="menuState.menuData[menuState.activeIndex]?.name === '卫星电话'" @handle-menu="handleMenu" />
           <!--机动无人机-->