枪支图标

postcss.config.js

@@ -1,7 +1,10 @@
 module.exports = {
   plugins: {
     "postcss-px-to-viewport": {
-      viewportWidth: 1920,
+      // viewportWidth: 1920,
+
+      viewportWidth: 6656,
+      viewportHeight: 1792,
     },
   },
 };

src/assets/styles/map.scss

@@ -177,7 +177,7 @@
     .pointer {
       position: absolute;
       left: -145px;
-      top: 50%;
+      top: 30%;
       transform: translateY(-50%);
       width: 145px;
       height: 207px;
@@ -270,3 +270,26 @@
     }
   }
 }
+.q-icon {
+  position: relative;
+
+  img {
+    height: 32px;
+    width: 25px;
+  }
+  .qiang-popup {
+    position: absolute;
+    top: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #00162d;
+    font-size: 14px;
+    color: #fff;
+    max-width: 200px;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 使用省略号 */
+    padding: 0px 10px;
+    border: 1px solid #008cff;
+  }
+}

src/components/grids.vue

@@ -8,9 +8,9 @@
       </div>
     </div>
     <div class="carousel">
-      <div @click="scroll(-1)" class="scroll-btn left">
+      <!-- <div @click="scroll(-1)" class="scroll-btn left">
         <i class="el-icon-arrow-left"></i>
-      </div>
+      </div> -->
 
       <div class="items-wrapper" ref="itemsWrapper">
         <div v-for="(item, index) in items" :key="index" class="item">
@@ -34,9 +34,9 @@
           </div>
         </div>
       </div>
-      <div @click="scroll(1)" class="scroll-btn right">
+      <!-- <div @click="scroll(1)" class="scroll-btn right">
         <i class="el-icon-arrow-right"></i>
-      </div>
+      </div> -->
     </div>
 
     <el-dialog
