解决setInterval导致的无感token获取异步问题，首页测试完毕

.env.development

@@ -7,7 +7,7 @@ ENV = 'development'
 # 云坤地图/开发环境
 # VUE_APP_BASE_API = 'http://192.168.0.91/gps-web/api'
 # VUE_APP_BASE_API = 'http://39.101.188.84:9066'
-VUE_APP_BASE_API = 'http://192.168.0.77:9066'
+VUE_APP_BASE_API = ''
 VUE_APP_BASE_API_YUNKUN = 'http://192.168.0.91/gps-web/api'
 
 # 路由懒加载

src/api/yunkun/yunkun.js

@@ -23,7 +23,7 @@ export function getCarList(query) {
 //车辆点位查询
 
 export function getCarPoint(query) {
-  query.sessionId = sessionId;
+  query.sessionId = localStorage.getItem("SESSION_ID"); //无感获取sessionID是异步的，与setInterval使用防止没有取到或者不是最新的
   return request({
     url: "/get_gps_r.jsp",
     method: "GET",

src/views/car.vue

@@ -137,6 +137,8 @@ export default {
     clearInterval(this.timer);
     // 在组件销毁之前移除事件监听，防止内存泄漏
     document.removeEventListener("click", this.handleClickOutside);
+    this.mapLayer.car.remove();
+    this.mapLayer.car = null;
   },
 
   mounted() {
@@ -301,10 +303,10 @@ export default {
       // 定时更新动态位置（setInterval为演示）
       this.changePosition(0);
       const interval = 15;
-      this.changePosition(interval);
-      this.time = setInterval(() => {
-        this.changePosition(interval);
-      }, interval * 1000);
+      // this.changePosition(interval);
+      // this.time = setInterval(() => {
+      //   this.changePosition(interval);
+      // }, interval * 1000);
     },
 
     async changePosition(interval) {

src/views/carInfo.vue

@@ -17,9 +17,9 @@
       <i class="el-icon-back"></i> 返回
     </div>
     <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
-    <div class="video-list">
+    <!--  <div class="video-list">
       <grids></grids>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -32,9 +32,6 @@ export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
-      carInfo: {
-        videos: { vs: [] },
-      },
       mileData: {
         mile: "", //已经行驶多少里程
       },
@@ -87,7 +84,10 @@ export default {
     };
   },
   components: { MarsMap, grids },
-  beforeDestroy() {},
+  beforeDestroy() {
+    this.mapLayer.car.remove();
+    this.mapLayer.car = null;
+  },
   created() {
     const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
     this.queryParams = {
@@ -111,8 +111,8 @@ export default {
       this.mapLayer.car = new mars3d.layer.GraphicLayer();
       this.map.addLayer(this.mapLayer.car);
 
-      // this.createLine();
-      // this.createCar();
+      this.createLine();
+      this.createCar();
     },
     /**
      * 加载姑苏区三维图层
@@ -184,7 +184,7 @@ export default {
     },
 
     //创建实时车辆漫游
-    async createCar() {
+    createCar() {
       const car = new mars3d.graphic.FixedRoute({
         id: this.queryParams.carId,
         name: "漫游对象",
@@ -231,9 +231,9 @@ export default {
 
       const interval = 15;
       this.changePosition(interval);
-      this.time = setInterval(() => {
-        this.changePosition(interval);
-      }, interval * 1000);
+      // this.time = setInterval(() => {
+      //   this.changePosition(interval);
+      // }, interval * 1000);
     },
     async changePosition(interval) {
       let list = await this.carPoint();

src/views/index.vue

@@ -22,7 +22,7 @@
 <script>
 import MarsMap from "@/components/mars-map";
 import { getAreaData } from "@/api/yunkun/index.js";
-import { circle } from "leaflet";
+
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
@@ -201,7 +201,7 @@ export default {
       for (let i = 0; i < arr.length; i++) {
         const item = arr[i];
         const index = i + 1;
-        console.log(item);
+
         const polygonEntity = new mars3d.graphic.PolygonEntity({
           id: index,
           positions: item.positions,
@@ -252,6 +252,7 @@ export default {
     },
     addMarker(lng, lat, name, id) {
       let areaItem = this.list.filter((item) => item.area == name);
+      console.log(areaItem);
       if (areaItem.length <= 0) return;
       // 水波动态效果
       const circleGraphic = new mars3d.graphic.CircleEntity({
@@ -275,25 +276,25 @@ export default {
                   <div class="row-item">
                   <div class="lable-value">
                     <div class="lable-data">线路总数</div>
-                    <div class="value-data">${areaItem[0].lineNum} <span>条</span></div>
+                    <div class="value-data">${areaItem[0].lineTotalNum} <span>条</span></div>
                     </div>
                     </div>
                      <div class="row-item">
                   <div class="lable-value">
                      <div class="lable-data">营业网点</div>
-                     <div class="value-data">${areaItem[0].yywdzs} <span>个</span></div>
+                     <div class="value-data">${areaItem[0].outletsTotalNum} <span>个</span></div>
                     </div>
                      </div>
                       <div class="row-item">
                   <div class="lable-value">
                      <div class="lable-data">上门收款点</div>
-                     <div class="value-data">${areaItem[0].skdNum} <span>个</span></div>
+                     <div class="value-data">${areaItem[0].paymentPointNum} <span>个</span></div>
                     </div>
                       </div>
                        <div class="row-item">
                   <div class="lable-value">
                      <div class="lable-data">ATM机</div>
-                <div class="value-data">${areaItem[0].atmNum} <span>台</span></div>
+                <div class="value-data">${areaItem[0].atmTotalNum} <span>台</span></div>
                     </div>
                     </div>
                   </div>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://192.168.0.77:9066`,
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",