项目级页面添加漫游、摄像头、定位设备、无人机、摄像头视频播放
This commit is contained in:
@ -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;
|
||||
|
Reference in New Issue
Block a user