实地图片走马灯

src/views/remote/farmland/hcxx.vue

@@ -13,12 +13,53 @@
           @mouseenter="handleMouseEnter(item, i)"
           @mouseleave="handleMouseLeave(item, i)"
         >
-          <span>{{ i + 1 }}</span>
+          <span class="imgindex">{{ i + 1 }}</span>
           <img :src="item.fjPreview" />
           <p>{{ item.fjDatetime }}</p>
         </div>
       </div>
     </div>
+    <el-dialog
+      v-model="dialogVisible"
+      title="图片查看"
+      width="30%"
+      :modal="false"
+      draggable
+    >
+      <div class="">
+        <el-carousel
+          trigger="click"
+          height="332px"
+          indicator-position="none"
+          :autoplay="false"
+          :initial-index="imgIndex"
+          ref="carousel"
+          @change="(v) => (imgIndex = v)"
+        >
+          <el-carousel-item
+            v-for="(item, i) in monitorList"
+            :key="i"
+            class="carouImg"
+            @click="clickImg(i)"
+            @mouseenter="handleMouseEnter(item, i)"
+            @mouseleave="handleMouseLeave(item, i)"
+          >
+            <img :src="item.fjPreview" />
+            <span class="imgindex">{{ i + 1 }}</span>
+            <div class="text">
+              <div>
+                拍摄时间:{{ item.fjDatetime }} 拍摄人:{{ item.createBy }}
+              </div>
+              <div>
+                拍摄坐标:{{ Number(item.fjLongitude).toFixed(6) }},
+                {{ Number(item.fjLatitude).toFixed(6) }}
+                拍摄方位:{{ item.fjDirection }}
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -45,15 +86,64 @@ export default {
       // dwArr:[],//
       idArr: [], //id数组
       handler: {},
+      dialogVisible: true,
+      imgIndex: 0,
     };
   },
   mounted() {},
   methods: {
     inputAction() {
+      // 为viewer添加鼠标移动的监听事件
+      // viewer.screenSpaceEventHandler.setInputAction(function (movement) {
+      //   // movement.endPosition是一个Cesium.Cartesian2对象，表示鼠标在屏幕上的位置
+
+      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      // this.handler.setInputAction(function (movement) {
+      //   let pickedFeature = scene.pick(movement.position);
+      //   console.log(movement,pickedFeature,'////');
+      //   // that[queryName](movement);
+      // },  Cesium.ScreenSpaceEventType.MOUSE_MOVE);
       // 鼠标移动事件
-      this.handler.setInputAction(function (movement) {},
-      Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      this.handler.setInputAction(function (movement) {
+        console.log(movement, "movement");
+        // 通过pick方法获取鼠标下的实体
+        // var pickedObject = viewer.scene.pick(movement.endPosition);
+        // if (
+        //   Cesium.defined(pickedObject) &&
+        //   scene.pickPositionSupported &&
+        //   pickedObject != null
+        // ) {
+        //   console.log(pickedObject,'pickedObject'); // 打印实体的ID
+        // }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+      var highlightedFeature = null; // 用于跟踪当前高亮的特征。
+
+      window.map.mapDiv.on("pointermove", function (evt) {
+        window.map.mapDiv.forEachFeatureAtPixel(evt.pixel, function (feature) {
+          if (highlightedFeature && feature !== highlightedFeature) {
+            this.updateStyle();
+          }
+          if (feature !== highlightedFeature) {
+            // 如果不是同一个特征，则更新样式。
+            feature.setStyle(
+              new ol.style.Style({
+                /* 设置样式 */
+              })
+            );
+            highlightedFeature = feature; // 更新当前高亮的特征。
+          }
+        });
+      });
+
+      window.map.mapDiv.on("pointerout", function () {
+        if (highlightedFeature) {
+          // 如果存在高亮的特征，则恢复其样式。
+          highlightedFeature.setStyle(null); // 或其他恢复样式的代码。
+          highlightedFeature = null; // 重置高亮特征。
+        }
+      });
     },
     handleMouseEnter(a, b) {
       this.ceshi(a, "yr");
@@ -71,9 +161,12 @@ export default {
 
     // 加载图片
     ddd(obj) {
-      vectorLayer = new VectorLayer({
-        source: new VectorSource(),
-      });
+      if (!vectorLayer) {
+        vectorLayer = new VectorLayer({
+          source: new VectorSource(),
+        });
+        window.map.mapDiv.addLayer(vectorLayer);
+      }
       // 添加一个特征，并设置其旋转角度
       var feature = new Feature({
         geometry: new Point([obj.fjLongitude, obj.fjLatitude]), // 设置位置
@@ -83,7 +176,6 @@ export default {
       this.updateStyle(feature, obj, "-2");
       // 将点Feature添加到矢量图层
       vectorLayer.getSource().addFeature(feature);
-      window.map.mapDiv.addLayer(vectorLayer);
       this.flyto(obj);
     },
     flyto(obj) {
@@ -96,9 +188,9 @@ export default {
     ceshi(obj, evtName) {
       let aaa = this.getFeatureById("jt" + obj.id);
       if (evtName == "yr") {
-        this.updateStyle(aaa, obj);
+        this.updateStyle(aaa, null);
       } else {
-        this.updateStyle(aaa, obj, "-2");
+        this.updateStyle(aaa, null, "-2");
       }
     },
     getFeatureById(id) {
@@ -106,6 +198,9 @@ export default {
       return features.find((fi) => fi.getId() === id);
     },
     updateStyle(feature, obj, evtName = "") {
+      let rotation = obj
+        ? (Number(obj.fjDirection) / 180) * Math.PI
+        : feature.getStyle().image_.rotation_;
       feature.setStyle(
         new Style({
           image: new Icon({
@@ -114,7 +209,7 @@ export default {
             anchorXUnits: "fraction",
             anchorYUnits: "pixels",
             src: `/static/images/路径@3x${evtName}.png`, // 替换为你的箭头图片路径
-            rotation: (Number(obj.fjDirection) / 180) * Math.PI, // 设置旋转角度，例如45度角，Math.PI / 4 表示 π/4 弧度，即45度角。可以根据需要调整角度值 Math.P 及180度
+            rotation, // 设置旋转角度，例如45度角，Math.PI / 4 表示 π/4 弧度，即45度角。可以根据需要调整角度值 Math.P 及180度
           }),
         })
       );
@@ -125,6 +220,7 @@ export default {
         vectorLayer.getSource().removeFeature(item);
       });
       window.map.mapDiv.removeLayer(vectorLayer);
+      vectorLayer = null;
     },
     init(imgList) {
       this.idArr = [];
@@ -145,6 +241,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.imgindex {
+  width: 26px;
+  height: 26px;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #dbad70;
+  text-align: center;
+  line-height: 26px;
+}
 .imgCon {
   .imgList {
     width: 100%;
@@ -164,17 +271,6 @@ export default {
         width: 126px;
         height: 83px;
       }
-      span {
-        width: 26px;
-        height: 26px;
-        display: inline-block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background: #dbad70;
-        text-align: center;
-        line-height: 26px;
-      }
       p {
         position: absolute;
         bottom: 0;
@@ -188,4 +284,25 @@ export default {
     }
   }
 }
+.carouImg {
+  width: 100%;
+  height: 100%;
+ 
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  .text {
+    width: 100%;
+    height: 60px;
+    line-height: 30px;
+    text-align: left;
+    padding-left: 20px;
+    font-size: 18px;
+    background: #dbad70;
+    position: absolute;
+    bottom: 0;
+    color: #33ccff;
+  }
+}
 </style>