1

src/components/mars3d/Map.vue

@@ -9,7 +9,7 @@
 <script>
 import Vue from 'vue'
 import { httpGet, httpPostForJson } from "@/common/httpBean.js";
-import { screenMapSetUpQuery,carRealTimeLocationQuery2,vehicleInformationQuery,apiCarClassQuery} from "@/axios/api.js";
+import { screenMapSetUpQuery,carRealTimeLocationQuery2,vehicleInformationQuery,apiCarClassQuery,apiCpointQuery} from "@/axios/api.js";
 
 // 使用免费开源版本
 import 'mars3d/dist/mars3d.css'
@@ -17,6 +17,10 @@ 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'
+import zhuangchetubiao from '../../assets/images/truckTuPian/zhuangchedian1.png'
+import xiechetubiao from '../../assets/images/truckTuPian/xiechedian1.png'
+import kongzhidiantubiao from '../../assets/images/truckTuPian/kongzhidian1.png'
+import luzhangtubiao from '../../assets/images/truckTuPian/luzhang.png'
 
 // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
 Vue.prototype.mars3d = mars3d
@@ -26,9 +30,8 @@ var map;
 //画导航线
 var graphicLayerZ;
 var graphicZ;
-//路障展示
+//路障展示图层
 var graphicLayerR;
-var graphicR;
 
 export default {
   name: 'mars3dViewer',
@@ -115,9 +118,15 @@ export default {
               this.allCarInforData = arr11;
 
               //获取所有关键控制点信息
-              httpGet(apiCpointQuery,{size:9999}).then((res) => {
-                if(res.code == 200){
-                  this.mapControlPointData = res.data.content;
+              httpGet(apiCpointQuery,{size:9999}).then((res2) => {
+                if(res2.code == 200){
+                  let arr2 = [];
+                  res2.data.content.forEach((item2,index2)=>{
+                    if(item2.type != "控制点"){
+                      arr2.push(item2);
+                    }
+                  })
+                  this.mapControlPointData = arr2;
                   this.getCoordinate();
                 }
               })
@@ -200,6 +209,14 @@ export default {
         that.addDemoGraphics(graphicLayer4,item.number,item.equipmentName,item.carclass,item.pic,item.status);
       })
       
+      //装车点卸车点位置
+      that.mapControlPointData.forEach(function(item,index){
+          var graphicLayer = new mars3d.layer.GraphicLayer();
+          map.addLayer(graphicLayer);
+          that.addDemoGraphic4(graphicLayer,item);
+        })
+
+
       // 抛出事件
       this.$emit('onload', map)
     },
@@ -307,9 +324,56 @@ export default {
         graphicLayerZ.removeGraphic(graphicZ);
       }
     },
+    //装车点卸车点位置
+    addDemoGraphic4(graphicLayer,item) {
+      const graphic = new mars3d.graphic.BillboardEntity({
+        name: item.name,
+        position: [item.lon, item.lat, 1000],
+        style: {
+          image: item.type == '装车点' ? zhuangchetubiao : item.type == '卸车点' ? xiechetubiao : kongzhidiantubiao,
+          scale: 0.15,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          clampToGround: true,
+          label: { 
+            text: item.name, 
+            pixelOffsetY: -40, 
+            color: 'blue',
+            distanceDisplayCondition: true,
+            distanceDisplayCondition_far: 30000,
+            distanceDisplayCondition_near: 0
+          },
+        },
+      })
+      graphicLayer.addGraphic(graphic)
+    },
     //路障展示
     roadblockShowFn(arr){
-
+      map.removeLayer(graphicLayerR);
+      graphicLayerR = new mars3d.layer.GraphicLayer();
+      map.addLayer(graphicLayerR);
+      arr.forEach((item,index)=>{
+        const graphic = new mars3d.graphic.BillboardEntity({
+          name: item.carcode + index,
+          position: [item.lon, item.lat, 1000],
+          style: {
+            image: luzhangtubiao,
+            scale: 1,
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            clampToGround: true,
+            label: { 
+              text: "路障", 
+              pixelOffsetY: -40, 
+              color: 'yellow',
+              distanceDisplayCondition: true,
+              distanceDisplayCondition_far: 30000,
+              distanceDisplayCondition_near: 0
+            },
+          },
+        })
+        graphicLayerR.addGraphic(graphic)
+      })
     },
     // 在图层绑定Popup弹窗
     bindLayerPopup(graphicLayer,number) {

src/views/MLargeScreen/index.vue

@@ -221,9 +221,14 @@ export default {
 					}
 				}
             });
-			//获取路障信息failureDeclarationAdd
-			httpGet(failureDeclarationAdd,{fault:'路障申报',createTime:this.currentTime()}).then((res) => {
-				console.log(res);
+			//获取路障信息
+			httpGet(failureDeclarationAdd,{fault:'路障申报',createTime:this.currentTimeFn()}).then((res) => {
+				if(res.code == 200){
+					if(res.data.totalElements > this.roadblockNum){
+						this.roadblockNum = res.data.totalElements;
+						this.$refs.mars3dViewerMapMethod.roadblockShowFn(res.data.content);
+					}
+				}
 			})
 
         }, 8000)
@@ -241,7 +246,7 @@ export default {
 					this.carnumber = res.data.content[0].car;
 					this.personalName = res.data.content[0].name;
 					//展示二维地图
-					//this.$refs.mars3dViewerMapMethod.getCarInforFn(this.carnumber);
+					this.$refs.mars3dViewerMapMethod.getCarInforFn(this.carnumber);
 					//开启接受订单
 					this.$refs.startOrderReceivingMethod.loadData(this.carnumber);
 					//开启语音接收
@@ -672,7 +677,7 @@ export default {
 			this.$refs.voiceApplicationMethod.selectDeleteSituation(index);
 		},
 		//获取当前时间
-		currentTime(){
+		currentTimeFn(){
 			var date = new Date();
 			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
 			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月