taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

倾斜模型

Browse Source
This commit is contained in:
fengsen
2025-09-12 20:28:12 +08:00
parent c6f38a9593
commit 4dc74dd4bf
4 changed files with 113 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/projectScreen/index.ts
View File

@ -87,4 +87,13 @@ export const setSelect = (data) => {
method: 'post',
data
});
};
// 获取模型列表
export const getModelList = (params) => {
return request({
url: '/yjearth4.0/api/v1/source/list',
method: 'get',
params
});
};

169
src/views/projectLarge/ProjectScreen/components/newmap.vue
View File

@ -1,33 +1,35 @@
<script setup>
import { onMounted, ref, onUnmounted,defineProps} 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 { setSelect, getSelectList, getGps, getModelList } from '@/api/projectScreen/index.ts'
import videoDialog from "./video.vue"
import { getToken } from '@/utils/auth';
import axios from 'axios';
import md5 from 'js-md5';
const defaultExpandedKeys = [1, 2, 3] //默认展开第一级节点
const defaultCheckedKeys = ref([]) //默认选中节点
const data = ref([]);
const deviceId = ref('');
const videoDialogRef = ref(null);
let token = 'Bearer '+ getToken()
let ws = new ReconnectingWebSocket( import.meta.env.VITE_APP_BASE_WS_API + '?Authorization='+token+'&clientid='+import.meta.env.VITE_APP_CLIENT_ID+'&projectId='+'1897160897167638529');
const token = getToken();
let ws = new ReconnectingWebSocket(import.meta.env.VITE_APP_BASE_WS_API + '?Authorization=' + token + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID + '&projectId=' + '1897160897167638529');
// 连接ws
const connectWs = () => {
ws.onopen = (e) => {
// let message ={
// projectId:'1897160897167638529',
// }
// ws.send(JSON.stringify(message));
ws.onmessage = (e) => {
console.log('ws', e);
};
// let message ={
// projectId:'1897160897167638529',
// }
// ws.send(JSON.stringify(message));
ws.onmessage = (e) => {
console.log('ws', e);
};
};
}
const props = defineProps({
isHide:{
type:Boolean,
default:true,
isHide: {
type: Boolean,
default: true,
}
})
console.log('props', props);
@ -38,9 +40,37 @@ const defaultProps = {
}
let entityManager = null;
window.deviceMap = new Map();
window.ModelList = new Map();
let list = ref([]);
// 模型list
let modelList = ref([]);
// 漫游实例
let roamingController = null;
// 获取模型列表
async function getModelListData() {
let res = await axios.post(import.meta.env.VITE_APP_BASE_EARTH_API + '/yjearth4.0/api/v1/user/sign-in',
{ "username": "admin", "password": "3598f66fbc93c0d5abd2dabab9de74cc" }
)
console.log('res', res.data);
if (res.data.code == 0) {
let toekn = res.data.data.token;
console.log('toekn', toekn);
let res1 = await axios({
url: import.meta.env.VITE_APP_BASE_EARTH_API + '/yjearth4.0/api/v1/source/list',
method: 'post',
data: {
data: { "page": 1, "page_size": 10 },
},
headers: {
'token': toekn
}
})
if (res1.data.code == 0) {
modelList.value = res1.data.data.list;
}
}
}
// 获取GPS数据
function getGpsData() {
getGps('1897160897167638529').then(res => {
@ -88,15 +118,15 @@ function renderDevice(item) {
imageHeight: 64,
name: item.label || item.id,
imageUrl: `/image/${item.type}.png`,
onClick: (entity)=>{
entityClickHandler(entity,item);
onClick: (entity) => {
entityClickHandler(entity, item);
}
});
window.deviceMap.set(item.id, imageEntity);
}
// 实体的点击事件
function entityClickHandler(entity,item) {
console.log('entity', entity,item);
function entityClickHandler(entity, item) {
console.log('entity', entity, item);
if (item.type == 'camera') {
deviceId.value = 'AE9470016';
videoDialogRef.value.show();
@ -104,55 +134,46 @@ function entityClickHandler(entity,item) {
}
}
// 初始化地球
function initEarth() {
YJ.on({
ws: true,
host: '', //资源所在服务器地址
username: '', //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
password: '', //密码 生成方式：md5(用户名_密码)
}).then((res) => {
let earth = new YJ.YJEarth("earth");
async function initEarth() {
window.Earth1 = earth;
// 加载底图
// earth.viewer.terrainProvider = Cesium.createWorldTerrain();
// Earth1.viewer
addArcgisLayer(Earth1.viewer, 'img_w')
// 添加倾斜数据
// loadTiltData(Earth1.viewer)
// 获取中心点
YJ.Global.CesiumContainer(window.Earth1, {
compass: false,//罗盘
legend: false, //图例
});
// 创建实体管理器实例
list.value.forEach(item => {
if (defaultCheckedKeys.value.includes(item.id)) {
console.log("defaultCheckedKeys", item.id);
renderDevice(item)
}
});
roamingController = new CesiumFlyToRoamingController(window.Earth1.viewer, {
duration: 5, // 每个点之间飞行5秒
pitch: -89 // 20度俯角
});
window.roamingController = roamingController;
})
}
// 加载倾斜数据
function loadTiltData(viewer) {
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
// url: 'http://192.168.110.2:8895/yjearth4.0/data/pak/e904acb32aaa8b872c64866ebaaaf5e2',
// url:"http://58.17.134.85:7363/yjearth4.0/data/pak/e904acb32aaa8b872c64866ebaaaf5e2"
url: import.meta.env.VITE_EARTH_URL + "/yjearth4.0/data/pak/4eb21d3fc02873092e75640e261544b3"
let earth = new YJ.YJEarth("earth");
window.Earth1 = earth;
// 加载底图
// earth.viewer.terrainProvider = Cesium.createWorldTerrain();
// Earth1.viewer
addArcgisLayer(Earth1.viewer, 'img_w')
// 添加倾斜数据
// 获取中心点
YJ.Global.CesiumContainer(window.Earth1, {
compass: false,//罗盘
legend: false, //图例
});
// 创建实体管理器实例
list.value.forEach(item => {
if (defaultCheckedKeys.value.includes(item.id)) {
console.log("defaultCheckedKeys", item.id);
renderDevice(item)
}
});
roamingController = new CesiumFlyToRoamingController(window.Earth1.viewer, {
duration: 5, // 每个点之间飞行5秒
pitch: -89 // 20度俯角
});
window.roamingController = roamingController;
}
async function loadTiltData(item) {
let tileset = new YJ.Obj.Tileset(window.Earth1, { id: item.source_id });
ModelList.set(item.source_id, tileset);
await tileset.on();
tileset.flyTo();
}
// 获取ArcGIS服务的URL
function getArcGisUrlByType(type) {
switch (type) {
//影像
case "img_w":
return "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
return "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}";
//电子
case "vec_w":
return "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
@ -164,13 +185,13 @@ 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图层
function addArcgisLayer(viewer, type) {
let url = getArcGisUrlByType(type)
const layerProvider = new Cesium.ArcGisMapServerImageryProvider({
const layerProvider = new Cesium.UrlTemplateImageryProvider({
url: url
});
viewer.imageryLayers.addImageryProvider(layerProvider);
@ -197,7 +218,7 @@ function handleCheck(checkedNodes, nodes) {
device[device.entity.show ? 'hide' : 'show']();
}
};
// 处理选中的节点（可能是单个节点或包含子节点的集合）
if (checkedNodes?.children?.length) {
console.log('children', checkedNodes.children);
@ -205,7 +226,7 @@ function handleCheck(checkedNodes, nodes) {
} else {
handleNode(checkedNodes);
}
setCheckedNode(nodes.checkedKeys);
}
// 开始漫游
@ -228,15 +249,26 @@ function stopRoaming() {
console.log('请先初始化地球');
}
}
onMounted(() => {
onMounted(async () => {
// 连接ws
connectWs();
// 获取选中节点
getCheckedNode();
// 获取GPS数据
getGpsData();
// 初始化地球
initEarth();
await getModelListData();
await YJ.on({
username: 'admin',
password: md5('admin_admin123'),
host: 'http://192.168.110.2:8895/'
}).then((res) => {
initEarth();
modelList.value.forEach(item => {
loadTiltData(item)
})
});
});
onUnmounted(() => {
window.deviceMap.forEach((item) => {
@ -250,12 +282,12 @@ onUnmounted(() => {
<template>
<div class="earth-container-big">
<div class="earth" id="earth"></div>
<div v-show="isHide" 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> -->
<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"
@ -300,6 +332,7 @@ onUnmounted(() => {
background-color: transparent;
--el-tree-node-hover-bg-color: transparent;
--el-tree-text-color: #fff;
.el-text {
color: azure;
}