视频预加载图片，飞行图片上图只保留7张防止系统崩溃，架次路线使用飞行路线的加载方式

src/api/ghss/jctb.js

@@ -28,7 +28,7 @@ export function JctbList(params) {
     })
 }
 //ewkt转envelope
-export function envelope(data) {
+export function ewktToenvelope(data) {
     return request({
         url: '/file/read/ewkt/to/envelope',
         method: 'post',

src/views/farmlandProtection/components/tbqd.vue

@@ -140,7 +140,7 @@ import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
 import { QueryOne, QueryList } from "@/api/cockpitNew";
 import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
-import { JctbList, envelope, getJctbInfo } from "@/api/ghss/jctb.js";
+import { JctbList, ewktToenvelope, getJctbInfo } from "@/api/ghss/jctb.js";
 let layerSources = {};
 export default {
   props: {
@@ -197,7 +197,7 @@ export default {
               (data) => (data.name = "farmlandjc")
             );
         });
-        envelope({ ewkt }).then((res) => {
+        ewktToenvelope({ ewkt }).then((res) => {
           loadGeoJSON(
             res.data,
             "#55A1E3",

src/views/farmlandProtection/gdzl/wrjxx.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrjxx">
-    <div class="timeCheck">
+    <!-- <div class="timeCheck">
       <ul>
         <li
           :class="{ liActive: i == activeIndex }"
@@ -11,12 +11,15 @@
           {{ item }}
         </li>
       </ul>
-    </div>
+    </div> -->
     <div class="imgCon" v-for="uavit in uavlsit" :key="uavit.id">
       <div class="echartTitle">
         <div class="block-title">
           <span class="time">巡查时间：{{ uavit.batch_time }}</span>
-          <el-checkbox @change="(val) => showpath(val, uavit)">
+          <el-checkbox
+            v-model="uavit.show"
+            @change="(val) => showpath(val, uavit)"
+          >
             架次路线
           </el-checkbox>
           <i
@@ -32,7 +35,7 @@
           WE
           class="imgDiv"
           preload="none"
-          :poster="geturl(uavit.flightDtoList[0].photo_path)"
+          :poster="geturl(vitem.photo_path)"
           crossorigin
           controls
           v-for="vitem in uavit.videoDtoList"
@@ -49,7 +52,7 @@
           <el-checkbox
             class="checkimg"
             v-model="item.checked"
-            @change="(val) => checkchange(val, item)"
+            @change="(val) => checkchange(val, item,uavit)"
           ></el-checkbox>
           <img :src="geturl(item.photo_path)" @click.prevent="clickImg(item)" />
           <p>{{ item.batch_time.split(".")[0] }}</p>
@@ -62,8 +65,10 @@
 <script>
 import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
 import { getgdUav } from "@/api/ghss/gdbh.js";
-var flyManager;
-let img_entity;
+import { ewktToenvelope } from "@/api/ghss/jctb.js";
+var flyManagers = {};
+let img_entity = null;
+let imgents = {};
 export default {
   props: {},
   components: {},
@@ -90,15 +95,14 @@ export default {
     geturl(url) {
       return window.axiosURI + "/file/upload/attachment" + url;
     },
-    getData(name, updata) {
-      this[name] = updata;
+    getData() {
       getgdUav({}).then((res) => {
         this.uavlsit = res.data;
       });
     },
-    checkchange(val, item) {
+    checkchange(val, item, uavit) {
       console.log(val, item, "s0xskcsdcmd");
-      if (val) this.getEntities(item);
+      if (val) this.getEntities(item, uavit);
       else removeGeoJSON("Image Overlay");
     },
     clickImg(i) {
@@ -106,68 +110,42 @@ export default {
       this.imgdata = i;
     },
     showpath(chekpath, uavitem) {
-      var routes = new Cesium.RouteCollection(viewer.entities);
-      // routes.fromXML(xml);
-      routes.fromFile(this.geturl(uavitem.fpf));
-      // routes.routes[0].isFlyLoop = false;
-      flyManager = new Cesium.FlyManager({ scene, routes });
-      routes.isLineVisible = chekpath;
-      routes.isStopVisible = chekpath;
-    },
-    addPath(chekpath, uavitem) {
+      let routes = this.addfly(uavitem).currentRoute;
       if (chekpath) {
-        let linegeom = {
-          // type: "Feature",
-          // properties: {},
-          // geometry: {
-          //   coordinates: [],
-          //   type: "MultiLineString",
-          // },
-          type: "MultiLineString",
-          coordinates: [
-            [30, 10, 100],
-            [31, 11, 150],
-            [32, 12, 200],
-            // [30, 18.40745685, 411.2148],
-            // [31, 18.40793223, 410.84],
-            // [32, 18.40836486, 411.1655],
-            // [109.3959137, 18.40745685, 411.2148],
-            // [109.3959525, 18.40793223, 410.84],
-            // [109.3959798, 18.40836486, 411.1655],
-          ],
-        };
-        uavitem.flightDtoList.forEach((item) => {
-          let geo = `POINT (${item.longitude} ${item.latitude} ${item.height})`;
-          loadGeoJSON(geo, "#ff0000", { point: "hide", sw: 100 }, (data) => {
-            data.name = uavitem.id;
-            // this.addImg(data, item);
-          });
-          // linegeom.coordinates.push([
-          //   Number(item.longitude),
-          //   Number(item.latitude),
-          //   Number(item.height),
-          // ]);
-        });
-        console.log(linegeom, "linegeom");
-        loadGeoJSON(linegeom, "#55A1E3", { isfly: true }, (data) => {
-          data.name = uavitem.id;
-          // layerSources[item.id] = data;
+        let item = uavitem.flightDtoList[0];
+        let last = uavitem.flightDtoList[uavitem.flightDtoList.length - 1];
+        let geo = `POINT (${item.longitude} ${item.latitude} ${item.height})`;
+        let geo2 = `POINT (${last.longitude} ${last.latitude} ${last.height})`;
+        let ewkt = [geo, geo2];
+        ewktToenvelope({ ewkt }).then((res) => {
+          loadGeoJSON(
+            res.data,
+            "#55A1E3",
+            {
+              isfly: true,
+              fill_a: 0.01,
+              sw: 0.001,
+            },
+            (data) => (data.name = "flyall")
+          );
         });
-      } else {
-        removeGeoJSON(uavitem.id);
+      }
+      if (routes) {
+        routes.isLineVisible = chekpath;
+        routes.isStopVisible = chekpath;
       }
     },
-    getEntities(item) {
+    getEntities(item, uavitem) {
       let geo = `POINT (${item.longitude} ${item.latitude})`;
       loadGeoJSON(geo, "#ff0000", { isfly: true, point: "hide" }, (data) => {
         data.name = "Image";
         // data.entities.add(this.addImg(data, item));
-        this.addImg(item, data);
+        this.addImg(item, uavitem.id);
         // layerSources[item.id] = data;
       });
       // this.idArr.push(id + type);
     },
-    addImg(item, data) {
+    addImg(item, i) {
       console.log(item, "itemsx");
       let image = this.geturl(item.photo_path);
       // 创建Cesium的ImageMaterialProperty
@@ -175,8 +153,10 @@ export default {
         image,
         repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制图像重复，这里设置为不重复
         transparent: true, // 如果图像有透明通道，设置为true
+        hasAlpha: true,
+    material: new Cesium.ColorMaterialProperty(Cesium.Color.TRANSPARENT)
       });
-      img_entity.entities.add({
+      imgents[`${i}-${item.id} `] = img_entity.entities.add({
         name: "Image",
         id: item.id,
         rectangle: {
@@ -187,12 +167,13 @@ export default {
             item.pngenvelope[3]
           ), // 设置矩形的经纬度范围
           material: imageMaterial,
+          zIndex: 2000 - Number(item.id),
         },
       });
       console.log("idddtem", "itemsx");
     },
     lineFly(uavitem) {
-      this.stopPolylineFly();
+      this.stopPolylineFly(uavitem);
       if (this.flyid == uavitem.id) {
         this.flyid = "";
       } else {
@@ -200,114 +181,65 @@ export default {
         this.startPolylineFly(uavitem);
       }
     },
+    addfly(uavitem) {
+      var that = this;
+      if (!flyManagers[uavitem.id]) {
+        var routes = new Cesium.RouteCollection(viewer.entities);
+        // routes.fromXML(xml);
+        routes.fromFile(this.geturl(uavitem.fpf));
+        // routes.routes[0].isFlyLoop = false;
+        flyManagers[uavitem.id] = new Cesium.FlyManager({ scene, routes });
+        flyManagers[uavitem.id].stopArrived.addEventListener(function (
+          routeStop
+        ) {
+          routeStop.waitTime = 0; // 在每个站点处停留1s
+
+          if (routeStop.index + 4 < uavitem.flightDtoList.length) {
+            that.addImg(uavitem.flightDtoList[routeStop.index + 4], uavitem.id);
+          }
+          if (routeStop.index > 4)
+            img_entity.entities.remove(img_entity.entities.values[0]);
+          // imgents[`${uavitem.id}-${routeStop.index - 4}`]
+          console.log(
+            routeStop.index,
+            routeStop.index + 4,
+            routeStop.index - 4,
+            img_entity.entities
+          );
+        });
+      }
+      return flyManagers[uavitem.id];
+    },
     /**
      * 开始沿线飞行
      */
     startPolylineFly(uavitem) {
-      var that = this;
-      // if (that.lineFylPoints == null || that.lineFylPoints.length == 0) {
-      //   that.$message.warning("请绘制飞行路线!");
-      //   return;
-      // }
-      // debugger;
-      var speed = Number(100) / 3.6;
-      var xml =
-        '<?xml version="1.0" encoding="UTF-8"?>' +
-        '<SceneRoute xmlns = "https://www.supermap.com/ugc60" >' +
-        '<route name="飞行路线_1" speed="' +
-        speed +
-        '" lineType="0" showroutestop="False" showrouteline="False" altitudefree="False" headingfree="False" tiltfree="False" flycircle="False" alongline="True">' +
-        "<style>" +
-        "<geostyle3d>" +
-        "<linecolor>RGBA(147,112,219,255)</linecolor>" +
-        "<linewidth>2</linewidth>" +
-        "<altitudeMode>Absolute</altitudeMode>" +
-        "<bottomAltitude>0.00</bottomAltitude>" +
-        "</geostyle3d>" +
-        "</style>";
-      uavitem.flightDtoList.forEach((item, index) => {
-        xml +=
-          '<routestop name="Stop+' +
-          (index + 1) +
-          '" speed="0" excluded="False" viewType="camera">' +
-          "<camera>" +
-          "<longitude>" +
-          item.longitude +
-          "</longitude>" +
-          "<latitude>" +
-          item.latitude +
-          "</latitude>" +
-          "<altitude>" +
-          item.height +
-          "</altitude>" +
-          `<heading>0.000001</heading>` +
-          // `<pitch>${Cesium.Math.toRadians(-90.0)}</pitch>` +
-          `<tilt>0.100000000000000006</tilt>` +
-          "<altitudeMode>Absolute</altitudeMode>" +
-          "</camera>" +
-          "<style>" +
-          "<geostyle3d>" +
-          "<icon />" +
-          "<markersize>4.8</markersize>" +
-          "<markericonscale>1</markericonscale>" +
-          "<markercolor>RGBA(255,255,255,255)</markercolor>" +
-          "</geostyle3d>" +
-          "</style>" +
-          "<setting>" +
-          "<turnTime>1.5</turnTime>" +
-          "<turnSlowly>False</turnSlowly>" +
-          "<stopPlayMode>StopPause</stopPlayMode>" +
-          "<autoPlay>False</autoPlay>" +
-          "<pauseTime>0</pauseTime>" +
-          "<angularSpeed>1</angularSpeed>" +
-          " </setting>" +
-          "</routestop>";
-      });
-      xml += "</route>";
-      xml += "</SceneRoute>";
-      var routes = new Cesium.RouteCollection(viewer.entities);
-      // routes.fromXML(xml);
-      routes.fromFile(this.geturl(uavitem.fpf));
-      // routes.routes[0].isFlyLoop = false;
-      flyManager = new Cesium.FlyManager({ scene, routes });
-      this.addImg(uavitem.flightDtoList[0]);
-      this.addImg(uavitem.flightDtoList[1]);
+      this.addImg(uavitem.flightDtoList[1], uavitem.id);
+      this.addImg(uavitem.flightDtoList[2], uavitem.id);
+      this.addImg(uavitem.flightDtoList[3], uavitem.id);
       //初始化飞行管理
       // that.flyHOld = that.flyH;
       //注册站点到达事件
-      flyManager.stopArrived.addEventListener(function (routeStop) {
-        routeStop.waitTime = 0; // 在每个站点处停留1s
-        console.log(
-          routeStop.index + 2,
-          uavitem.flightDtoList.length,
-          "routeStop"
-        );
-        if (routeStop.index + 2 < uavitem.flightDtoList.length) {
-          if (routeStop.index % 2 == 0)
-            that.addImg(uavitem.flightDtoList[routeStop.index + 2]);
-        }
-      });
+      let flyManager = this.addfly(uavitem);
       flyManager.readyPromise.then(function () {
         // 飞行路线就绪
         var currentRoute = flyManager.currentRoute;
         console.log(currentRoute.totalDuration + "秒");
-        currentRoute.isLineVisible = false;
-        currentRoute.isStopVisible = false;
+        currentRoute.isLineVisible = uavitem.show;
+        currentRoute.isStopVisible = uavitem.show;
         //生成飞行文件中的所有站点列表
         // var allStops = flyManager.getAllRouteStops();
-        if (that.flySpeed == 0) {
-          return;
-        }
+
         flyManager && flyManager.play();
       });
     },
     /**
      * 停止沿线飞行
      */
-    stopPolylineFly() {
+    stopPolylineFly(uavitem) {
       // var allStops = flyManager.getAllRouteStops();
       // flyManager.viewToStop(allStops[allStops.length - 1]);
-      flyManager && flyManager.stop();
+      flyManagers[uavitem.id] && flyManagers[uavitem.id].stop();
     },
   },
   watch: {},