修改

src/components/mars3d/Map.vue

@@ -9,7 +9,7 @@
 <script>
 import Vue from 'vue'
 import { httpGet, httpPostForJson } from "@/common/httpBean.js";
-import { screenMapSetUpQuery,carRealTimeLocationQuery2} from "@/axios/api.js";
+import { screenMapSetUpQuery,carRealTimeLocationQuery2,vehicleInformationQuery} from "@/axios/api.js";
 
 // 使用免费开源版本
 import 'mars3d/dist/mars3d.css'
@@ -17,11 +17,6 @@ import * as mars3d from 'mars3d'
 import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
 import  { initGraphicManager,initLayerManager,bindLayerContextMenu,bindLayerPopup } from './js/graphicManager'
 
-
-// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
-// echarts插件
-// import 'mars3d-echarts'
-
 // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
 Vue.prototype.mars3d = mars3d
 Vue.prototype.Cesium = mars3d.Cesium
@@ -42,6 +37,11 @@ export default {
       areaColorData:[],
       carNumber:'',
       shebeiName:'',
+      allCarInforData:[],
+      defaultjd:117.12111,
+      defaultwd:36.679,
+      realjd:117.12111,
+      realwd:36.679,
     }
   },
 
@@ -87,7 +87,13 @@ export default {
     getCarInforFn(carnumber,equipmentName){
       this.carNumber = carnumber;
       this.shebeiName = equipmentName;
+      httpGet(vehicleInformationQuery,{size:9999}).then((res) => {
+        if(res.code == 200){
+          this.allCarInforData = res.data.content;
           this.getCoordinate();
+        }
+      });
+      
     },
     //后台获取数据
     getCoordinate() {
@@ -146,17 +152,19 @@ export default {
       this[`map${this.mapKey}`] = map
       
       //围栏回显
-      that.zuobianData.forEach(function(item,index){
-        var graphicLayer = new mars3d.layer.GraphicLayer();
-        map.addLayer(graphicLayer);
-        initLayerManager(graphicLayer,that.weilanName[index]);
-        that.addGraphic_01(graphicLayer,item,that.weilanName[index],that.areaColorData[index]);
-      })
-
-      //实时位置
+      // that.zuobianData.forEach(function(item,index){
+      //   var graphicLayer = new mars3d.layer.GraphicLayer();
+      //   map.addLayer(graphicLayer);
+      //   initLayerManager(graphicLayer,that.weilanName[index]);
+      //   that.addGraphic_01(graphicLayer,item,that.weilanName[index],that.areaColorData[index]);
+      // })
+
+      //实时位置1
+      that.allCarInforData.forEach((item,index)=>{
         var graphicLayer4 = new mars3d.layer.GraphicLayer();
         map.addLayer(graphicLayer4);
-      that.addDemoGraphics(graphicLayer4);
+        that.addDemoGraphics(graphicLayer4,item.number,item.equipmentName,item.carclass);
+      })
       
       // 抛出事件
       this.$emit('onload', map)
@@ -183,12 +191,14 @@ export default {
         });
         graphicLayer.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
     },
-    //实时位置
-    addDemoGraphics(graphicLayer4) {
+    //实时位置1
+    addDemoGraphics(graphicLayer4,number,equipmentName,carclass) {
       let that = this;
+
+      //模型配置
       const graphic = new mars3d.graphic.ModelPrimitive({
         style: {
-          url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb",
+          url: carclass == '电铲' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
           scale: 0.1,
           minimumPixelSize: 50,
           // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
@@ -200,7 +210,7 @@ export default {
           },
           label: {
             // 不需要文字时，去掉label配置即可
-            text: that.carNumber,
+            text: number,
             font_size: 22,
             color: "#ff0000",
             outline: true,
@@ -212,57 +222,32 @@ export default {
           }
         },
       })
+
+      //载入图层
       graphicLayer4.addGraphic(graphic)
-      // 设置动态位置
+      //初始位置
       graphicLayer4.eachGraphic((graphic) => {
-        graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(117.12111, 36.679, 500)) // 首次出现的位置
+        graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(that.defaultjd, that.defaultwd, 500))
       })
+      //五秒后位置
       graphicLayer4.eachGraphic((graphic) => {
-        graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(117.12111, 36.679, 500), 5) // 按5秒运动至指定位置
+        graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(that.defaultjd, that.defaultwd, 500), 5)
       })
-
-      // 定时更新动态位置（setInterval为演示）
+      //定时更新动态位置
       setInterval(() => {
-        httpGet(carRealTimeLocationQuery2,{name:that.shebeiName}).then((res) => {
+        httpGet(carRealTimeLocationQuery2,{name:equipmentName}).then((res) => {
           if(res.data){
-            let jd = res.data.lon;
-            let wd = res.data.lat;
             graphicLayer4.eachGraphic((graphic) => {
-              graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(jd, wd, 500), 5)
+              graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(res.data.lon, res.data.lat, 500), 5)
             })
           }else{
-            let jd = 0;
-            let wd = 0;
             graphicLayer4.eachGraphic((graphic) => {
-              graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(jd, wd, 500), 5)
+              graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(that.defaultjd, that.defaultwd, 500), 5)
             })
           }
         });
+      }, 4000)
       
-      }, 5000)
-    },
-    // 取区域内的随机点
-    randomPoint() {
-      const jd = this.random(117.130666 * 1000, 117.130241 * 1000) / 1000
-      const wd = this.random(36.655207 * 1000, 36.665207 * 1000) / 1000
-      console.log("jd",jd);
-      console.log("wd",wd);
-      console.log(Cesium.Cartesian3.fromDegrees(jd, wd, 500));
-      return Cesium.Cartesian3.fromDegrees(jd, wd, 500)
-    },
-    random(min, max) {
-      return Math.floor(Math.random() * (max - min + 1) + min)
-    },
-    getSampledPositionProperty(points){
-      let property = new Cesium.SampledPositionProperty();
-      let start = this.map.clock.currentTime;
-      let positions = mars3d.LatLngArray.toCartesians(points);
-      for (let i = 0; i < positions.length; i++) {
-        let time = Cesium.JulianDate.addSeconds(start, i * 20, new Cesium.JulianDate());
-        let position = positions[i];
-        property.addSample(time, position);
-      }
-      return property;
     },
 
   }