车辆详情页面优化

public/index.html

@@ -23,10 +23,10 @@
     <script src="./lib/mars3d/mars3d.js" type="text/javascript"></script>
 
     <!-- 插件 -->
-    <script
+    <!-- <script
       src="./lib/mars3d/plugins/html2canvas.min.js"
       type="text/javascript"
-    ></script>
+    ></script> -->
     <script
       src="./lib/mars3d/plugins/echarts/echarts.min.js"
       type="text/javascript"

src/assets/styles/map.scss

@@ -85,16 +85,15 @@
   }
 }
 
-.car-point {
+.carIcon {
   cursor: pointer;
   width: 210px;
   height: 100px;
   background: url("../images/car.png");
   background-size: 100% 100%;
-
   .car-name {
     position: relative;
-    top: 2px;
+    top: 3px;
     padding-left: 30px;
     padding-right: 10px;
     font-size: 14px;
@@ -104,6 +103,10 @@
     text-overflow: ellipsis; /* 显示省略号 */
   }
 }
+.carIconActive {
+  background: url("../images/car-active.png");
+  background-size: 100% 100%;
+}
 
 .video-dialog {
   background-color: transparent;
@@ -130,9 +133,9 @@
   }
   .mars3d-popup-content {
     margin: 0;
-    & > div:first-child {
-      height: 0 !important;
-    }
+    // & > div:first-child {
+    //   height: 0 !important;
+    // }
     .mars3d-template-content {
       margin-top: 0;
       & > div:first-child {
@@ -146,5 +149,43 @@
     width: 260px;
     background: url("../images/diy-popup.png");
     background-size: 100% 100%;
+    padding: 20px 25px;
+    .popup-title {
+      font-size: 18px;
+      color: #ffffff;
+      text-align: center;
+      margin: 15px 0 20px 0;
+    }
+    .sub-title {
+      width: 120px;
+      height: 20px;
+      text-align: center;
+      line-height: 20px;
+      background: url("../images//sub-title.png");
+      background-size: 100% 100%;
+      margin: 10px auto;
+      font-size: 14px;
+      color: #fff;
+    }
+    .popup-item {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      .popup-lable {
+        color: #89b7f2;
+        .popup-value {
+          margin-left: 3px;
+          color: #ffffff;
+        }
+      }
+    }
+    .popup-grid {
+      & > div {
+        margin-bottom: 10px;
+      }
+      & > div:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 }

src/views/car.vue

@@ -128,7 +128,6 @@ export default {
       this.graphicLayer = new mars3d.layer.GraphicLayer();
       map.addLayer(this.graphicLayer);
       this.initTilesetLayer();
-      if (process.env.NODE_ENV === "production") this.initTilesetLayer();
     },
     /**
      * 生成车辆实时点位
@@ -145,8 +144,11 @@ export default {
               </div>`,
             color: "#fff",
             horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-            distanceDisplayCondition: true,
+            verticalOrigin: Cesium.VerticalOrigin.CENTER,
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
+              0,
+              400000
+            ),
             clampToGround: true,
           },
           attr: {
@@ -213,12 +215,11 @@ export default {
      */
     initTilesetLayer() {
       let _this = this;
-      this.createCar();
-      return;
+
       // 添加参考三维模型;
       const tiles3dLayer = new mars3d.layer.TilesetLayer({
         name: "姑苏区建筑物",
-        url: this.baseUrl,
+        url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
         maximumScreenSpaceError: 1,
         style: {
           color: {
@@ -230,7 +231,9 @@ export default {
 
       if (process.env.NODE_ENV === "production") this.chkShadows(true);
 
-      this.createCar();
+      tiles3dLayer.on(mars3d.EventType.load, function (event) {
+        _this.createCar();
+      });
     },
     chkShadows(val) {
       let _this = this;

src/views/carInfo.vue

@@ -20,7 +20,6 @@
 <script>
 import MarsMap from "@/components/mars-map";
 import grids from "@/components/grids.vue";
-import { html } from "js-beautify";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
@@ -60,11 +59,34 @@ export default {
   mounted() {},
   methods: {
     mapLoad(map) {
-      let _this = this;
       this.map = map;
       this.graphicLayer = new mars3d.layer.GraphicLayer();
       map.addLayer(this.graphicLayer);
       this.initTilesetLayer();
+
+      // this.createCar();
+    },
+
+    /**
+     * 加载姑苏区三维图层
+     */
+    initTilesetLayer() {
+      let _this = this;
+      // 添加参考三维模型;
+      let tiles3dLayer = new mars3d.layer.TilesetLayer({
+        name: "姑苏区建筑物",
+        url: "https://www.jichuanglanhai.com:88/3dtiles/yunkun/tileset.json",
+        maximumScreenSpaceError: 1,
+        style: {
+          color: {
+            conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
+          },
+        },
+      });
+      this.map.addLayer(tiles3dLayer);
+      tiles3dLayer.on(mars3d.EventType.load, function (event) {
+        _this.createCar();
+      });
     },
     /**
      * 生成车辆实时点位
@@ -74,52 +96,42 @@ export default {
       for (let i = 0; i < 1; i++) {
         const graphic = new mars3d.graphic.DivGraphic({
           id: "car" + i,
-          position: [120.616912, 31.288775],
+          position: [120.590416, 31.275593],
           style: {
-            html: `<div class="car${i} car-point" style="background:url( ${require(`@/assets/images/car-active.png`)});background-size: 100% 100%;transform:scale(1.3)">
+            className: `carIcon`,
+            html: `<div>
                 <div class="car-name">001号线_01_早送_守押001_苏E</div>
               </div>`,
             color: "#fff",
-
-            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //居中防止自定义位置偏差
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
             distanceDisplayCondition: false,
             clampToGround: true,
-            offsetX: -105,
           },
           attr: {
             index: i,
             id: "car" + i,
           },
-          popup: [
-            {
-              type: "html",
-              html: `<div class="diy-popup">弹窗</div>`,
-            },
-          ],
-          popupOptions: {
-            className: "carPopup",
-            offsetX: 300,
-            offsetY: -50,
-            closeButton: false,
-          },
         });
-        graphic.openPopup();
-
-        // graphic.on(mars3d.EventType.click, function (event) {
-        //   _this.updateBg(event.target._id, "car-active");
-        //   event.target.options.attr = {
-        //     ...event.target.options.attr,
-        //     ...{ highlight: true },
-        //   };
-        // });
 
         this.graphicLayer.addGraphic(graphic);
+        // //绑定弹窗
+        this.bindPopup(graphic);
+
+        this.$nextTick(() => {
+          graphic.openPopup();
+          graphic.openHighlight(
+            {
+              className: `carIconActive`,
+            },
+            false
+          );
+        });
       }
 
       const circleGraphic = new mars3d.graphic.CircleEntity({
         id: `circle1`,
-        position: new mars3d.LngLatPoint(120.616912, 31.288775),
+        position: new mars3d.LngLatPoint(120.590416, 31.275593),
         style: {
           radius: 150,
           materialType: mars3d.MaterialType.CircleWave,
@@ -132,7 +144,7 @@ export default {
       });
       this.graphicLayer.addGraphic(circleGraphic);
 
-      this.map.flyToPoint([120.616912, 31.288775], {
+      this.map.flyToPoint([120.590416, 31.275593], {
         radius: 798.9,
         heading: 357.9,
         pitch: -31.6,
@@ -147,17 +159,63 @@ 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 = "";
-      }
+    bindPopup(fixedRoute) {
+      fixedRoute.bindPopup(
+        `<div class="diy-popup">
+            <div class="popup-title">001号线_01_早送_守押<br/>
+              001_苏E12345
+              </div>
+            <div class="popup-item">
+                <div class="popup-lable">线路类型：</div>
+                <div class="popup-value">押运线路</div>
+              </div>
+              <div class="sub-title">装备信息</div>
+              <div class="popup-grid">
+                  <div class="popup-item">
+                <div class="popup-lable">车牌号码：</div>
+                <div class="popup-value">苏E12345（守押001）</div>
+              </div>
+              <div class="popup-item">
+                <div class="popup-lable">枪支：</div>
+                <div class="popup-value">枪支1478（97-x）</div>
+              </div>
+              <div class="popup-item">
+                <div class="popup-lable">枪支：</div>
+                <div class="popup-value">枪支1480（97-x）</div>
+              </div>
+              <div class="popup-item">
+                <div class="popup-lable">弹夹：</div>
+                <div class="popup-value">弹夹585</div>
+              </div>
+                </div>
+                <div class="sub-title">人员信息</div>
+                     <div class="popup-grid">
+                  <div class="popup-item">
+                <div class="popup-lable">车长：</div>
+                <div class="popup-value">张宏伟</div>
+              </div>
+              <div class="popup-item">
+                <div class="popup-lable">驾驶员：</div>
+                <div class="popup-value">陈贵华</div>
+              </div>
+              <div class="popup-item">
+                <div class="popup-lable">押运员：</div>
+                <div class="popup-value">王昌文</div>
+              </div>
+              <div class="popup-item">
+                <div class="popup-lable">押运员：</div>
+                <div class="popup-value">李名</div>
+              </div>
+                </div>
+          </div>`,
+        {
+          className: "carPopup",
+          offsetX: 250,
+          offsetY: -50,
+          closeButton: false,
+        }
+      );
     },
-
     // 改变位置
     changePosition(time) {
       let _this = this;
@@ -177,28 +235,6 @@ export default {
     random(min, max) {
       return Math.floor(Math.random() * (max - min + 1) + min);
     },
-
-    /**
-     * 加载姑苏区三维图层
-     */
-    initTilesetLayer() {
-      let _this = this;
-      // 添加参考三维模型;
-      let tiles3dLayer = new mars3d.layer.TilesetLayer({
-        name: "姑苏区建筑物",
-        url: this.baseUrl,
-        maximumScreenSpaceError: 1,
-        style: {
-          color: {
-            conditions: [["true", `color("rgba(42, 160, 224, 1)")`]],
-          },
-        },
-      });
-      this.map.addLayer(tiles3dLayer);
-      tiles3dLayer.on(mars3d.EventType.load, function (event) {
-        _this.createCar();
-      });
-    },
     chkShadows(val) {
       let _this = this;
       this.map.viewer.shadows = val;
@@ -215,11 +251,11 @@ export default {
 
 <style lang="scss" scoped>
 .container-top {
-  position: absolute;
+  position: fixed;
   top: 23px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 50;
+  z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;