飞行，路线上图，视频预加载取消

src/views/farmlandProtection/gdzl/wrjxx.vue

@@ -21,26 +21,30 @@
             @change="(val) => addPath(val, uavit)"
           ></el-checkbox
           >架次路线
-          <i class="el-icon-s-promotion" @click="startPolylineFly(uavit)"></i>
+          <i
+            class="el-icon-s-promotion"
+            :class="flyid == uavit.id ? 'isfly' : ''"
+            @click="lineFly(uavit)"
+          ></i>
+          <div>批次号：{{ uavit.batch }}</div>
         </div>
       </div>
-      <div>现场视频：</div>
       <div class="imgList">
         <video
           WE
           class="imgDiv"
-          loop
+          preload="none"
+          :poster="geturl(uavit.flightDtoList[0].photo_path)"
           crossorigin
           controls
           v-for="vitem in uavit.videoDtoList"
           :key="vitem.id"
-          @click.stop="clickImg(vitem)"
         >
           <span>{{ i + 1 }}</span>
           <source :src="geturl(vitem.video_path)" type="video/mp4" />
         </video>
       </div>
-      <div>现场图片：</div>
+      <!-- <div>现场图片：</div>
       <div class="imgList">
         <div class="imgDiv" v-for="(item, i) in uavit.flightDtoList" :key="i">
           <span>{{ i + 1 }}</span>
@@ -52,37 +56,27 @@
           <img :src="geturl(item.photo_path)" @click.prevent="clickImg(item)" />
           <p>{{ item.batch_time.split(".")[0] }}</p>
         </div>
-      </div>
+      </div> -->
     </div>
-
-    <div class="sm-panel bigimgdiv" v-drag v-show="bigimg">
-      <div class="sm-panel-header">
-        <span>图片详情</span>
-        <i class="el-icon-close" @click="bigimg = false"></i>
-      </div>
+    <el-dialog
+      title="视频详情"
+      :visible.sync="bigimg"
+      width="80%"
+      :before-close="(bigimg = false)"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+    >
       <video WE class="bigvideo" autoplay loop crossorigin controls>
-        <source src="@/assets/video.mp4" type="video/mp4" />
+        <source :src="geturl(imgdata.video_path)" type="video/mp4" />
       </video>
-      <el-carousel
-        trigger="click"
-        indicator-position="outside"
-        :autoplay="false"
-        :initial-index="imgdata"
-      >
-        <el-carousel-item v-for="(item, i) in imgList" :key="i">
-          <div class="imgi">{{ `${i + 1} / ${imgList.length}` }}</div>
-          <img :src="item.imgUrl" />
-          <div class="imgInfo">{{ item.bz }}</div>
-        </el-carousel-item>
-      </el-carousel>
-    </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
 import { getgdUav } from "@/api/ghss/gdbh.js";
