项目级页面添加漫游、摄像头、定位设备、无人机、摄像头视频播放

This commit is contained in:
2025-09-09 21:52:59 +08:00
parent 35a7825759
commit d5cf2a600e
7 changed files with 180 additions and 47 deletions

View File

@ -1,11 +1,22 @@
<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { onMounted, ref, onUnmounted,defineProps} from 'vue';
import CesiumImageLabelEntity from '../js/CesiumImageLabelEntity.js';
import CesiumFlyToRoamingController from '../js/CesiumFlyToRoamingController.js';
import { setSelect, getSelectList, getGps } from '@/api/projectScreen/index.ts'
import videoDialog from "./video.vue"
const defaultExpandedKeys = [1, 2, 3] //默认展开第一级节点
const defaultCheckedKeys = ref([]) //默认选中节点
const data = ref([]);
const deviceId = ref('');
const videoDialogRef = ref(null);
const props = defineProps({
isHide:{
type:Boolean,
default:true,
}
})
console.log('props', props);
const defaultProps = {
children: 'children',
label: 'label',
@ -58,15 +69,24 @@ function renderDevice(item) {
lat: Number(item.lat),
height: 0
},
imageWidth: 64,
imageHeight: 64,
name: item.label || item.id,
imageUrl: "/assets/demo/avatar.png",
onClick: entityClickHandler
imageUrl: `/image/${item.type}.png`,
onClick: (entity)=>{
entityClickHandler(entity,item);
}
});
window.deviceMap.set(item.id, imageEntity);
}
// 实体的点击事件
function entityClickHandler(entity) {
console.log('entity', entity);
function entityClickHandler(entity,item) {
console.log('entity', entity,item);
if (item.type == 'camera') {
deviceId.value = 'AE9470016';
videoDialogRef.value.show();
videoDialogRef.value.videoPlay(deviceId.value);
}
}
// 初始化地球
function initEarth() {
@ -111,11 +131,6 @@ function loadTiltData(viewer) {
// url:"http://58.17.134.85:7363/yjearth4.0/data/pak/e904acb32aaa8b872c64866ebaaaf5e2"
url: import.meta.env.VITE_EARTH_URL + "/yjearth4.0/data/pak/4eb21d3fc02873092e75640e261544b3"
});
// var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
// // url: 'http://58.17.134.85:7363/zm/api/v1/data/tileset/b15be28d053fcdd98308bed74c6108e6/tileset.json',
// url:'http://58.17.134.85:7363/yjearth4.0/data/tileset/9c25649daa610a0cfb89e2cbea74bc55/tileset.json'
// }));
// console.log("加载倾斜数据:", tileset);
}
// 获取ArcGIS服务的URL
function getArcGisUrlByType(type) {
@ -134,7 +149,7 @@ function getArcGisUrlByType(type) {
return "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer";
//暖色底图
case "vec_warm":
return "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer";
return "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer";
}
}
// 添加ArcGIS图层
@ -218,17 +233,18 @@ onUnmounted(() => {
<template>
<div class="earth-container-big">
<div class="earth" id="earth"></div>
<div class="left">
<div v-show="isHide" class="left">
<div style="width: 100%;height: 100%;">
<el-button type="primary" @click="startRoaming">开始漫游</el-button>
<el-button type="primary" @click="stopRoaming">停止漫游</el-button>
</div>
</div>
<div class="right">
<div v-show="isHide" class="right">
<el-tree show-checkbox :data="data" :props="defaultProps" node-key="id" :expand-on-click-node="false"
:check-on-click-node="false" :check-on-click-leaf="false" :default-expanded-keys="defaultExpandedKeys"
:default-checked-keys="defaultCheckedKeys" @check="handleCheck" @node-click="handleNodeClick" />
</div>
<videoDialog :data="deviceId" ref="videoDialogRef"></videoDialog>
</div>
</template>
<style lang="scss">
@ -255,7 +271,7 @@ onUnmounted(() => {
.right,
.left {
position: absolute;
width: 200px;
width: 400px;
height: 100%;
transform: translateY(-50%);
background-color: #00000052;