Skip to content

C
cesium-frame
Commit e03fa3b8 by jlc
Options

update：大批量动目标案例的完善

parent e977ebd3
Showing with 230 additions and 77 deletions
src/examples/movingTarget/movingTargets/movingTargets-function.js
export function addMovingTargets(viewer) {
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接开启');
};
// 定义开始时间
let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间
let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
......@@ -15,82 +11,83 @@ export function addMovingTargets(viewer) {
viewer.timeline.zoomTo(start, stop); // 时间轴绑定到viewer上去
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环执行，到达终止时间，重新从起点时间开始
let modelArr = [];
let pendingUpdates = {};
// 模型的路径数据
var data = [];
data[0] = [
{ longitude:108.95847801120208, latitude:34.21765422118126, height: -3.948, time: 0 },
{ longitude:108.95849254781227, latitude:34.21800309998983, height: -3.839, time: 100 },
{ longitude:108.9594164044393, latitude:34.21802855891169, height: -2.579, time: 200 },
];
data[1] = [
{ longitude:108.95950701639765, latitude:34.217844331494476, height: 60, time: 0 },
{ longitude:108.9595823050117, latitude:34.21968058035922, height: 60, time: 90 },
{ longitude:108.95962187417913, latitude:34.2203211325976, height: 60, time: 110 },
{ longitude:108.95893458332738, latitude:34.22035583250216, height: 60, time: 150 },
{ longitude:108.95890809899528, latitude:34.21925021094963, height: 60, time: 200 },
];
// 创建飞机
function createModel(obj) {
let property = new Cesium.SampledPositionProperty();
property.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
});
let entity = viewer.entities.add({
function computeFlight(source) {
var property = new Cesium.SampledPositionProperty();
for(var i = 0; i < source.length; i++) {
var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate ());
var position =Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].latitude, source[i].height);
property.addSample(time,position);
}
return property;
}
for(var j = 0; j < data.length; j++) {
var property = computeFlight(data[j]);
// 添加模型
if(j == 0){
let entityCar = viewer.entities.add({
id: "entities" + j,
availability: new Cesium.TimeIntervalCollection([ //要添加到集合中的间隔数组
new Cesium.TimeInterval({start: start, stop: stop}),
]),
position: property,
path: {
resolution: 1,
leadTime: 0,
trailTime: 200,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.ORANGE
}),
width: 10
},
orientation: new Cesium.VelocityOrientationProperty(property),
model: {
uri: "https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb",
minimumPixelSize: 60
}
uri:'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/CesiumMilkTruck.glb',
minimumPixelSize: 2,
},
});
entity.attr = {
property: property,
icao: obj.icao
};
return entity;
}
// 获取模型
function getModelById(id) {
if (!id) return null;
let obj = {};
for (let i = 0; i < modelArr.length; i++) {
let item = modelArr[i];
if (id === item.attr.icao) {
obj.index = i;
obj.model = item;
break;
}
}
return obj;
}
// 更新模型位置
function updateModelPosition(icao, position, time) {
let obj = getModelById(icao);
if (obj.model) {
obj.model.attr.property.addSample(time, position);
}
// viewer.trackedEntity = entityCar;
}
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log('Received data:', data);
let item = data; // 单个数据点
let icao = item.icao;
let position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, item.altitude);
let julianDate = Cesium.JulianDate.addSeconds(start, item.time, new Cesium.JulianDate());
// 存储待更新的数据
pendingUpdates[icao] = { position, julianDate };
// 延迟几秒钟再更新位置
setTimeout(() => {
if (pendingUpdates[icao]) {
let obj = getModelById(icao);
if (!obj.model) {
// 如果模型不存在，创建模型
obj.model = createModel(item);
modelArr.push(obj.model);
else if(j == 1) {
let entityAir = viewer.entities.add ({
id:"entities" + j,
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({start: start, stop: stop}),
]),
position: property,
path: {
resolution: 1,
leadTime: 0,
trailTime: 200,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.ORANGE
}),
width: 10
},
orientation: new Cesium.VelocityOrientationProperty(property),
model: {
uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb',
minimumPixelSize: 2,
},
});
viewer.trackedEntity = entityAir;
}
updateModelPosition(icao, pendingUpdates[icao].position, pendingUpdates[icao].julianDate);
delete pendingUpdates[icao];
}
}, 3000); // 延迟3秒钟
};
ws.onclose = function() {
console.log('连接关闭');
};
}
\ No newline at end of file
src/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket-function.js
......@@ -55,3 +55,105 @@ export function addMovingTargetsWebsocket(viewer) {
console.log('连接关闭');
};
}
/**
* export function addMovingTargets(viewer) {
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接开启');
};
let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间
let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
viewer.clock.startTime = start.clone(); // 设置时钟开始时间
viewer.clock.currentTime = start.clone(); // 设置时钟当前时间
viewer.clock.stopTime = stop.clone(); // 设置时钟结束时间
viewer.clock.multiplier = 1; // 设置时间倍数
viewer.timeline.zoomTo(start, stop); // 时间轴绑定到viewer上去
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环执行，到达终止时间，重新从起点时间开始
let modelArr = [];
let pendingUpdates = {};
// 创建飞机
function createModel(obj) {
let property = new Cesium.SampledPositionProperty();
property.setInterpolationOptions({
interpolationDegree: 5,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
});
let entity = viewer.entities.add({
position: property,
orientation: new Cesium.VelocityOrientationProperty(property),
model: {
uri: "https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb",
minimumPixelSize: 60
}
});
entity.attr = {
property: property,
icao: obj.icao
};
return entity;
}
// 获取模型
function getModelById(id) {
if (!id) return null;
let obj = {};
for (let i = 0; i < modelArr.length; i++) {
let item = modelArr[i];
if (id === item.attr.icao) {
obj.index = i;
obj.model = item;
break;
}
}
return obj;
}
// 更新模型位置
function updateModelPosition(icao, position, time) {
let obj = getModelById(icao);
if (obj.model) {
obj.model.attr.property.addSample(time, position);
}
}
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log('Received data:', data);
let item = data; // 单个数据点
let icao = item.icao;
let position = Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, item.altitude);
let julianDate = Cesium.JulianDate.addSeconds(start, item.time, new Cesium.JulianDate());
// 存储待更新的数据
pendingUpdates[icao] = { position, julianDate };
// 延迟几秒钟再更新位置
setTimeout(() => {
if (pendingUpdates[icao]) {
let obj = getModelById(icao);
if (!obj.model) {
// 如果模型不存在，创建模型
obj.model = createModel(item);
modelArr.push(obj.model);
}
updateModelPosition(icao, pendingUpdates[icao].position, pendingUpdates[icao].julianDate);
delete pendingUpdates[icao];
}
}, 3000); // 延迟3秒钟
};
ws.onclose = function() {
console.log('连接关闭');
};
}
*/
\ No newline at end of file
src/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket.vue
......@@ -47,3 +47,56 @@ onMounted(() => {
height: 100vh;
}
</style>
<!--
<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import { addMovingTargets } from './function';
let viewer;
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js';
script.onload = () => {
window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false, // 影像切换
animation: true, //是否显示动画控件
timeline: false, //是否显示时间线控件
infoBox: true, //是否显示点击要素之后显示的信息
geocoder: false, //是否显示地名查找控件
timeline: true, //是否启用时间线控件
fullscreenButton: false,
shouldAnimate: true,
navigationHelpButton: false, //是否显示帮助信息控件
// terrainProvider: Cesium.createWorldTerrain({
// requestWaterMask: true, // required for water effects
// requestVertexNormals: true // required for terrain lighting
// })
})
addMovingTargets(viewer)
};
document.head.appendChild(script);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
});
</script>
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>
-->
\ No newline at end of file
src/views/ElementMap.js
......@@ -50,7 +50,7 @@ export const elementMovingMap = {
},
大批量动目标: {
title: '大批量动目标',
pngUrl: '/src/assets/CoordinateAxis.png'
pngUrl: '/src/assets/MovingTargets.png'
},
大批量动目标websocket: {
title: '大批量动目标websocket',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment