Merge commit 'e83e91434742112d7100e93e6a770bdd9104d475'

src/components/map.component.vue

@@ -58,8 +58,8 @@ export default class MapComponent extends Vue {
     }
     mounted(){
         window.addEventListener("resize",this.resize)
-        document.addEventListener("mousemove", this.fixedCamera)
+        // document.addEventListener("mousemove", this.fixedCamera)
-        this.player = this.playerUtils.initPlayer(this.id);
+        this.player = this.playerUtils.initPlayer(this.id,"2423385884355");
         this.playerApi = this.player.getAPI();
 
     }

src/mock/index.ts

@@ -18,7 +18,10 @@ export class MockData{
                 id:Mock.mock("@id"),
                 name:Mock.mock("@cname"),
                 job:"安全顾问",
-                position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
+                position:turf.randomPosition([
+                    11660757, 3692398.75,
+                    11661124, 3692643.5
+                ]),
                 time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
                 tel:Mock.mock("@integer(13200000000, 13299999999)")
             })
@@ -501,7 +504,10 @@ export class MockData{
                 time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),
                 startTime : "7:00",
                 endTime : "8:00",
-                position:turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
+                position:turf.randomPosition([
+                    11660757, 3692398.75,
+                    11661124, 3692643.5
+                ]),
                 plate:plateList[i%5],
                 remark:typeList[i%3],
                 type:i%2

src/mock/layer.ts

@@ -18,23 +18,34 @@ enum COLOR{
     // 四色图-红
     RED="#FF5959"
 }
