车辆轮询

public/index.html

@@ -37,8 +37,8 @@
       type="text/javascript"
     ></script>
 
-    <script src="./lib/localforage.js" type="text/javascript"></script>
+    <!-- <script src="./lib/localforage.js" type="text/javascript"></script>
-    <script src="./lib/CesiumNetworkPlug.js" type="text/javascript"></script>
+    <script src="./lib/CesiumNetworkPlug.js" type="text/javascript"></script> -->
 
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11

src/api/yunkun/yunkun.js

@@ -1,6 +1,5 @@
 import request from "@/utils/request-yunkun.js";
 const sessionId = localStorage.getItem("SESSION_ID");
-
 // 登录
 export function lgoin(query) {
   return request({
@@ -20,3 +19,14 @@ export function getCarList(query) {
     params: query,
   });
 }
+
+//车辆点位查询
+
+export function getCarPoint(query) {
+  query.sessionId = sessionId;
+  return request({
+    url: "/get_gps_r.jsp",
+    method: "GET",
+    params: query,
+  });
+}

src/views/car.vue

@@ -40,22 +40,29 @@
 </template>
 
 <script>
-import carJSON from "@/api/carrRealtimeLocation.json";
 import MarsMap from "@/components/mars-map";
 // import grids from "@/components/grids.vue";
-import { lgoin, getCarList } from "@/api/yunkun/yunkun.js";
+import { getCarPoint } from "@/api/yunkun/yunkun.js";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
+      list: [],
       multipleList: ["营运线路", "维护线路", "临时任务"],
       selectedItems: [],
       graphicLayer: null,
       baseUrl: basePathUrl + "lib/geoJson/tileset.json",
-      carUrl: basePathUrl + "lib/car.gltf",
+      carUrl: basePathUrl + "lib/qiche.gltf",
       map: null,
       options: {
         scene: {
+          // center: {
+          //   lat: 31.754913,
+          //   lng: 117.248572,
+          //   alt: 6220,
+          //   heading: 357,
+          //   pitch: -31,
+          // },
           center: {
             lat: 31.212805,
             lng: 120.607156,
@@ -63,24 +70,35 @@ export default {
             heading: 357.9,
             pitch: -31.5,
           },
+          fog: false,
+          fxaa: false,
+          removeDblClick: true,
+          requestRenderMode: false,
+          scene3DOnly: false,
+          sceneMode: 3,
+          shadows: false,
+          showMoon: false,
+          showSkyAtmosphere: false,
+          showSkyBox: false,
+          showSun: false,
         },
 
         control: {
           contextmenu: { preventDefault: false, hasDefault: false },
         },
         basemaps: [
-          {
+          // {
-            name: "mapbox影像图",
+          //   name: "mapbox影像图",
-            icon: "img/basemaps/mapboxSatellite.png",
+          //   icon: "img/basemaps/mapboxSatellite.png",
-            type: "mapbox",
+          //   type: "mapbox",
-            username: "sharealex",
+          //   username: "sharealex",
-            styleId: "cly5i21fn00e901prgq643t4r",
+          //   styleId: "cly5i21fn00e901prgq643t4r",
-            token:
+          //   token:
-              "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
+          //     "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
-            tilesize: 256,
+          //   tilesize: 256,
-            scaleFactor: false,
+          //   scaleFactor: false,
-            show: true,
+          //   show: false,
-          },
+          // },
         ],
       },
       show: false,
@@ -96,60 +114,42 @@ export default {
   mounted() {
     // 在mounted钩子中添加全局点击事件监听
     document.addEventListener("click", this.handleClickOutside);
-
-    this.getCarList();
   },
   methods: {
-    async getCarList() {
+    async getCarPoint() {
-      let res = await getCarList();
+      this.list = await this.carPoint();
-      // console.log(res, "ss");
+      this.createCar();
     },
 
-    async getlogin() {
+    async carPoint() {
-      const data = {
+      let res = await getCarPoint({
-        userId: "99999",
+        // carIds: "23,78",
-        password: "6d0fd76ab81325588d8065ec1036fdd3",
+      });
-        loginType: "user",
+      res.list = res.list.filter(
-      };
+        (item) =>
-      let res = await lgoin();
+          item.carPlate.includes("苏E") ||
-      console.log(res, "登录数据");
+          (item.carPlate.includes("苏U") && item.stateCn.includes("在线-行驶"))
-    },
+      );
-
+      return res.list.slice(0, 100);
-    // 获取车辆信息
-    getCarLocation() {
-      this.createCar(carJSON.list);
     },
 
     /**
      * 创建车辆图标
      */
-    createCar(list) {
+    createCar() {
-      let _this = this;
+      this.graphicLayer.clear();
-      list.map((item, index) => {
+      this.graphicLayer.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
+      // 设置动态位置
+      for (let i = 0; i < this.list.length; i++) {
+        let item = this.list[i];
         const graphic = new mars3d.graphic.ModelPrimitive({
-          id: `car${item.carId}`,
+          id: item.carId,
-          position: [parseFloat(item.lng), parseFloat(item.lat)],
           style: {
-            heading: parseInt(item.drct),
+            // heading: parseInt(item.drct),
-            //url: _this.carUrl,
+            url: this.carUrl,
-            url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
+            scale: 3,
-            scale: 1,
+            minimumPixelSize: 20,
-            minimumPixelSize: 40,
-            silhouette: true,
-            silhouetteColor: "#025CC1",
-            silhouetteSize: 2,
-            // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
-            highlight: {
-              type: mars3d.EventType.click,
-              silhouette: true,
-              silhouetteColor: "#FAAC51",
-              silhouetteSize: 2,
-              label: {
-                outlineColor: "#FAAC51",
-              },
-            },
             label: {
-              // 不需要文字时，去掉label配置即可
               text: item.carName,
               font_size: 14,
               color: "#ffffff",
@@ -160,68 +160,66 @@ export default {
               distanceDisplayCondition_far: 50000,
               distanceDisplayCondition_near: 0,
             },
-            clampToGround: true,
           },
-          // forwardExtrapolationType: Cesium.ExtrapolationType.NONE,
+          // frameRateHeight: 30, // 控制贴模型的效率，多少帧计算一次
-          attr: { index: index, remark: "Model示例" },
         });
-
-        graphic.on(mars3d.EventType.click, function (e) {
-          _this.$router.push({ path: "/carInfo" });
-        });
-
         this.graphicLayer.addGraphic(graphic);
-      });
+        this.graphicLayer.enabledEvent = true; // 恢复事件
+        //   graphic.bindHighlight({
+        //   type: mars3d.EventType.click,
+        //   silhouette: true,
+        //   silhouetteColor: "#FAAC51",
+        //   silhouetteSize: 2,
+        //   label: {
+        //     outlineColor: "#FAAC51",
+        //   },
+        // });
+        // graphic.on(mars3d.EventType.click, function (e) {
+        //   _this.$router.push({ path: "/carInfo" });
+        // });
+      }
+      this.changePosition(0);
+      // 定时更新动态位置（setInterval为演示）
+      const interval = 10;
+      this.changePosition(interval);
+      this.time = setInterval(() => {
+        this.changePosition(interval);
+      }, interval * 1000);
     },
 
-    /**
+    // 改变位置
-     * 生成车辆实时点位
+    async changePosition(interval) {
-     */
+      let list = await this.carPoint();
-    // createCar(list) {
+      this.graphicLayer.eachGraphic((graphic) => {
-    //   let _this = this;
+        for (let i = 0; i < list.length; i++) {
-    //   console.log(list);
+          let item = list[i];
-    //   for (let i = 0; i < list.length; i++) {
+          if (graphic.id == item.carId) {
-    //     let item = list[i];
+            // graphic.setOptions({
-
+            //   style: {
-    //     const graphic = new mars3d.graphic.DivGraphic({
+            //     heading: parseInt(item.drct),
-    //       id: "car" + i,
+            //   },
-    //       position: [parseFloat(item.lng), parseFloat(item.lat)],
+            // });
-    //       style: {
+            let position = Cesium.Cartesian3.fromDegrees(
-    //         className: `carIcon`,
+              parseFloat(item.lng),
-    //         html: `<div>
+              parseFloat(item.lat),
-    //             <div class="car-name">${item.carName}</div>
+              30
-    //           </div>`,
+            );
-    //         color: "#fff",
+            graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
-    //         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.highlightOpen, function (event) {
-    //       _this.$router.push("/carInfo");
-    //     });
-
-    //     this.graphicLayer.addGraphic(graphic);
-    //   }
 
-    //   // this.changePosition(0);
+    // 取区域内的随机点
+    randomPoint() {
+      const jd = this.random(117.207666 * 1000, 117.287241 * 1000) / 1000;
+      const wd = this.random(31.817099 * 1000, 31.876848 * 1000) / 1000;
+      return Cesium.Cartesian3.fromDegrees(jd, wd, 30);
+    },
 
-    //   // 定时更新动态位置（setInterval为演示）
+    random(min, max) {
-    //   // const interval = 30;
+      return Math.floor(Math.random() * (max - min + 1) + min);
-    //   // this.changePosition(interval);
+    },
-    //   // this.timer = setInterval(() => {
-    //   //   _this.changePosition(interval);
-    //   // }, interval * 1000);
-    // },
 
     handleClickOutside(event) {
       // 判断点击的元素是否在目标元素外部
@@ -248,27 +246,8 @@ export default {
       this.map = map;
       this.graphicLayer = new mars3d.layer.GraphicLayer();
       map.addLayer(this.graphicLayer);
-      this.initTilesetLayer();
+      // this.initTilesetLayer();
-    },
+      // this.getCarPoint();
-
-    // 改变位置
-    changePosition(time) {
-      let _this = this;
-      this.graphicLayer.eachGraphic((graphic) => {
-        if (graphic.isPrivate) {
-          return;
-        }
-        graphic.addDynamicPosition(_this.randomPoint(), time); // 按time秒运动至指定位置
-      });
-    },
-    // 取区域内的随机点
-    randomPoint() {
-      const jd = this.random(120.5265 * 1000, 120.7177 * 1000) / 1000;
-      const wd = this.random(31.2783 * 1000, 31.4647 * 1000) / 1000;
-      return Cesium.Cartesian3.fromDegrees(jd, wd);
-    },
-    random(min, max) {
-      return Math.floor(Math.random() * (max - min + 1) + min);
     },
 
     /**