车辆高亮优化

src/views/car.vue

@@ -112,19 +112,8 @@ export default {
     },
 
     mapLoad(map) {
-      let _this = this;
       this.map = map;
 
-      map.on(mars3d.EventType.click, function (event) {
-        if (!event.graphic) {
-          _this.graphicLayer.eachGraphic((graphic) => {
-            if (graphic.attr.highlight) {
-              _this.updateBg(graphic.attr.id, "car");
-            }
-          });
-        }
-      });
-
       this.graphicLayer = new mars3d.layer.GraphicLayer();
       map.addLayer(this.graphicLayer);
       this.initTilesetLayer();
@@ -139,30 +128,26 @@ export default {
           id: "car" + i,
           viewFrom: new Cesium.Cartesian3(-500, -500),
           style: {
-            html: `<div class="car${i} car-point">
+            className: `carIcon`,
+            html: `<div>
                 <div class="car-name">001号线_01_早送_守押001_苏E</div>
               </div>`,
             color: "#fff",
-            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-            verticalOrigin: Cesium.VerticalOrigin.CENTER,
-            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
-              0,
-              400000
-            ),
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            distanceDisplayCondition: false,
             clampToGround: true,
+            highlight: {
+              type: "click",
+              className: `carIconActive`,
+            },
           },
           attr: {
             index: i,
             id: "car" + i,
           },
         });
-        graphic.on(mars3d.EventType.click, function (event) {
-          _this.updateBg(event.target._id, "car-active");
-          event.target.options.attr = {
-            ...event.target.options.attr,
-            ...{ highlight: true },
-          };
-
+        graphic.on(mars3d.EventType.highlightOpen, function (event) {
           _this.$router.push("/carInfo");
         });
 
@@ -179,17 +164,6 @@ export default {
       // }, interval * 1000);
     },
 
-    updateBg(id, imageName) {
-      const className = document.getElementsByClassName(id)[0];
-      className.style.background = `url( ${require(`@/assets/images/${imageName}.png`)})`;
-      className.style.backgroundSize = "100% 100%";
-      if (imageName == "car-active") {
-        className.style.transform = "scale(1.2)";
-      } else {
-        className.style.transform = "";
-      }
-    },
-
     // 改变位置
     changePosition(time) {
       let _this = this;
@@ -215,7 +189,6 @@ export default {
      */
     initTilesetLayer() {
       let _this = this;
-
       // 添加参考三维模型;
       const tiles3dLayer = new mars3d.layer.TilesetLayer({
         name: "姑苏区建筑物",