guangyin
/
hbt-training-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: guangyin:e83e91434742112d7100e93e6a770bdd9104d475
Branches Tags
guangyin:master
guangyin:guangyin
guangyin:wuyanfu
...
compare: guangyin:9a94cd4e0ec51ecabc655654b214c1d3d435ab91
Branches Tags
guangyin:master
guangyin:guangyin
guangyin:wuyanfu

2 Commits
e83e914347 ... 9a94cd4e0e

Author SHA1 Message Date
吴延福 9a94cd4e0e Merge commit 'e83e91434742112d7100e93e6a770bdd9104d475' 2023-05-17 15:52:35 +08:00
吴延福 fb20e164c7 feat:新增地图方法 2023-05-17 15:52:16 +08:00
8 changed files with 212 additions and 71 deletions
Show Stats Expand all files Collapse all files

4
src/components/map.component.vue
View File

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

10
src/mock/index.ts
View File

@ -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

21
src/mock/layer.ts
View File

@ -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"]
}]

30
src/store/index.ts
View File

@ -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){
state.warningList = [...data,...state.warningList];
},
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;
setBoundsData(state,data){
state.boundsData = data;
},
},
actions: {

16
src/utils/player.ts
View File

@ -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)=>{
console.log(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{

170
src/views/base.component.ts
View File

@ -46,19 +46,13 @@ export default class BaseComponent extends Vue {
return
}
this.player.api.camera.lookAt(
13312716.658437,
4098255.982695,
60.714346,
11660869.788125,
3692656.110371,
194.028672,
0,
-20,
-45
-59.638443,
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;
}
})
}

2
src/views/overview.component.html
View File

@ -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">

30
src/views/overview.component.ts
View File

@ -34,8 +34,8 @@ export default class OverViewComponent extends BaseComponent {
// 是否隐藏除地图外所有板块
public hideAllPanel = false;
created(){
this.currentLayers = this.getCurrentLayers()
async created(){
// 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
}