走马灯，地图图标实体事件处理

src/views/remote/farmland/hcxx.vue

@@ -9,11 +9,12 @@
           class="imgDiv"
           v-for="(item, i) in monitorList"
           :key="i"
+          :class="i == imgIndex ? 'higImg' : ''"
           @click="clickImg(i)"
           @mouseenter="handleMouseEnter(item, i)"
           @mouseleave="handleMouseLeave(item, i)"
         >
-          <span class="imgindex">{{ i + 1 }}</span>
+          <span class="imgindexspan">{{ i + 1 }}</span>
           <img :src="item.fjPreview" />
           <p>{{ item.fjDatetime }}</p>
         </div>
@@ -24,15 +25,20 @@
       title="图片查看"
       width="30%"
       :modal="false"
+      :fullscreen="false"
       draggable
+      class="imgdialog"
+      :append-to-body="true"
     >
       <div class="">
         <el-carousel
+          v-if="dialogVisible"
           trigger="click"
           height="332px"
           indicator-position="none"
           :autoplay="false"
           :initial-index="imgIndex"
+          v-model="imgIndex"
           ref="carousel"
           @change="(v) => (imgIndex = v)"
         >
@@ -40,12 +46,11 @@
             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>
+            <span class="imgindexspan">{{ i + 1 }}</span>
             <div class="text">
               <div>
                 拍摄时间:{{ item.fjDatetime }} 拍摄人:{{ item.createBy }}
@@ -86,11 +91,13 @@ export default {
       // dwArr:[],//
       idArr: [], //id数组
       handler: {},
-      dialogVisible: true,
+      dialogVisible: false,
       imgIndex: 0,
     };
   },
-  mounted() {},
+  mounted() {
+    this.inputAction();
+  },
   methods: {
     inputAction() {
       // 为viewer添加鼠标移动的监听事件
@@ -98,65 +105,63 @@ export default {
       //   // movement.endPosition是一个Cesium.Cartesian2对象，表示鼠标在屏幕上的位置
 
       // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      // 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) {
-        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; // 用于跟踪当前高亮的特征。
+      // 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 higFeature = null; // 用于跟踪当前高亮的特征。
+      let _this = this;
       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; // 更新当前高亮的特征。
+          if (feature.id_ && feature.id_.includes("jt")) {
+            if (feature !== higFeature) {
+              if (higFeature) _this.updateStyle(higFeature, null, "-2");
+              // 进入新的feature
+              _this.updateStyle(feature, null, "");
+              _this.imgIndex = _this.monitorList.findIndex(
+                (m) => "jt" + m.id == feature.id_
+              );
+              _this.dialogVisible = true;
+              higFeature = feature;
+            }
           }
         });
       });
 
       window.map.mapDiv.on("pointerout", function () {
-        if (highlightedFeature) {
+        if (higFeature) {
           // 如果存在高亮的特征，则恢复其样式。
-          highlightedFeature.setStyle(null); // 或其他恢复样式的代码。
-          highlightedFeature = null; // 重置高亮特征。
+          _this.updateStyle(higFeature, null, "-2");
+          higFeature = null; // 重置高亮特征。
         }
       });
     },
     handleMouseEnter(a, b) {
-      this.ceshi(a, "yr");
+      this.ceshi(a, true);
     },
     handleMouseLeave(a, b) {
-      this.ceshi(a, "yc");
-    },
-    changeData(name, updata) {
-      this[name] = updata;
+      this.ceshi(a, false);
     },
+
     clickImg(val) {
-      this.$emit("updateParent", "emitImgList", this.monitorList);
-      this.$emit("updateParent", "emitImgIndex", val);
+      this.imgIndex == val;
+      this.dialogVisible = true;
     },
 
     // 加载图片
@@ -174,6 +179,14 @@ export default {
       });
       feature.setId("jt" + obj.id);
       this.updateStyle(feature, obj, "-2");
+      feature.on("mouseenter", function (evt) {
+        console.log("鼠标移入特征");
+      });
+
+      feature.on("mouseleave", function (evt) {
+        console.log("鼠标移出特征");
+      });
+
       // 将点Feature添加到矢量图层
       vectorLayer.getSource().addFeature(feature);
       this.flyto(obj);
@@ -185,16 +198,13 @@ export default {
         duration: 2000, // 动画持续时间，单位毫秒
       });
     },
-    ceshi(obj, evtName) {
+    ceshi(obj, hig) {
       let aaa = this.getFeatureById("jt" + obj.id);
-      if (evtName == "yr") {
-        this.updateStyle(aaa, null);
-      } else {
-        this.updateStyle(aaa, null, "-2");
-      }
+      this.updateStyle(aaa, null, hig ? "" : "-2");
     },
     getFeatureById(id) {
       var features = vectorLayer.getSource().getFeatures();
+      console.log(features);
       return features.find((fi) => fi.getId() === id);
     },
     updateStyle(feature, obj, evtName = "") {
@@ -241,7 +251,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.imgindex {
+.imgindexspan {
   width: 26px;
   height: 26px;
   display: inline-block;
@@ -261,8 +271,8 @@ export default {
     flex-wrap: wrap;
     // background-color: rgba(255, 192, 203, 0.372);
     .imgDiv {
-      width: 126px;
-      height: 83px;
+      width: 130px;
+      height: 87px;
       margin-right: 10px;
       // background-color: rgba(0, 255, 255, 0.413);
       position: relative;
@@ -282,12 +292,15 @@ export default {
         line-height: 30px;
       }
     }
+    .higImg {
+      border: 2px solid #dbad70;
+    }
   }
 }
+
 .carouImg {
   width: 100%;
   height: 100%;
- 
   img {
     width: 100%;
     height: 100%;
@@ -305,4 +318,7 @@ export default {
     color: #33ccff;
   }
 }
+.el-overlay-dialog {
+  z-index: 2000; /* 根据需要调整 */
+}
 </style>