1

src/axios/api.js

@@ -13,6 +13,7 @@ export const screenMapSetUpQuery = '/Weilan/list'; //获取区域围栏范围信
 export const manualSchedulingQuery = '/api/Manmade'; //获取人工调度信息
 export const vehicleInformationQuery = '/api/CarPeop'; //获取车辆信息
 export const vehicleInformationUpdate = '/api/CarPeop'; //修改车辆信息
+export const apiCarClassQuery = '/api/CarClass'; //获取车辆类型
 export const vehicleRealTimeQuery = '/api/CarReal'; //获取车辆信息实时数据
 export const vehicleRealTimeQuery2 = '/api/CarPeop/realtime'; //获取车辆信息实时数据
 export const personalCenterInforQuery = '/api/Drivers'; //获取个人信息

src/components/mars3d/Map.vue

@@ -9,13 +9,14 @@
 <script>
 import Vue from 'vue'
 import { httpGet, httpPostForJson } from "@/common/httpBean.js";
-import { screenMapSetUpQuery,carRealTimeLocationQuery2,vehicleInformationQuery} from "@/axios/api.js";
+import { screenMapSetUpQuery,carRealTimeLocationQuery2,vehicleInformationQuery,apiCarClassQuery} from "@/axios/api.js";
 
 // 使用免费开源版本
 import 'mars3d/dist/mars3d.css'
 import * as mars3d from 'mars3d'
 import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
 import  { initGraphicManager,initLayerManager,bindLayerContextMenu,bindLayerPopup } from './js/graphicManager'
+import ddd from '../../assets/images/truckTuPian/qiche1.png'
 
 // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
 Vue.prototype.mars3d = mars3d
@@ -91,12 +92,37 @@ export default {
     getCarInforFn(carnumber,equipmentName){
       this.carNumber = carnumber;
       this.shebeiName = equipmentName;
-      httpGet(vehicleInformationQuery,{size:9999}).then((res) => {
+
+      // httpGet(vehicleInformationQuery,{size:9999}).then((res) => {
+      //   if(res.code == 200){
+      //     this.allCarInforData = res.data.content;
+      //     this.getCoordinate();
+      //   }
+      // });
+
+      //获取车辆类型
+      httpGet(apiCarClassQuery,{size:9999}).then((res) => {
+        if(res.code == 200){
+          let arr11 = [];
+          //获取车辆信息
+          httpGet(vehicleInformationQuery,{size:9999}).then((res1) => {
             if(res.code == 200){
-          this.allCarInforData = res.data.content;
+              res1.data.content.forEach((item1,index1)=>{
+                let obj1 = {...item1};
+                res.data.content.forEach((item,index)=>{
+                  if(item1.carclass == item.name){
+                    obj1.pic = item.card;
+                    arr11.push(obj1);
+                    return;
+                  }
+                })
+              })
+              this.allCarInforData = arr11;
               this.getCoordinate();
             }
           });
+        }
+      });
       
     },
     //后台获取数据
@@ -168,7 +194,7 @@ export default {
         var graphicLayer4 = new mars3d.layer.GraphicLayer();
         map.addLayer(graphicLayer4);
         that.bindLayerPopup(graphicLayer4,item.number)
-        that.addDemoGraphics(graphicLayer4,item.number,item.equipmentName,item.carclass);
+        that.addDemoGraphics(graphicLayer4,item.number,item.equipmentName,item.carclass,item.pic);
       })
       
       // 抛出事件
@@ -198,17 +224,46 @@ export default {
         graphicLayer.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
     },
     //实时位置1
-    addDemoGraphics(graphicLayer4,number,equipmentName,carclass) {
+    addDemoGraphics(graphicLayer4,number,equipmentName,carclass,pic) {
       let that = this;
 
       //模型配置
-      const graphic = new mars3d.graphic.ModelPrimitive({
+      // const graphic = new mars3d.graphic.ModelPrimitive({
+      //   style: {
+      //     //url: carclass == '铲车' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/imap/1d4f63111fc9499dac5cee2286ad7bb3/gltf/gltf2.gltf',
+      //     url: carclass == '铲车' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
+      //     scale: 2,
+      //     minimumPixelSize: 50,
+      //     // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
+      //     highlight: {
+      //       type: mars3d.EventType.click,
+      //       silhouette: true,
+      //       silhouetteColor: "#ff0000",
+      //       silhouetteSize: 4
+      //     },
+      //     label: {
+      //       // 不需要文字时，去掉label配置即可
+      //       text: carclass == '铲车' ? number + '\n🏗' : number + '\n🚚',
+      //       font_size: 22,
+      //       color: "#ff0000",
+      //       outline: true,
+      //       outlineColor: "#000000",
+      //       pixelOffsetY: -20,
+      //       distanceDisplayCondition: true,
+      //       distanceDisplayCondition_far: 50000,
+      //       distanceDisplayCondition_near: 0
+      //     }
+      //   }
+      // })
+
+      const graphic = new mars3d.graphic.BillboardEntity({
         style: {
-          //url: carclass == '铲车' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/imap/1d4f63111fc9499dac5cee2286ad7bb3/gltf/gltf2.gltf',
-          url: carclass == '铲车' ? '//data.mars3d.cn/gltf/mars/car/wajueji.glb' : '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
-          scale: 2,
-          minimumPixelSize: 50,
-          // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
+          image: pic ? 'http://8.143.203.103:9090/avatar/' + pic : ddd,
+          width:35,
+          height:35,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1),
           highlight: {
             type: mars3d.EventType.click,
             silhouette: true,
@@ -217,17 +272,17 @@ export default {
           },
           label: {
             // 不需要文字时，去掉label配置即可
-            text: carclass == '铲车' ? number + '\n🏗' : number + '\n🚚',
+            text: number,
             font_size: 22,
-            color: "#ff0000",
+            color: "blue",
             outline: true,
             outlineColor: "#000000",
-            pixelOffsetY: -20,
+            pixelOffsetY: -50,
             distanceDisplayCondition: true,
             distanceDisplayCondition_far: 50000,
             distanceDisplayCondition_near: 0
           }
-        }
+        },
       })
 
       //载入图层