Merge branch 'master' into guangyin

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

@@ -13,12 +13,15 @@ import dangrous from "./dangrous";
 export class MockData{
     public static getPeopleList(){
         const data = [] as any;
-        for(let i=0;i<100;i++){
+        for(let i=0;i<50;i++){
             data.push({
                 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)")
             })
@@ -495,13 +498,16 @@ export class MockData{
         const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"];
         const typeList = ["罐车","挂车","油车"];
         const data = [] as any;
-        for(let i=0;i<20;i++){
+        for(let i=0;i<10;i++){
             data.push({
                 id:Mock.mock("@id"),
                 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)=>{
-        console.log(data)
+        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(layer.data.map(item=>{
+                            return{
+                                markerId: item.id, //标注id
+                                objectId: item.id, //自定义对象id
+                                offset: [0, 0, 0] //偏移量
+                            }
+                        }),(res)=>{
+                            console.log(res)
+                        });
+                        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
+                            }
+                        }),(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
+                                }
+                                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){
+                        console.log(data)
+                        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

@@ -38,8 +38,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
@@ -51,19 +51,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;
@@ -73,6 +60,7 @@ export default class OverViewComponent extends BaseComponent {
         this.player.api.polygon3d.clear();
         this.player.api.marker.clear();
         this.player.api.marker3d.clear();
+        this.player.api.settings.setInteractiveMode(0);
         this.player.api.polyline.clear();
         this.player.api.heatmap.clear();
         this.currentLayers = this.getCurrentLayers();
@@ -80,15 +68,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)
@@ -126,8 +114,12 @@ export default class OverViewComponent extends BaseComponent {
     }
 
     public toggleAllPanel(){
-        this.hideAllPanel = true;
+        this.hideAllPanel = !this.hideAllPanel;
-        this.drawerChange(false)
+        this.drawerChange(!this.hideAllPanel)
+        if(!this.hideAllPanel){
+
+            this.player.api.settings.setInteractiveMode(0)
+        }
     }
 
     public toggleHeight(){
@@ -140,9 +132,26 @@ export default class OverViewComponent extends BaseComponent {
             return
         }
         layer.selected = !layer.selected;
+        if(layer.type === "moveMarker"){
+            this.addCustom(layer,true)
+        }
     }
     //进入自由导览
     showView(){
+        this.toggleAllPanel();
+        this.player.api.camera.lookAt(
+            11660667.474375,
+            3692632.815,
+            11.3054,
+            0,
+            -0.822798,
+            88.42289,
+            2,
+            ()=>{
+                this.player.api.settings.setInteractiveMode(1);
+                this.player.api.settings.setMainUIVisibility(false)
+        })
+
         //todo 进入自由导览
     }
     //展开导览右侧
@@ -171,7 +180,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)
@@ -183,13 +195,16 @@ export default class OverViewComponent extends BaseComponent {
                 }
             }
          })
+         console.log(layers)
         return layers
     }
 
 
     
-
+    deactivated(){
-    destroyed() {
+        console.log(123)
+    }
+    beforeDestory() {
         if (this.player) {
             this.player = null
         }