273 lines
8.2 KiB
TypeScript
273 lines
8.2 KiB
TypeScript
import {Component, Vue} from 'vue-property-decorator';
|
|
|
|
import("./overview.component.scss")
|
|
import template from "./overview.component.html"
|
|
import HeaderComponent from "@/components/header.component.vue"
|
|
import MapComponent from "@/components/map.component.vue"
|
|
import {getRandNumBetween} from "@/utils/utils"
|
|
import layerData from "@/mock/layer"
|
|
import boundsData from "@/mock/bounds"
|
|
import ParkFileService from '@/service/park.service';
|
|
import CloseService from '@/service/close.service';
|
|
import * as turf from "@turf/turf"
|
|
import path from '@/mock/path';
|
|
|
|
|
|
|
|
|
|
enum COLOR{
|
|
// 围栏
|
|
BOUNDS="#F669FF",
|
|
// 实控线
|
|
REALLINE="#00C8FF",
|
|
// 规划线
|
|
PLANLINE="#FFA900",
|
|
// 安全线
|
|
SAFELINE="#80ED30",
|
|
// 四色图-绿
|
|
GREEN="#80ED30",
|
|
// 四色图-蓝
|
|
BLUE="#7DAEFF",
|
|
// 四色图-黄
|
|
YELLOW="#FFA900",
|
|
// 四色图-红
|
|
RED="#FF5959"
|
|
}
|
|
@Component({
|
|
template,
|
|
components: {
|
|
MapComponent,
|
|
// MapComponent: () => import("common/map"),
|
|
HeaderComponent,
|
|
|
|
}
|
|
})
|
|
export default class BaseComponent extends Vue {
|
|
public player!: any;
|
|
public layerData = layerData;
|
|
|
|
public lock = true;
|
|
public tourPathData = path;
|
|
|
|
public timerList = {} as any;
|
|
public pakFilePath = "@path:DTS_Library_V5.4.pak";
|
|
public warnAssets = "/JC_CustomAssets/EffectLibrary/Exhibition/Point/Point_Y_2";
|
|
public currentWanning:any = null;
|
|
public currentEvent:any = null;
|
|
|
|
public currentAreaId:any = null;
|
|
|
|
// dataList
|
|
public dataList = {} as any;
|
|
// service
|
|
public parkService = new ParkFileService()
|
|
public closeService = new CloseService()
|
|
|
|
public addWarnning(item){
|
|
if(this.currentWanning){
|
|
this.player.api.customObject.delete(this.currentWanning.id)
|
|
}
|
|
this.currentWanning = {
|
|
id:item.id+"",
|
|
groupId:"warning",
|
|
pakFilePath:this.pakFilePath,
|
|
assetPath:this.warnAssets,
|
|
// coordinateType:1,
|
|
location:[...item.position],
|
|
rotation:[0,90,0]
|
|
|
|
}
|
|
this.player.api.customObject.add(this.currentWanning,()=>{
|
|
this.player.api.customObject.focus(this.currentWanning.id,15,2)
|
|
})
|
|
}
|
|
|
|
|
|
|
|
// 重置视角
|
|
public async resetMap(time:number=1) {
|
|
if(this.lock){
|
|
this.$message.error("视口未加载完成")
|
|
return
|
|
}
|
|
this.player.api.settings.setInteractiveMode(0)
|
|
this.player.api.camera.lookAt(
|
|
11660869.788125,
|
|
3692656.110371,
|
|
194.028672,
|
|
0,
|
|
-59.638443,
|
|
63.604168
|
|
)
|
|
}
|
|
|
|
public addArea(data){
|
|
if(this.currentAreaId){
|
|
this.player.api.polygon3d.delete(this.currentAreaId);
|
|
}
|
|
this.player.api.polygon3d.add({
|
|
id:data.id,
|
|
coordinates:data.area,
|
|
style:1,
|
|
height:20,
|
|
color:data.color,
|
|
generateTop:true,
|
|
},(res)=>{
|
|
this.currentAreaId = data.id;
|
|
this.player.api.polygon3d.focus(data.id,40)
|
|
})
|
|
}
|
|
|
|
// 添加电子围栏 // 安全线 // 实控线 // 规划线
|
|
public async toggleArea(layer){
|
|
if(!layer.ids.length){
|
|
const result = layer.data.map(item=>{
|
|
return {
|
|
id:item.id,
|
|
groupId:layer.value,
|
|
coordinates:item.area,
|
|
height:20,
|
|
color:layer.color,
|
|
style:4,
|
|
generateTop:false,
|
|
generateBottom:false
|
|
}
|
|
});
|
|
this.player.api.polygon3d.add(result,(data)=>{
|
|
if(data.resultMessage==="OK"){
|
|
layer.ids = result.map(item=>item.id)
|
|
}
|
|
})
|
|
}else{
|
|
if(layer.selected){
|
|
this.player.api.polygon3d.show(layer.ids)
|
|
}else{
|
|
this.player.api.polygon3d.hide(layer.ids)
|
|
}
|
|
}
|
|
}
|
|
|
|
public async addMarker(layer,trackCustom?){
|
|
if(!layer.ids.length){
|
|
const options = layer.data.map((item,index)=>{
|
|
const option = {} as any
|
|
if(item.hasPop && !item.model){
|
|
const path = process.env.NODE_ENV === 'production'? process.env.PUB_PATH : '/'
|
|
option.popupURL = "http://192.168.1.66"+path+"#/popup?"+new URLSearchParams(layer.popData)
|
|
}
|
|
return Object.assign(option,{
|
|
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:item.model?[30,30]:[48,48],
|
|
popupSize:[480,388],
|
|
popupOffset:[50,0],
|
|
autoHidePopupWindow:false,
|
|
// popupURL:,
|
|
lineSize:item.hasPop?[0,0]:[2,40],
|
|
useTextAnimation: false,
|
|
lineOffset:item.hasPop?[0,0]:[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)
|
|
});
|
|
}
|
|
layer.ids = options.map(item=>item.id);
|
|
this.player.api.marker.showPopupWindow(layer.ids)
|
|
this.player.api.marker.focus(layer.ids,50,2)
|
|
|
|
}
|
|
})
|
|
}else{
|
|
if(layer.selected){
|
|
this.player.api.marker.showPopupWindow(layer.ids)
|
|
this.player.api.marker.focus(layer.ids,50,2)
|
|
this.player.api.marker.show(layer.ids)
|
|
}else{
|
|
this.player.api.marker.hidePopupWindow(layer.ids)
|
|
this.player.api.marker.hide(layer.ids)
|
|
}
|
|
}
|
|
}
|
|
|
|
public addCustom(layer,needMarker?){
|
|
if(!layer.ids.length){
|
|
const options = layer.data.map((item,index)=>{
|
|
console.log(item)
|
|
return {
|
|
id:item.id,
|
|
groupId:layer.value,
|
|
pakFilePath:this.pakFilePath,
|
|
assetPath:layer.assetPath,
|
|
location:item.position,
|
|
smoothMotion:1,
|
|
scale:layer.scale,
|
|
rotation:item.rotation
|
|
}
|
|
})
|
|
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){
|
|
if(needMarker){
|
|
this.addMarker(layer,needMarker)
|
|
}
|
|
this.player.api.customObject.show(layer.ids)
|
|
}else{
|
|
if(needMarker){
|
|
this.addMarker(layer,needMarker)
|
|
}
|
|
this.player.api.customObject.hide(layer.ids)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
public onFocus(data){
|
|
this.player.api[data.type].focus(data.id)
|
|
}
|
|
|
|
|
|
|
|
// 组件渲染完成
|
|
mounted() {
|
|
//
|
|
}
|
|
beforeDestory(){
|
|
//
|
|
}
|
|
destroyed(){
|
|
this.layerData.forEach(item=>{
|
|
if(this.timerList[item.value]){
|
|
clearInterval(this.timerList[item.value]);
|
|
this.timerList[item.value] = null;
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
|
|
}
|