+import CloseService from "@/service/close.service";
+import ParkFileService from "@/service/park.service";
+import Vue from "vue";
+const service = new CloseService();
+const parkService = new ParkFileService()
+const glob = new Vue();
 export default [ {
     name:"电子围栏",
     ids:[] as string[],
     type:"area",
     value:"bounds",
     color:COLOR.BOUNDS,
+    init:async ()=>{
+        return await parkService.getRealBounds()
+    },
     selected:false,
     pages:["manage"]
 },{
     name:"人员定位",
     ids:[] as string[],
     type:"moveMarker",
+    init:async ()=>{
+        return await service.getPeopleList()
+    },
     value:"peo",
     url: "@path:people.png",
-    pakFilePath: "@path:DTS_Library_V5.4.pak",
     assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
-    coordinateType:1,
+    scale:[0,0,0],
     selected:false,
     pages:["home","view"]
 },{
@@ -42,14 +53,16 @@ export default [ {
     ids:[] as string[],
     type:"moveMarker",
     value:"car",
-    pakFilePath: "@path:DTS_Library_V5.4.pak",
     assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
     urls:[
         "@path:car.png",
         "@path:d-car.png",
         "@path:d-car.png",
     ],
-    coordinateType:1,
+    init:async ()=>{
+        return await service.getCarList()
+    },
+    scale:[0,0,0],
     selected:false,
     pages:["home","view"]
 }]

src/store/index.ts

@@ -17,6 +17,7 @@ export default new Vuex.Store({
     specialEnvList:[],
     dangrousList:[],
     safeGoods:[],
+    boundsData:[]
   },
   getters: {
   },
@@ -24,39 +25,14 @@ export default new Vuex.Store({
     setPeopleList(state,data){
         state.peopleList = data;
     },
-    setCompanyList(state,data){
-        state.companyList = data;
-    },
     setCarList(state,data){
         state.carList = data;
     },
     setCameraList(state,data){
         state.cameraList = data;
     },
-    upDateWaringList(state:any,data){
+    setBoundsData(state,data){
-      state.warningList = [...data,...state.warningList];
+        state.boundsData = data;
-
-    },
-    setHiddenDangrousList(state:any,data){
-        state.hiddenDangrousList = data;
-    },
-    setDangrousWorkList(state:any,data){
-        state.dangrousWorkList = data;
-    },
-    setGroundEnvList(state:any,data){
-        state.groundEnvList = data;
-    },
-    setSpecialEnvList(state:any,data){
-        state.specialEnvList = data;
-    },
-    upDateEventList(state:any,data){
-      state.eventList = [...data,...state.eventList];
-    },
-    setDangrousList(state:any,data){
-      state.dangrousList = data;
-    },
-    setSafeGoods(state:any,data){
-      state.safeGoods = data;
     },
   },
   actions: {

src/utils/player.ts

@@ -5,9 +5,10 @@ import * as acapi from '../../public/ac.min.js'
 // import acapi from 'ac.min.js'
 export default class PlayerUtils{
     public api:any;
-    public initPlayer(domId){
+    public initPlayer(domId,iid?){
         const player =  new acapi.DigitalTwinPlayer(process.env.VUE_APP_PALYER_URL,{
             domId,
+            iid,
             // reset:true,
             apiOptions:{
                 onReady: this.onReady,
@@ -52,8 +53,10 @@ export default class PlayerUtils{
     public onMouseLeave :any= null;
     public onMouseMove :any= null;
     public onMouseDown :any= null;
-    public onMouseUp :any= (data)=>{
+    public onMouseUp :any= (res)=>{
+        this.api.camera.get((data)=>{
             console.log(data)
+        })
     };;
     public onKeyDown :any= null;
     public onKeyUp :any= null;
@@ -123,12 +126,15 @@ export default class PlayerUtils{
     * @returns 经纬度 lon,lat]
     */
 
-    public getLonLat(coordinates,coordinateType?,fn?){
+    public async getLonLat(coordinates,coordinateType?,fn?){
         if(!coordinateType){
             // 1 84坐标系  2 GCJ02 3 BD09
             coordinateType=1;
         }
-        const result = this.api.coord.pcs2gcs(coordinates,coordinateType,fn)
+        if(!coordinates[2]){
+            coordinates[2] = 0
+        }
+        const result =  await this.api.coord.pcs2gcs(coordinates,coordinateType,fn)
         if(result.resultMessage==="OK"){
             return result.coordinates
         }else{

src/views/base.component.ts

@@ -46,19 +46,13 @@ export default class BaseComponent extends Vue {
             return
         }
         this.player.api.camera.lookAt(
-            13312716.658437,
+            11660869.788125,
-            4098255.982695,
+            3692656.110371,
-            60.714346,
+            194.028672,
             0,
-            -20,
+            -59.638443,
-            -45
+            63.604168
         )
-        // this.player.api.camera.get((res)=>{
-        //   console.log(res)
-        // })
-
-        //  return await this.player.api.tileLayer.focus("48D390964B7F0D37D07DD8A2D5596E64",330,time)
-
     }
 
     // 添加电子围栏 // 安全线  // 实控线 // 规划线
@@ -90,6 +84,152 @@ export default class BaseComponent extends Vue {
         }
     }
 
+    public async addMarker(layer,trackCustom?){
+        if(!layer.ids.length){
+            const options = layer.data.map((item,index)=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    coordinate:item.position,
+                    coordinateType:layer.coordinateType?layer.coordinateType:0,
+                    displayMode:2,
+                    imagePath:layer.url || layer.urls[item.type],
+                    imageSize:[48,48],
+                    // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item),
+                    lineSize:[2,40],
+                    useTextAnimation: false,
+                    lineOffset:[24,0],
+                    autoHeight:true,
+                }
+            })
+            this.player.api.marker.add(options,(data)=>{
+                if(data.resultMessage==="OK"){
+                    if(trackCustom){
+                        this.player.api.marker.setAttachCustomObject(options.map(item=>{
+                            layer.ids.push(item.id);
+                            return{
+                                markerId: item.id, //标注id
+                                objectId: item.id, //自定义对象id
+                                offset: [0, 0, 0] //偏移量
+                            }
+                        }));
+                        // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
+                        //     const position = (await this.player.utils.getLonLat(item.position))[0]
+                        //     const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
+                        //     const newLocation = (await this.player.utils.getPosition(newPosition))[0];
+                        //     if(!newLocation[2]){
+                        //         newLocation[2] = 0
+                        //     }
+                        //     console.log(item.id,item.position,newLocation)
+                        //     return {
+                        //         id:item.id,
+                        //         location:newLocation,
+                        //         "smoothTime": 5
+                        //     }
+                        // }),(data)=>{
+                        //     console.log(data)
+                        // })
+
+                        // this.timerList[layer.value] = setInterval(()=>{
+                        //     this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
+                        //         const position = (await this.player.utils.getLonLat(item.position))[0]
+                        //         const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
+                        //         const newLocation = (await this.player.utils.getPosition(newPosition))[0];
+                        //         if(!newLocation[2]){
+                        //             newLocation[2] = 0
+                        //         }
+                        //         console.log(item.id,item.position,newLocation)
+                        //         return {
+                        //             id:item.id,
+                        //             location:newLocation,
+                        //             "smoothTime": 5
+                        //         }
+                        //     }),(data)=>{
+                        //         console.log(data)
+                        //     })
+                        // },5000)
+                    }else{
+                        layer.ids = options.map(item=>item.id);
+                    }
+                }
+            })
+        }else{
+            if(layer.selected){
+                this.player.api.marker.show(layer.ids)
+                if(trackCustom){
+                    // this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
+                    //     const position = (await this.player.utils.getLonLat(item.position))[0]
+                    //     const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
+                    //     const newLocation = (await this.player.utils.getPosition(newPosition))[0];
+                    //     if(!newLocation[2]){
+                    //         newLocation[2] = 0
+                    //     }
+                    //     return {
+                    //         id:item.id,
+                    //         location:newLocation,
+                    //         "smoothTime": 5
+                    //     }
+                    // }))
+
+                    // this.timerList[layer.value] = setInterval(()=>{
+                    //     this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
+                    //         const position = (await this.player.utils.getLonLat(item.position))[0]
+                    //         const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
+                    //         const newLocation = (await this.player.utils.getPosition(newPosition))[0];
+                    //         if(!newLocation[2]){
+                    //             newLocation[2] = 0
+                    //         }
+                    //         return {
+                    //             id:item.id,
+                    //             location:newLocation,
+                    //             "smoothTime": 5
+                    //         }
+                    //     }))
+                    // },5000)
+                }
+            }else{
+                if(trackCustom){
+                    clearInterval(this.timerList[layer.value]);
+                    this.timerList[layer.value] = null;
+                }
+                this.player.api.marker.hide(layer.ids)
+            }
+        }
+    }
+
+    public addCustom(layer,needMarker?){
+        if(!layer.ids.length){
+            const options = layer.data.map((item,index)=>{
+                return {
+                    id:item.id,
+                    groupId:layer.value,
+                    pakFilePath:this.pakFilePath,
+                    assetPath:layer.assetPath,
+                    location:item.position,
+                    smoothMotion:1,
+                    scale:layer.scale,
+                    rotation:[0,90,0]
+                }
+            })
+            this.player.api.customObject.add(options,(data)=>{
+                if(data.resultMessage==="OK"){
+                    if(needMarker){
+                        this.addMarker(layer,needMarker)
+                    }else{
+                        layer.ids = options.map(item=>item.id)
+                    }
+                }
+            })
+        }else{
+            if(layer.selected){
+                this.player.api.customObject.show(layer.ids)
+            }else{
+                this.player.api.customObject.hide(layer.ids)
+            }
+        }
+
+    }
+
 
     public onFocus(data){
         this.player.api[data.type].focus(data.id)
@@ -105,7 +245,13 @@ export default class BaseComponent extends Vue {
         //
     }
     destroyed(){
-        //
+        this.layerData.forEach(item=>{
+            if(this.timerList[item.value]){
+                clearInterval(this.timerList[item.value]);
+                this.timerList[item.value] = null;
+            }
+
+        })
     }
 
 

src/views/overview.component.html

@@ -1,6 +1,6 @@
 <div class="overview-container">
 
-<!--  <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>-->
+ <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
 
     <div class="bg-box left animate__animated">
         <div class="panel-container">

src/views/overview.component.ts

@@ -34,8 +34,8 @@ export default class OverViewComponent extends BaseComponent {
 
     // 是否隐藏除地图外所有板块
     public hideAllPanel = false;
-    created(){
+    async created(){
-        this.currentLayers = this.getCurrentLayers()
+        // this.currentLayers = this.getCurrentLayers();
     }
     public upDateEventList(){
         const eventList = MockData.getEventList().data
@@ -47,19 +47,6 @@ export default class OverViewComponent extends BaseComponent {
             this.$store.commit("setHiddenDangrousList",res.data)
         })
     }
-    //  获取车辆
-    public getCarList(){
-        this.closeService.getCarList().then((res)=>{
-            this.dataList["car"] = res.data;
-            this.$store.commit("setCarList",res.data)
-        })
-    }//  获取车辆
-    public getPersonList(){
-        this.closeService.getPeopleList().then((res)=>{
-            this.dataList["peo"] = res.data;
-            this.$store.commit("setPeopleList",res.data)
-        })
-    }
     // 地图初始化后
     public getMap(store: any) {
         this.player = store;
@@ -76,15 +63,15 @@ export default class OverViewComponent extends BaseComponent {
     }
 
     public handleChange(data) {
+        console.log(data)
         if(data.GroupID){
-            const currentData = this.dataList[data.GroupID].find(item=>item.id === data.Id);
         }
     }
 
     public navChange(data: string) {
         this.currentNav = data;
-        this.currentLayers = this.getCurrentLayers()
         if(this.player){
+            this.currentLayers = this.getCurrentLayers()
             this.resetMap();
         }
         console.log('当前点击导航', data)
@@ -136,6 +123,9 @@ export default class OverViewComponent extends BaseComponent {
             return
         }
         layer.selected = !layer.selected;
+        if(layer.type === "moveMarker"){
+            this.addMarker(layer,true)
+        }
     }
     //进入自由导览
     showView(){
@@ -167,7 +157,10 @@ export default class OverViewComponent extends BaseComponent {
 
     public getCurrentLayers(){
         const layers =  [] as any;
-         this.layerData.forEach((item:any)=>{
+         this.layerData.forEach(async (item:any)=>{
+            if(!item.data){
+                item.data = (await item.init()).data
+            }
             if(item.pages.includes(this.currentNav)){
                 if(!item.selected){
                     this.toggleLayer(item)
@@ -179,6 +172,7 @@ export default class OverViewComponent extends BaseComponent {
                 }
             }
          })
+         console.log(layers)
         return layers
     }