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

feat:新增自由导览

wuyanfu
吴延福 2023-05-17 16:48:12 +08:00
parent 9a94cd4e0e
commit c9a45ca8f6
3 changed files with 94 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/mock/index.ts
View File

@ -13,7 +13,7 @@ import dangrous from "./dangrous";
export class MockData{ export class MockData{
public static getPeopleList(){ public static getPeopleList(){
const data = [] as any; const data = [] as any;
for(let i=0;i<100;i++){ for(let i=0;i<50;i++){
data.push({ data.push({
id:Mock.mock("@id"), id:Mock.mock("@id"),
name:Mock.mock("@cname"), name:Mock.mock("@cname"),
@ -498,7 +498,7 @@ export class MockData{
const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"]; const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"];
const typeList = ["罐车","挂车","油车"]; const typeList = ["罐车","挂车","油车"];
const data = [] as any; const data = [] as any;
for(let i=0;i<20;i++){ for(let i=0;i<10;i++){
data.push({ data.push({
id:Mock.mock("@id"), id:Mock.mock("@id"),
time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"), time:moment().subtract(Math.floor(Math.random()*30),"minutes").format("YYYY-MM-DD HH:mm:ss"),

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

@ -105,49 +105,48 @@ export default class BaseComponent extends Vue {
this.player.api.marker.add(options,(data)=>{ this.player.api.marker.add(options,(data)=>{
if(data.resultMessage==="OK"){ if(data.resultMessage==="OK"){
if(trackCustom){ if(trackCustom){
this.player.api.marker.setAttachCustomObject(options.map(item=>{ this.player.api.marker.setAttachCustomObject(layer.data.map(item=>{
layer.ids.push(item.id);
return{ return{
markerId: item.id, //标注id markerId: item.id, //标注id
objectId: item.id, //自定义对象id objectId: item.id, //自定义对象id
offset: [0, 0, 0] //偏移量 offset: [0, 0, 0] //偏移量
} }
})); }),(res)=>{
// this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ console.log(res)
// 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 this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
// const newLocation = (await this.player.utils.getPosition(newPosition))[0]; const position = (await this.player.utils.getLonLat(item.position))[0]
// if(!newLocation[2]){ const newPosition = turf.destination(turf.point(position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates
// newLocation[2] = 0 const newLocation = (await this.player.utils.getPosition(newPosition))[0];
// } if(!newLocation[2]){
// console.log(item.id,item.position,newLocation) newLocation[2] = 0
// return { }
// id:item.id, return {
// location:newLocation, id:item.id,
// "smoothTime": 5 location:newLocation,
// } "smoothTime": 5
// }),(data)=>{ }
// console.log(data) }),(data)=>{
// }) console.log(data)
})
// this.timerList[layer.value] = setInterval(()=>{ this.timerList[layer.value] = setInterval(()=>{
// this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
// const position = (await this.player.utils.getLonLat(item.position))[0] 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 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]; const newLocation = (await this.player.utils.getPosition(newPosition))[0];
// if(!newLocation[2]){ if(!newLocation[2]){
// newLocation[2] = 0 newLocation[2] = 0
// } }
// console.log(item.id,item.position,newLocation) return {
// return { id:item.id,
// id:item.id, location:newLocation,
// location:newLocation, "smoothTime": 5
// "smoothTime": 5 }
// } }),(data)=>{
// }),(data)=>{ console.log(data)
// console.log(data) })
// }) },5000)
// },5000)
}else{ }else{
layer.ids = options.map(item=>item.id); layer.ids = options.map(item=>item.id);
} }
@ -157,35 +156,35 @@ export default class BaseComponent extends Vue {
if(layer.selected){ if(layer.selected){
this.player.api.marker.show(layer.ids) this.player.api.marker.show(layer.ids)
if(trackCustom){ if(trackCustom){
// this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
// const position = (await this.player.utils.getLonLat(item.position))[0] 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 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]; const newLocation = (await this.player.utils.getPosition(newPosition))[0];
// if(!newLocation[2]){ if(!newLocation[2]){
// newLocation[2] = 0 newLocation[2] = 0
// } }
// return { return {
// id:item.id, id:item.id,
// location:newLocation, location:newLocation,
// "smoothTime": 5 "smoothTime": 5
// } }
// })) }))
// this.timerList[layer.value] = setInterval(()=>{ this.timerList[layer.value] = setInterval(()=>{
// this.player.api.customObject.moveTo(layer.data.map(async(item)=>{ this.player.api.customObject.moveTo(layer.data.map(async(item)=>{
// const position = (await this.player.utils.getLonLat(item.position))[0] 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 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]; const newLocation = (await this.player.utils.getPosition(newPosition))[0];
// if(!newLocation[2]){ if(!newLocation[2]){
// newLocation[2] = 0 newLocation[2] = 0
// } }
// return { return {
// id:item.id, id:item.id,
// location:newLocation, location:newLocation,
// "smoothTime": 5 "smoothTime": 5
// } }
// })) }))
// },5000) },5000)
} }
}else{ }else{
if(trackCustom){ if(trackCustom){
@ -214,6 +213,7 @@ export default class BaseComponent extends Vue {
this.player.api.customObject.add(options,(data)=>{ this.player.api.customObject.add(options,(data)=>{
if(data.resultMessage==="OK"){ if(data.resultMessage==="OK"){
if(needMarker){ if(needMarker){
console.log(data)
this.addMarker(layer,needMarker) this.addMarker(layer,needMarker)
}else{ }else{
layer.ids = options.map(item=>item.id) layer.ids = options.map(item=>item.id)

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

@ -56,6 +56,7 @@ export default class OverViewComponent extends BaseComponent {
this.player.api.polygon3d.clear(); this.player.api.polygon3d.clear();
this.player.api.marker.clear(); this.player.api.marker.clear();
this.player.api.marker3d.clear(); this.player.api.marker3d.clear();
this.player.api.settings.setInteractiveMode(0);
this.player.api.polyline.clear(); this.player.api.polyline.clear();
this.player.api.heatmap.clear(); this.player.api.heatmap.clear();
this.currentLayers = this.getCurrentLayers(); this.currentLayers = this.getCurrentLayers();
@ -109,8 +110,12 @@ export default class OverViewComponent extends BaseComponent {
} }
public toggleAllPanel(){ 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(){ public toggleHeight(){
@ -124,11 +129,25 @@ export default class OverViewComponent extends BaseComponent {
} }
layer.selected = !layer.selected; layer.selected = !layer.selected;
if(layer.type === "moveMarker"){ if(layer.type === "moveMarker"){
this.addMarker(layer,true) this.addCustom(layer,true)
} }
} }
//进入自由导览 //进入自由导览
showView(){ 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 进入自由导览 //todo 进入自由导览
} }
//展开导览右侧 //展开导览右侧
@ -177,9 +196,11 @@ export default class OverViewComponent extends BaseComponent {
} }
deactivated(){
destroyed() { console.log(123)
}
beforeDestory() {
if (this.player) { if (this.player) {
this.player = null this.player = null
} }