@@ -356,7 +356,8 @@ export default {
 
 .item {
   position: relative;
-  flex: 0 0 calc(100% / 6); /* 每行显示5个格子 */
+  // flex: 0 0 calc(100% / 6); /* 每行显示5个格子 */
+  flex: 1;
   height: 140px;
   margin-right: 10px;
   .video-src {
@@ -408,6 +409,10 @@ export default {
   }
 }
 
+.item:last-child {
+  margin: 0;
+}
+
 /* CSS */
 .items-wrapper {
   //   overflow-y: scroll; /* 强制显示垂直滚动条 */

src/views/car.vue

@@ -56,12 +56,14 @@
 import MarsMap from "@/components/mars-map";
 import { getfindByPlateNums } from "@/api/yunkun/index.js";
 import { getCarPoint, getCarByCarplate } from "@/api/yunkun/yunkun.js";
+import { html } from "js-beautify";
 
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
       timer: null,
+      time2: null,
       searchList: [],
       searchText: "",
       searchQuery: {
@@ -73,8 +75,8 @@ export default {
         carIds: "", //车辆id 多个用逗号分开，优先级低于teamId
       },
       list: [],
-      multipleList: ["营运线路", "维护线路", "临时任务"],
+      multipleList: ["营运线路", "维护线路", "临时任务", "枪支定位"],
-      selectedItems: [],
+      selectedItems: ["枪支定位"],
       graphicLayer: null,
       baseUrl: basePathUrl + "lib/geoJson/tileset.json",
       carUrl: basePathUrl + "static/qiche.gltf",
@@ -138,7 +140,9 @@ export default {
   },
   components: { MarsMap },
   beforeDestroy() {
-    clearInterval(this.timer);
+    if (this.time) clearInterval(this.timer);
+
+    if (this.time2) clearInterval(this.time2);
     // 在组件销毁之前移除事件监听，防止内存泄漏
     document.removeEventListener("click", this.handleClickOutside);
     this.mapLayer.car.remove();
@@ -242,6 +246,10 @@ export default {
       // 创建矢量图层
       this.mapLayer.car = new mars3d.layer.GraphicLayer();
       this.map.addLayer(this.mapLayer.car);
+
+      this.mapLayer.qiang = new mars3d.layer.GraphicLayer();
+      this.map.addLayer(this.mapLayer.qiang);
+
       this.createCar();
     },
     /**创建车辆 苏E17360*/
@@ -270,7 +278,7 @@ export default {
               pitch: 0, //俯仰角
               roll: 0, //翻滚角
               highlight: {
-                type: "click",
+                // type: "click",
                 silhouette: true,
                 silhouetteColor: "#FFB200",
               },
@@ -369,11 +377,10 @@ export default {
       this.changePosition(interval);
 
       //生产环境开启轮询
-      if (process.env.NODE_ENV === "production") {
+
-        this.time = setInterval(() => {
+      this.time = setInterval(() => {
-          this.changePosition(interval);
+        this.changePosition(interval);
-        }, interval * 1000);
+      }, interval * 1000);
-      }
     },
 
     async changePosition(interval) {
@@ -392,6 +399,65 @@ export default {
       });
     },
 
+    async getPoint() {
+      let res = await getCarPoint({
+        teamId: 3,
+      });
+      res.list = res.list.filter((item) => item.stateCn.includes("在线"));
+      return res.list;
+    },
+
+    async createQ() {
+      const list = await this.getPoint();
+      this.mapLayer.qiang.clear();
+      this.mapLayer.qiang.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
+      list.map((item, index) => {
+        const graphic = new mars3d.graphic.DivGraphic({
+          id: `qIcon${item.carId}`,
+          position: new mars3d.LngLatPoint(
+            parseFloat(item.lng),
+            parseFloat(item.lat)
+          ),
+          style: {
+            html: `
+            <div class="q-icon">
+              <div class="qiang-popup"> ${item.carName}</div>
+              <img src="${require("../assets/images/qiangIcon.png")}" />
+              </div>
+            `,
+
+            clampToGround: true,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          },
+        });
+        this.mapLayer.qiang.addGraphic(graphic);
+      });
+
+      // this.changeQPosition(0);
+      const interval = 10;
+      this.changeQPosition(interval);
+
+      this.time2 = setInterval(() => {
+        this.changeQPosition(interval);
+      }, interval * 1000);
+    },
+
+    async changeQPosition(interval) {
+      let list = await this.getPoint();
+      this.mapLayer.qiang.eachGraphic((graphic) => {
+        let qIcon = list.filter((car) => `qIcon${car.carId}` == graphic.id);
+        if (qIcon.length > 0) {
+          let position = Cesium.Cartesian3.fromDegrees(
+            parseFloat(qIcon[0].lng),
+            parseFloat(qIcon[0].lat),
+            30
+          );
+          graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
+        }
+      });
+    },
+
     /**
      * 处理车辆被选中
      */
@@ -466,7 +532,16 @@ export default {
       } else {
         this.selectedItems.push(item);
       }
+      const active = this.selectedItems.toString();
+      if (this.time2) clearInterval(this.time2);
 
+      if (!active.includes("枪支")) {
+        //渲染枪支图标
+        this.createQ();
+      } else {
+        //清除枪支
+        this.mapLayer.qiang.clear();
+      }
       if (this.selectedItems.length == 0) {
         this.mapLayer.car.eachGraphic((graphic) => {
           if (graphic.show) return;
@@ -626,7 +701,7 @@ export default {
   justify-content: space-between;
   background: url("../assets/images/multipleList.png");
   background-size: 100% 100%;
-  padding: 0 220px;
+  padding: 0 180px;
   .checkbox {
     cursor: pointer;
     width: 112px;

src/views/carInfo.vue

@@ -207,6 +207,10 @@ export default {
       const car = new mars3d.graphic.FixedRoute({
         id: this.queryParams.carId,
         name: "漫游对象",
+        // orientation: new Cesium.VelocityOrientationProperty([
+        //   parseFloat(lastPoint.lng),
+        //   parseFloat(lastPoint.lat),
+        // ]),
         // positions: [[parseFloat(lastPoint.lng), parseFloat(lastPoint.lat)]],
         camera: {
           type: "gs",
@@ -248,25 +252,26 @@ export default {
       console.log(this.missionData);
       this.bindPopup(car, res.data);
       car.openPopup();
-      car.start();
+      // car.start();
 
       const interval = 10;
       this.changePosition(interval);
-      if (process.env.NODE_ENV === "production") {
+      // if (process.env.NODE_ENV === "production") {
-        this.timer = setInterval(() => {
+      this.timer = setInterval(() => {
-          this.changePosition(interval);
+        this.changePosition(interval);
-        }, interval * 1000);
+      }, interval * 1000);
-      }
+      // }
     },
     async changePosition(interval) {
       let list = await this.carPoint();
       if (list.length == 0) return;
       let carItem = this.mapLayer.car.getGraphicById(this.queryParams.carId);
-      // carItem.model.heading = parseFloat(list[0].drct);
+      // carItem.orientation = new Cesium.VelocityOrientationProperty([
+      //   list[0].drct,
+      // ]);
+      // carItem.model.pitch = parseFloat(list[0].drct);
       // console.log(carItem.model.heading, "sss");
-      //StyleOptions({
+      // carItem.model.heading = parseFloat(list[0].drct);
-      //   heading:parseFloat(list[0].drct)
-      // })
 
       this.mileData.speed = list[0].speed;
       this.mileData.mile = list[0].preMile;
@@ -305,7 +310,7 @@ export default {
         <div>
         <div class="pointer"></div>
             <div class="popup-title">${this.missionData.missionName}<br/>
-             
+
               </div>
               <div class="diy-popup-container">
             <div class="popup-item">
@@ -334,7 +339,7 @@ export default {
       fixedRoute.bindPopup(html, {
         className: "carPopup",
         offsetX: 280,
-        offsetY: 100,
+        offsetY: 200,
         // closeButton: false,
       });
     },

vue.config.js

@@ -19,7 +19,8 @@ module.exports = {
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
   // publicPath: process.env.NODE_ENV === "production" ? "/demo/yunkunPc" : "/",
-  publicPath: process.env.NODE_ENV === "production" ? "/yunkunPc" : "/",
+  // publicPath: process.env.NODE_ENV === "production" ? "/yunkunPc" : "/",
+  publicPath: process.env.NODE_ENV === "production" ? "/yunkunPc-big" : "/",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和 baseUrl 的生产环境路径一致）（默认dist）
   outputDir: "dist",
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）