update

public/package/js/label.js

@@ -32,7 +32,7 @@ class Label2D extends THREE.EventDispatcher {
 
         this.elem.css({ position: 'absolute', 'z-index': 999 })
         this.clickFun = o.clickFun;
-        this.clickFun && this.elem.on('click', this.clickFun.bind(this,o))
+        this.clickFun && this.elem.on('click', this.clickFun.bind(this,{...o,elem:this.elem}))
 
         {
             let update = (e) => {

src/views/Home_pc.vue

@@ -40,12 +40,29 @@ const transitionTime = 2000
 
 let labelClick = (e) => {
   if (e.centerCamePosi) {
+
+    console.log(e);
     let { x, y, z } = e.centerCamePosi
     window.transitions.start(
       window.lerp.vector(window.viewer.camera.position,
         new window.THREE.Vector3(x, y, z)),
       transitionTime,
-      () => { },
+      () => {
+        e.elem[0].style.display == 'block' && e.elem.addClass('detailShow')
+        let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
+        wlmesh.material.emissiveMap = this.centerLabel.emissiveTexture;
+        wlmesh.material.dispose();
+
+        // window.viewer.labels.forEach(item => {
+
+        //     if (centerLabel.title == item.title) {
+        //       this.centerLabel = centerLabel
+        //     }
+        //     else {
+        //       item.elem.removeClass('detailShow')
+        //     }
+        //   })
+      },
       0/* Delay */,
       window.easing.easeInOutQuad,
       'cameraFly');
@@ -165,7 +182,6 @@ export default {
 
     handleItem(data) {
       this.currentItem = data.id
-      window.activetab = data.id
       switch (data.id) {
         case "info":
           this.info()
@@ -272,7 +288,7 @@ export default {
           window.viewer.control.maxPolarAngle = Math.PI / 1.5;
           window.viewer.control.minPolarAngle = Math.PI / 6;
           window.viewer.loadLabelsFromData(picLabels)
-          window.showWenli = true
+          // window.showWenli = true
         },
         0/* Delay */,
         window.easing.easeInOutQuad,
@@ -332,21 +348,21 @@ export default {
     })
 
     window.viewer.addEventListener("delayUpdate", (e) => {
-      setTimeout(() => {
-        if (this.currentItem == 'pic') {
-          let centerLabel = window.viewer.getCLabel()
-          if (centerLabel) {
-            window.viewer.labels.forEach(item => {
-              if (centerLabel.title == item.title) {
-                this.centerLabel = centerLabel
-              }
-              else {
-                item.elem.removeClass('detailShow')
-              }
-            })
-          }
-        }
-      });
+      // setTimeout(() => {
+      // if (this.currentItem == 'pic') {
+      //   let centerLabel = window.viewer.getCLabel()
+      //   if (centerLabel) {
+      //     window.viewer.labels.forEach(item => {
+      //       if (centerLabel.title == item.title) {
+      //         this.centerLabel = centerLabel
+      //       }
+      //       else {
+      //         item.elem.removeClass('detailShow')
+      //       }
+      //     })
+      //   }
+      // }
+      // });
     })
 
   },
@@ -469,7 +485,6 @@ export default {
       background-repeat: no-repeat;
       bottom: 0;
       right: 0;
-      transition: all 0.3s;
     }
 
     a {
@@ -515,7 +530,6 @@ export default {
       bottom: 0;
       right: unset;
       left: 0;
-      transition: all 0.3s;
     }
 
   }
@@ -535,7 +549,6 @@ export default {
       right: 0;
       top: 0;
       left: 0;
-      transition: all 0.3s;
     }
 
     &::before {
@@ -550,6 +563,32 @@ export default {
       right: -20px;
     }
 
+    &:hover {
+      color: #fff;
+
+      &:after {
+        background-image: url('~@/assets/images/point_active.svg');
+        content: '';
+      }
+
+      &::before {
+        content: '';
+        background-color: #fff !important;
+      }
+
+      a {
+
+        >p,
+        span {
+          color: #fff;
+        }
+
+        .sline {
+          background-color: #fff;
+        }
+      }
+    }
+
     a {
       display: block;
       position: absolute;
@@ -568,6 +607,8 @@ export default {
       color: #fff;
       box-sizing: border-box;
 
+
+
       &::after {
         content: '';
       }