修改飞行部分样式，添加管线,管井信息获取

src/components/Query/clickQuery/clickQuery.vue

@@ -229,6 +229,17 @@ export default {
           pickedFeature != null &&
           pickedFeature.primitive
         ) {
+          //解构赋值点击对象的id
+          let Pid = pickedFeature.getProperty("id");
+          //判断对象类型
+          if (Pid.indexOf("_") < 0) {
+            console.log("我是管井");
+          } else {
+            console.log("我是管线");
+          }
+
+          // console.log(pickedFeature.getPropertyNames());   //获取对象含有的属性
+
           that.loading = true;
           that.queryByPickFeature(pickedFeature, function (result, Fields) {
             that.loading = false;

src/components/sceneAtttribute/camera/camera.scss

@@ -1,133 +1,202 @@
 .sm-function-module-content {
-    max-height: 528px;
+  max-height: 528px;
 }
 
 .sm-input-long,
 .sm-select,
 .sm-colorpicker {
-    width: 55%;
+  width: 55%;
 }
 
 .sm-solider-input-box {
-    float: right;
-    width: 72%;
+  float: right;
+  width: 72%;
 }
 
 .sm-function-module-sub-section {
-    .sm-function-module-sub-section {
-        margin-bottom: 0;
-    }
+  .sm-function-module-sub-section {
+    margin-bottom: 0;
+  }
 }
 
 .flyBtn {
-    font-size: 18px;
+  font-size: 18px;
 }
-.ivu-tabs{
-    color: #fff;
+
+.ivu-tabs {
+  color: #fff;
 }
 
 
 // 横向布局:class = "row-item"
 .row-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.11rem;
+  // font-size: 14px; // number-input的罪魁祸首
+  font-size: 14px;
+
+  span,
+  div {
+    font-size: 14px;
+  }
+
+  .check-color-pick {
+    width: 1.96rem;
+    height: 0.33rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 0.11rem;
-    // font-size: 14px; // number-input的罪魁祸首
-    font-size: 14px;
-  
-    span,
-    div {
-      font-size: 14px;
-    }
-  
-    .check-color-pick {
-      width: 1.96rem;
-      height: 0.33rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-  
-      .color-pick-box {
-        margin-left: 0.1rem;
-      }
-    }
-  
-    .check-box {
-      width: 1.96rem;
-      height: 0.32rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  
-    .slider-box {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 12.76rem;
-      height: 0.32rem;
-      padding: 0 .1rem;
-      border-radius: 0.04rem;
-      background: rgba(255, 255, 255, 0.04);
-      // box-sizing: border-box;
-      border: 0.01rem solid rgba(255, 255, 255, 0.15);
-  
-      .slider-unit {
-        margin-left: 0.1rem;
-      }
-    }
-  
-    .radio-group {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 1.96rem;
-      height: 0.32rem;
-    }
-  
-    .row-slider-num {
-      width: .3rem;
-      display: flex;
-      justify-content: space-between;
-    }
-  
-    .row-content {
-      width: 192px;
-      height: 32px;
-      // background-color: rgba(255, 255, 255, 0.12);
-
-      // .el-input__inner {
-      //   height: 32px;
-      //   line-height: 32px;
-      // }
-      .el-checkbox{
-        margin-right: 5px !important; 
-      }
+
+    .color-pick-box {
+      margin-left: 0.1rem;
     }
   }
 
+  .check-box {
+    width: 1.96rem;
+    height: 0.32rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 
 
-// 面板上图标的排列样式等
-.icon-list {
+  .slider-box {
     display: flex;
-    width: 1.96rem;
-    height: 2.32rem;
-    line-height: 2.32rem;
-    text-align: center;
+    justify-content: space-between;
+    align-items: center;
+    width: 12.76rem;
+    height: 0.32rem;
+    padding: 0 .1rem;
+    border-radius: 0.04rem;
     background: rgba(255, 255, 255, 0.04);
+    // box-sizing: border-box;
     border: 0.01rem solid rgba(255, 255, 255, 0.15);
-    border-radius: 0.04rem;
-  
-    .icon-span {
-      width: 33%;
-      display: inline-block;
-      text-align: center;
-      cursor: pointer;
+
+    .slider-unit {
+      margin-left: 0.1rem;
     }
-  
-    .selected-icon {
-      color: #3499e5;
+  }
+
+  .radio-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1.96rem;
+    height: 0.32rem;
+  }
+
+  .row-slider-num {
+    width: .3rem;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .row-content {
+    width: 192px;
+    height: 32px;
+    // background-color: rgba(255, 255, 255, 0.12);
+
+    // .el-input__inner {
+    //   height: 32px;
+    //   line-height: 32px;
+    // }
+    .el-checkbox {
+      margin-right: 5px !important;
     }
-  }
+  }
+}
+//选择框样式
+.el-checkbox{
+  color: #fff !important;
+}
+
+
+
+// 面板上图标的排列样式等
+.icon-list {
+  display: flex;
+  width: 1.96rem;
+  height: 2.32rem;
+  line-height: 2.32rem;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.04);
+  border: 0.01rem solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.04rem;
+
+  .icon-span {
+    width: 33%;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .selected-icon {
+    color: #3499e5;
+  }
+}
+.block{
+  display: flex;
+  justify-content: space-around;
+  // span{
+  //   display: inline-block;
+  // }
+}
+
+.importFly {
+  width: 338px;
+  height: 38px;
+  line-height: 38px;
+  display: flex;
+  justify-content: space-between;
+  span {
+    width: 114px;
+    line-height: 38px;
+    text-align: center;
+  }
+  input {
+    width: 259px;
+    line-height: 34px;
+    border: 1px solid rgba(255, 255, 255, 0.38);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  #flyFile::file-selector-button {
+    background-color: #00000073;
+    border: 1px solid #00000073;
+    cursor: pointer;
+    color: #fff;
+    font-size: 12px;
+    float: right;
+  }
+
+}
+// .el-input--suffix .el-input__inner {
+//   padding-right: 102px;
+// }
+.el-input--suffix {
+  pointer-events: all;
+  color: #fff;
+  z-index: 9999999999999 !important;
+
+}
+::v-deep .el-select-dropdown .el-popper{
+  z-index: 9999999999999 !important;
+}
+.el-select-dropdown {
+  // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
+  // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示；
+  background-color: transparent;
+  border: 1px solid blue;
+  z-index: 9999999999999 !important;
+
+}
+
+.el-select-dropdown .el-popper{
+  z-index: 9999999 !important;
+}
+
+

src/components/sceneAtttribute/camera/camera.vue

@@ -2,14 +2,18 @@
   <div class="sm-function-module-content" v-show="cameraShow">
     <Tabs value="">
       <TabPane :label="Resource.flyRoute" name="fxxl">
-        <label class="label-container">{{ Resource.flyRoute }}</label>
+        <!-- <label class="label-container">{{ Resource.flyRoute }}</label>
         <input
           class="sm-input"
           type="file"
           accept=".fpf"
           id="flyFile"
           style="width: 100%"
-        />
+        /> -->
+        <div class="importFly">
+          <span>{{ Resource.flyRoute }}</span>
+          <input type="file" accept=".fpf" id="flyFile" style="width: 100%" />
+        </div>
         <div class="flybox">
           <i
             class="el-icon-video-play flyBtn"
@@ -44,10 +48,16 @@
             <el-button type="primary" size="mini" @click="onCancelSpinClk">
               {{ Resource.cancelRotatePoint }}
             </el-button>
-            <label>{{ Resource.pauseFly }}</label>
+            <!-- <label>{{ Resource.pauseFly }}</label>
             <input type="checkbox" v-model="stopFlyCircle" />
             <label>{{ Resource.rotateCirculation }}</label>
-            <input type="checkbox" v-model="circulation" />
+            <input type="checkbox" v-model="circulation" /> -->
+            <el-checkbox v-model="stopFlyCircle">{{
+              Resource.pauseFly
+            }}</el-checkbox>
+            <el-checkbox v-model="circulation">{{
+              Resource.rotateCirculation
+            }}</el-checkbox>
           </div>
           <label class="label-container">{{ Resource.rotateSpeed }}</label>
           <div class="sm-solider-input-box">
@@ -124,14 +134,14 @@
         <div v-show="state.customRouteNames.length > 0">
           <div class="row-item">
             <span>已经添加站点</span>
-            <div class="row-content">
+            <div>
               <!-- <el-select
                 v-model="state.selectedAddedStopIndex"
                 :options="state.routeStops"
                 label-field="stopName"
                 value-field="index"
               /> -->
-              <el-select v-model="state.selectedAddedStopIndex" >
+              <el-select v-model="state.selectedAddedStopIndex">
                 <el-option
                   v-for="item in state.routeStops"
                   :key="item.value"
@@ -155,7 +165,7 @@
             </div>
           </div>
 
-          <div>
+          <!-- <div>
             <label class="label-container">飞行速度</label>
             <div class="sm-solider-input-box">
               <input
@@ -168,16 +178,19 @@
                 v-model="state.routeSpeed"
               />
               <span>{{state.routeSpeed }}</span>
-              <!-- <input
-                class="min-solider"
-                min="0"
-                max="50"
-                step="0.1"
-                style="width: 34%"
-                type="number"
-                v-model="state.routeSpeed"
-              /> -->
             </div>
+          </div> -->
+
+          <div class="block">
+            <span class="demonstration">飞行速度</span>
+            <el-slider
+              v-model="state.routeSpeed"
+              step="1"
+              min="0"
+              max="500"
+              style="width: 63%"
+            ></el-slider>
+            <span>{{ state.routeSpeed }}</span>
           </div>
 
           <div class="icon-list" style="width: 12.96rem">
@@ -231,7 +244,7 @@ let flyManager,
 let flyLineXmls = [];
 import tool from "./tool";
 import createFlyLine_xml from "./fly-line-xml.js";
-import rotate from './rotate.vue';
+import rotate from "./rotate.vue";
 // ,
 // let pointLightSourceDrawHandler,
 //   spotOrDirectionalLightSourceDrawHandler,
@@ -244,9 +257,9 @@ import rotate from './rotate.vue';
 
 export default {
   name: "sceneCamera",
-  components:{
-    rotate
-},
+  components: {
+    rotate,
+  },
   data() {
     return {
       sharedState: store.state,
@@ -416,7 +429,6 @@ export default {
               option.value = allStops[i].index;
               menu.appendChild(option);
             }
-
             flyManager.play();
           });
         }
@@ -658,32 +670,67 @@ export default {
     },
 
     // 操作切换
- changleIconItemAction(item) {
-  this.state.actionOptions.map((itemObj) => {
-    if (itemObj.index == item.index) {
-      itemObj.isSelect = true;
-    } else {
-      itemObj.isSelect = false;
-    }
-  });
+    changleIconItemAction(item) {
+      this.state.actionOptions.map((itemObj) => {
+        if (itemObj.index == item.index) {
+          itemObj.isSelect = true;
+        } else {
+          itemObj.isSelect = false;
+        }
+      });
 
-  switch (item.index) {
-    case 1: {
-      this.flyStart();//开始
-      break;
-    }
-    case 2: {
-      this.flyPause();//暂停
-      break;
-    }
-    case 3: {
-      this.flyStop();//停止
-      break;
-    }
-    default:
-      break;
-  }
-}
+      switch (item.index) {
+        case 1: {
+          this.flyStart(); //开始
+          break;
+        }
+        case 2: {
+          this.flyPause(); //暂停
+          break;
+        }
+        case 3: {
+          this.flyStop(); //停止
+          break;
+        }
+        default:
+          break;
+      }
+    },
+
+    // 下载选择的飞行路线fpf文件
+    downLoad() {
+      let data = flyLineXmls[this.state.customRouteSelectedIndex];
+      if (!data) return;
+      let blob = new Blob([data]); //将返回的数据包装成blob（方法的具体使用参考mdn）
+      let alink = document.createElement("a");
+      alink.download = "fly-route.fpf"; //文件名,大部分浏览器兼容,IE10及以下不兼容
+      alink.href = URL.createObjectURL(blob); //根据blob 创建 url
+      alink.click(); //自动点击
+    },
+
+    // 清除选中飞行路线
+    clearRoute() {
+      flyManager.stop();
+      if (flyLineXmls.length < 1) return;
+      flyLineXmls.splice(this.state.customRouteSelectedIndex, 1);
+      this.state.customRouteNames.splice(
+        this.state.customRouteSelectedIndex,
+        1
+      );
+      if (flyLineXmls.length > 0) {
+        this.state.customRouteSelectedIndex = 0;
+        return;
+      }
+      this.state.customRouteSelectedIndex = null;
+      this.state.currentStopNames.length = 0;
+      let route = flyManager.currentRoute;
+      if (route) route.clear(); //清除之前的
+      this.state.routeStops = [];
+      this.state.setStopName = "Stop-1";
+      this.state.isSaveAutoFlag = false;
+      this.state.selectedAddedStopIndex = undefined;
+      this.state.addCurrentStopIndex = 0;
+    },
   },
 
   watch: {

src/components/sceneAtttribute/camera/rotate.vue

@@ -90,6 +90,7 @@ let scene, windowPosition, scratchTiltFrame, scratchOldTransform, handlerPoint;
 // let scratchTiltFrame = new Cesium.Matrix4();
 // let scratchOldTransform = new Cesium.Matrix4();
 // let handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
+let flyCircleDrawHandler;
 let listener;
 export default {
   name: "rotate",
@@ -100,6 +101,7 @@ export default {
       rotateShow: false, // 是否绕点旋转
       itemOptions: null, // 功能选项
       position: [], // 绕点选择中心点
+      isRoutePlay:true,//是否开启旋转
 
       state: {
         speedRatio: 1,
@@ -143,7 +145,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      console.log(window.viewer, 99999);
+      // console.log(window.viewer, 99999);
       windowPosition = new Cesium.Cartesian2();
       scratchTiltFrame = new Cesium.Matrix4();
       scratchOldTransform = new Cesium.Matrix4();
@@ -151,6 +153,11 @@ export default {
         window.viewer,
         Cesium.DrawMode.Point
       );
+      if (camera) {
+        return;
+      }
+      camera = scene.camera;
+      camera.flyCircleLoop = true;
     });
 
     this.init();
@@ -203,6 +210,40 @@ export default {
       // console.log(viewer.eventManager,"eventManager");
       // window.viewer.eventManager.addEventListener("CLICK", left_click, true);
       // handlerPoint.activate();
+      this.isRoutePlay = false;
+      if (!flyCircleDrawHandler) {
+        flyCircleDrawHandler = new Cesium.DrawHandler(
+          viewer,
+          Cesium.DrawMode.Point
+        );
+        flyCircleDrawHandler.activeEvt.addEventListener(function (isActive) {
+          if (isActive == true) {
+            viewer.enableCursorStyle = false;
+            viewer._element.style.cursor = "";
+            document.body.classList.add("drawCur");
+          } else {
+            viewer.enableCursorStyle = true;
+            document.body.classList.remove("drawCur");
+          }
+        });
+        flyCircleDrawHandler.drawEvt.addEventListener((result) => {
+          this.flyCirclePoint = result.object.position;
+          viewer.entities.removeById("fly-circle-point");
+          viewer.entities.add({
+            id: "fly-circle-point",
+            position: this.flyCirclePoint,
+            billboard: {
+              image: "@/../static/images/flypng/flyCircle.png",
+              scaleByDistance: new Cesium.NearFarScalar(10, 1.0, 1000, 0.1),
+              disableDepthTestDistance: Number.POSITIVE_INFINITY, // 关闭深度检测，使billboard不至于被裁剪
+            },
+          });
+          camera.stopFlyCircle(); // 先停止之前的旋转，再开始新的旋转
+          camera.flyCircle(this.flyCirclePoint);
+          flyCircleDrawHandler.clear();
+        });
+      }
+      flyCircleDrawHandler.activate();
     },
 
     // 添加点