-
+var flyManager;
 export default {
   props: {},
   components: {},
@@ -123,25 +117,41 @@ export default {
     addPath(chekpath, uavitem) {
       if (chekpath) {
         let linegeom = {
-          geometry: {
-            coordinates: [],
-            type: "LineString",
-          },
+          // 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, "", { point: "" }, (data) => {
-          //   data.name = uavitem.id;
-          //   this.addImg(data, item);
-          // });
-          linegeom.geometry.coordinates.push([
-            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),
+          // ]);
         });
-        loadGeoJSON(linegeom, "#ff0000", { isfly: true }, (data) => {
+        console.log(linegeom, "linegeom");
+        loadGeoJSON(linegeom, "#55A1E3", { isfly: true }, (data) => {
           data.name = uavitem.id;
+          this.addImg(data, uavitem.flightDtoList[0]);
           // layerSources[item.id] = data;
         });
       } else {
@@ -150,22 +160,23 @@ export default {
     },
     getEntities(item) {
       let geo = `POINT (${item.longitude} ${item.latitude})`;
-      loadGeoJSON(geo, "#ff0000", { isfly: true, point: "" }, (data) => {
+      loadGeoJSON(geo, "#ff0000", { isfly: true, point: "hide" }, (data) => {
         data.name = "Image";
-        data.entities.add(this.addImg(data, item));
+        // data.entities.add(this.addImg(data, item));
+        this.addImg(data, item);
         // layerSources[item.id] = data;
       });
       // this.idArr.push(id + type);
     },
     addImg(data, item) {
-      let image = imagethis.geturl(item.photo_path);
+      let image = this.geturl(item.photo_path);
       // 创建Cesium的ImageMaterialProperty
       const imageMaterial = new Cesium.ImageMaterialProperty({
         image,
         repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制图像重复，这里设置为不重复
         transparent: true, // 如果图像有透明通道，设置为true
       });
-      return {
+      data.entities.add({
         name: "Image",
         id: item.id,
         rectangle: {
@@ -177,20 +188,28 @@ export default {
           ), // 设置矩形的经纬度范围
           material: imageMaterial,
         },
-      };
+      });
+    },
+    lineFly(uavitem) {
+      this.stopPolylineFly();
+      if (this.flyid == uavitem.flyid) {
+        this.flyid = "";
+      } else {
+        this.flyid = uavitem.flyid;
+        this.startPolylineFly(uavitem);
+      }
     },
     /**
      * 开始沿线飞行
      */
-    startPolylineFly(item) {
+    startPolylineFly(uavitem) {
       var that = this;
       // if (that.lineFylPoints == null || that.lineFylPoints.length == 0) {
       //   that.$message.warning("请绘制飞行路线!");
       //   return;
       // }
       // debugger;
-      var speed = Number(200) / 3.6;
-
+      var speed = Number(100) / 3.6;
       var xml =
         '<?xml version="1.0" encoding="UTF-8"?>' +
         '<SceneRoute xmlns = "https://www.supermap.com/ugc60" >' +
@@ -205,7 +224,7 @@ export default {
         "<bottomAltitude>0.00</bottomAltitude>" +
         "</geostyle3d>" +
         "</style>";
-      uavitem.flightDtoList.forEach((point, index) => {
+      uavitem.flightDtoList.forEach((item, index) => {
         xml +=
           '<routestop name="Stop+' +
           (index + 1) +
@@ -221,7 +240,8 @@ export default {
           item.height +
           "</altitude>" +
           "<heading>0</heading>" +
-          "<tilt>78.531727283418646834</tilt>" +
+          `<pitch>${Cesium.Math.toRadians(-90.0)}</pitch>` +
+          `<tilt>${Cesium.Math.toRadians(-90.0)}</tilt>` +
           "<altitudeMode>Absolute</altitudeMode>" +
           "</camera>" +
           "<style>" +
@@ -243,17 +263,17 @@ export default {
           "</routestop>";
       });
       xml += "</route>";
-      xml += "</SceneRoute >";
+      xml += "</SceneRoute>";
       var routes = new Cesium.RouteCollection(viewer.entities);
       routes.fromXML(xml);
-      routes.routes[0].isFlyLoop = true;
+      routes.routes[0].isFlyLoop = false;
       flyManager = new Cesium.FlyManager({ scene, routes });
 
       //初始化飞行管理
       // that.flyHOld = that.flyH;
       //注册站点到达事件
       flyManager.stopArrived.addEventListener(function (routeStop) {
-        routeStop.waitTime = 1; // 在每个站点处停留1s
+        routeStop.waitTime = 0; // 在每个站点处停留1s
       });
       flyManager.readyPromise.then(function () {
         // 飞行路线就绪
@@ -269,6 +289,14 @@ export default {
         flyManager && flyManager.play();
       });
     },
+    /**
+     * 停止沿线飞行
+     */
+    stopPolylineFly() {
+      // var allStops = flyManager.getAllRouteStops();
+      // flyManager.viewToStop(allStops[allStops.length - 1]);
+      flyManager && flyManager.stop();
+    },
   },
   watch: {},
   watch: {},
@@ -344,7 +372,7 @@ export default {
     max-height: 150px;
     display: flex;
     flex-wrap: wrap;
-    margin-bottom:20px;
+    margin-bottom: 20px;
     overflow-x: hidden;
     overflow-y: auto;
     // background-color: rgba(255, 192, 203, 0.372);
@@ -436,6 +464,13 @@ export default {
   //   }
   // }
 }
+.el-icon-s-promotion {
+  font-size: 20px;
+  cursor: pointer;
+}
+.isfly {
+  color: aqua;
+}
 .bigvideo {
   width: 200px;
   height: 200px;