修正部分文字错误，创建pathMap组件用来在mapbox播放历史轨迹

login/vue.config.js

@@ -6,14 +6,15 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']
 const proxy = {
   '/sso': {
-    target: 'http://10.100.1.59:9000', //线上
+    target: 'http://10.102.1.182:9000',
   },
   '/design': {
-    target: 'http://10.100.1.59:9000', //线上
+    target: 'http://10.102.1.182:9000',
   },
   '/cdn': {
     target: 'http://127.0.0.1:3000',
   },
+
 }
 
 module.exports = {

wj-data-vision/vue.config.js

@@ -6,24 +6,25 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']
 const proxy = {
   '/sso': {
-    target: 'http://10.102.1.182:9000',
+    target: 'http://10.102.1.181:9000',
   },
   '/holo': {
-    target: 'http://10.102.1.182:9000',
+    target: 'http://10.102.1.181:9000',
+  },
+  '/web': {
+    target: 'http://10.102.1.181:9000',
   },
   '/design': {
-    target: 'http://10.102.1.182:9000',
+    target: 'http://10.102.1.181:9000',
   },
-  '/web': {
-    target: 'http://10.102.1.182:9000',
-    // target: 'http://10.100.4.14:32001',
+  '/develop': {
+    target: 'http://10.102.1.181:9000',
   },
   '/cdn': {
     target: 'http://127.0.0.1:3000',
   },
   '/opt': {
-    target: 'http://106.120.201.126:14724',
-    // target: 'http://10.100.4.14:32001',
+    target: 'http://10.102.1.181:9000',
   },
 }
 

wj-manage-web/public/index.html

@@ -49,6 +49,7 @@
 <script src='/cdn/libs/mapUtil/mapUtilsV3.js' type="text/javascript"></script>
 <script src="/cdn/libs/Cesium/Cesium.js" type="text/javascript"></script>
 <script src='/cdn/libs/reconnectingWebsocket/reconnectingWs.js' type="text/javascript"></script>
+<!--<script src='/cdn/libs/vue-echarts/vue-echarts.js' type="text/javascript"></script>-->
 <script src="./utils/CesiumPopup.js"></script>
 <script src="/design/systemsetting/systemParam/getValueByKey?key=61283C05C4154AA9A57BD9005ABA1BCD" type="application/x-javascript"></script>
 <!--<script src="./config.js"></script>-->

wj-manage-web/src/components/Standard/map/pathMap.vue

+<template>
+    <div class="map_main">
+        <div :id="mapId" style="height: 100%"></div>
+    </div>
+</template>
+
+<script>
+import {Scene} from "@antv/l7";
+import {Mapbox} from "@antv/l7-maps";
+
+let map, scene;
+let vehicleModel = null, lastFrame = []
+// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
+export default {
+  name: "wMap",
+  props: ["mapId", 'fullTrack'],
+  components: {},
+  data() {
+    return {
+      dillPath: []
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    // 取到数据 fullTrack  开始渲染
+    render() {
+      this.dillPath = JSON.parse(JSON.stringify(this.fullTrack))
+      this.renderPath(true)
+    },
+    initMap() {
+      map = new mapboxgl.Map({
+        container: this.mapId,
+        style: map_config.MAP_STYLE,
+        center: map_config.MAP_CENTER,
+        zoom: map_config.MAP_ZOOM,
+        maxZoom: map_config.MAX_ZOOM,
+        pitch: map_config.MAP_PITCH,
+      })
+      scene = new Scene({
+        logoVisible: false,
+        id: this.mapId,
+        map: new Mapbox({
+          mapInstance: map,
+        }),
+      });
+      map.on('style.load', () => {
+        map.addLayer({
+          id: 'vehicle3D',
+          type: 'custom',
+          renderingMode: '3d',
+          onAdd: (map, mbxContext) => {
+            window.tb = new Threebox(map, mbxContext, {
+              defaultLights: true,
+              enableSelectingObjects: false,
+            })
+            window.tb.loadObj(
+              {
+                obj: `gltf/car0.gltf`,
+                type: 'gltf',
+                units: 'meters',
+                scale: 0.7,
+                adjustment: {x: 0.5, y: 1, z: -0.6},
+                cloned: true,
+              },
+              (model) => {
+                vehicleModel = model
+              }
+            )
+          },
+          render: function (gl, matrix) {
+            window.tb.update()
+          },
+        })
+      })
+      return [map, scene];
+    },
+    renderPath(begin) {
+      if (this.dillPath.length) {
+        let allData = this.diff(lastFrame, this.dillPath[0])
+        lastFrame = this.dillPath[0]
+        let timeDiff = 0
+        if (!begin) {
+          timeDiff = new Date(this.dillPath[0][0].dateTime).getTime() - new Date(lastFrame[0].dateTime).getTime()
+        }
+        this.addDelUpdateVehicleModels(allData, timeDiff)
+        this.dillPath.shift()
+        if (!this.dillPath.length) {
+          this.dillPath = JSON.parse(JSON.stringify(this.fullTrack))
+        }
+        setTimeout(() => {
+          this.renderPath(false)
+        }, timeDiff)
+      }
+    },
+
+    setModel(model, options, timeDiff) {
+      if (timeDiff === 0) {
+        model.setCoords([options.longitude, options.latitude])
+      } else {
+        let timeDiffInterval = timeDiff / 4
+        let midPoint = turf.midpoint([model.userData.data.longitude, model.userData.data.latitude], [options.longitude, options.latitude])
+        let midBePoint = turf.midpoint([model.userData.data.longitude, model.userData.data.latitude], midPoint.geometry.coordinates)
+        let midAfPoint = turf.midpoint(midPoint.geometry.coordinates, [options.longitude, options.latitude])
+        setTimeout(() => {
+          model.setCoords(midBePoint.geometry.coordinates)
+        }, timeDiffInterval)
+        setTimeout(() => {
+          model.setCoords(midPoint.geometry.coordinates)
+        }, timeDiffInterval * 2)
+        setTimeout(() => {
+          model.setCoords(midAfPoint.geometry.coordinates)
+        }, timeDiffInterval * 3)
+        setTimeout(() => {
+          model.setCoords([options.longitude, options.latitude])
+        }, timeDiffInterval * 4)
+      }
+      model.userData.data = options
+      model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0})
+    },
+
+    addDelUpdateVehicleModels(allData, timeDiff) {
+      for (let item of allData) {
+        // 新增
+        if (item.dill === 'add') {
+          let model = vehicleModel.duplicate()
+          model.setCoords([item.longitude, item.latitude])
+          model.userData.data = item
+          model.setRotation({x: 90, y: 360 - item.courseAngle - 90, z: 0})
+          window.tb.add(model, item.id)
+        }
+        if (item.dill === 'del') {
+          window.tb.clear(item.id, true)
+        }
+        if (item.dill === 'com') {
+          for (let model of window.tb.world.children) {
+            if (model.userData.data?.id === item.id) {
+              this.setModel(model, item, timeDiff)
+            }
+          }
+        }
+      }
+    },
+
+    diff(oldData, newData) {
+      const add = newData.filter((e) => !oldData.find((c) => c.id === e.id))
+      const del = oldData.filter((e) => !newData.find((c) => c.id === e.id))
+      const com = newData.filter((e) => oldData.find((c) => c.id === e.id))
+      add.forEach((a) => (a.dill = 'add'))
+      del.forEach((d) => (d.dill = 'del'))
+      com.forEach((c) => (c.dill = 'com'))
+      return [...add, ...del, ...com]
+    },
+    destroyMap() {
+      scene?.destroy()
+      scene = null;
+      map = null;
+    }
+  },
+  computed: {},
+  beforeDestroy() {
+    window.tb.dispose();
+    scene = null
+    map = null
+  },
+};
+</script>
+
+<style scoped>
+.map_main {
+    height: 100%;
+    position: relative;
+}
+</style>
+<style>
+.mapboxgl-ctrl-attrib {
+    display: none;
+}
+</style>

wj-manage-web/src/views/track/index.vue

 <template>
-    <div class="track_parent" element-loading-text="获取数据中，请稍后..."
+    <div class="track_parent" element-loading-text="获取数据中，请稍候..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="fullscreenLoading">
         <div class="bottom-shadow shadow"></div>
@@ -319,7 +319,7 @@ export default {
     playFullTrackWithVideo(data, video) {
       let cars = data
 
-      this.videoURL = 'http://10.102.1.180:80/live?app=demo&stream=mp4-133';
+      this.videoURL =video;
       this.$refs.cameraVideo.initPlayer()
       this.playMultiVehicle(cars)
       // 劳动西路

wj-manage-web/src/views/track/menuTrafficCrowd.vue

 <template>
-  <div element-loading-text="获取数据中，请稍后..."
+  <div element-loading-text="获取数据中，请稍候..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="fullscreenLoading" class="track_tree"
        :class="[show?'l_show':'l_hidden']">

wj-manage-web/src/views/track/menuTrafficEvent.vue

 <template>
-    <div class="track_tree" element-loading-text="获取数据中，请稍后..."
+    <div class="track_tree" element-loading-text="获取数据中，请稍候..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="fullscreenLoading"
          :class="[show?'l_show':'l_hidden']">
@@ -318,6 +318,8 @@ export default {
       }), getEventVideo({
         channel: rowData.deviceCamera.monitorChannel,
         subtype: 1,
+        // starttime: rowData.startTime,
+        // endtime: rowData.endTime
         starttime: rowData.startTime,
         endtime: rowData.endTime
         // starttime: rowData.startTime,

wj-manage-web/vue.config.js

@@ -6,25 +6,29 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']
 const proxy = {
   '/sso': {
-    target: 'http://10.100.1.59:9000',
+    target: 'http://10.102.1.182:9000',
   },
   '/holo': {
-    target: 'http://10.100.1.59:9000',
+    target: 'http://10.102.1.182:9000',
+  },
+  '/web': {
+    target: 'http://10.102.1.182:9000',
   },
   '/design': {
-    target: 'http://10.100.1.59:9000',
+    target: 'http://10.102.1.182:9000',
   },
-  '/web': {
-    target: 'http://10.100.1.59:32001',
-    // target: 'http://10.100.4.14:32001',
+  '/develop': {
+    target: 'http://10.102.1.182:9000',
+  },
+  '/opt': {
+    target: 'http://10.102.1.182:9000',
+  },
+  '/nvr': {
+    target: 'http://10.102.1.182:9000',
   },
   '/cdn': {
     target: 'http://127.0.0.1:3000',
   },
-  '/opt': {
-    target: 'http://106.120.201.126:14724',
-    // target: 'http://10.100.4.14:32001',
-  },
 }
 
 module.exports = {
@@ -40,6 +44,7 @@ module.exports = {
     },
     proxy,
   },
+
   css: {
     loaderOptions: {
       postcss: {
@@ -56,7 +61,8 @@ module.exports = {
             minPixelValue: 1, //设置最小的转换数值
             mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
             replace: true, //是否直接更换属性值，而不添加备用属性
-            exclude: [/node_modules/], //忽略某些文件夹下的文件
+            // exclude: [/node_modules/], //忽略某些文件夹下的文件
+            exclude: [], //忽略某些文件夹下的文件
           }),
         ],
       },