Skip to content

C
cesium-frame
Commit 9d18cfdc by lyc
Options

Merge branch 'develop' of ssh://47.96.160.63:10022/jlc/cesium-frame into develop

parents 2770a838 8e7896da
Showing with 410 additions and 232 deletions
src/assets/RobotArmAnimation.png
src/assets/RobotArmAnimation.png

197 KB | W: | H:

src/assets/RobotArmAnimation.png

812 KB | W: | H:

src/assets/RobotArmAnimation.png
src/assets/RobotArmAnimation.png
src/assets/RobotArmAnimation.png
src/assets/RobotArmAnimation.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/Vehicle.png
src/assets/Vehicle.png

422 KB | W: | H:

src/assets/Vehicle.png

231 KB | W: | H:

src/assets/Vehicle.png
src/assets/Vehicle.png
src/assets/Vehicle.png
src/assets/Vehicle.png
  • 2-up
  • Swipe
  • Onion skin
src/examples/CodeMap.js
......@@ -15,6 +15,7 @@ import vueCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/realTi
import vueCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis.vue?raw'
import vueCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets.vue?raw'
import vueCodeMovingTargetsWebsocket from '@/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket.vue?raw'
import vueCodeClickOnPath from '@/examples/movingTarget/clickOnPath/clickOnPath.vue?raw'
import vueCodeMissileLaunch from '@/examples/movingTarget/missileLaunch/missileLaunch.vue?raw'
import vueCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch.vue?raw'
import vueCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch.vue?raw'
......@@ -80,6 +81,7 @@ const vueCodeMap = {
坐标轴: vueCodeCoordinateAxis,
大批量动目标: vueCodeMovingTargets,
大批量动目标websocket: vueCodeMovingTargetsWebsocket,
点选路径: vueCodeClickOnPath,
导弹发射: vueCodeMissileLaunch,
导弹机动发射: vueCodeMissileMobileLaunch,
火箭发射: vueCodeRocketLaunch,
......
src/examples/FunctionMap.js
......@@ -15,6 +15,7 @@ import functionCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/r
import functionCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis-function.js?raw'
import functionCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets-function.js?raw'
import functionCodeMovingTargetsWebsocket from '@/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket-function.js?raw'
import functionCodeClickOnPath from '@/examples/movingTarget/clickOnPath/clickOnPath-function.js?raw'
import functionCodeMissileLaunch from '@/examples/movingTarget/missileLaunch/missileLaunch-function.js?raw'
import functionCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch-function.js?raw'
import functionCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch-function.js?raw'
......@@ -80,6 +81,7 @@ const functionCodeMap = {
坐标轴: functionCodeCoordinateAxis,
大批量动目标: functionCodeMovingTargets,
大批量动目标websocket: functionCodeMovingTargetsWebsocket,
点选路径: functionCodeClickOnPath,
导弹发射: functionCodeMissileLaunch,
导弹机动发射: functionCodeMissileMobileLaunch,
火箭发射: functionCodeRocketLaunch,
......
src/examples/movingTarget/clickOnPath/clickOnPath-function.js 0 → 100644
export function addClickOnPath(viewer) {
// 存储路径点
const pathPoints = [];
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
// 处理鼠标左键点击事件
handler.setInputAction(function(movement) {
const cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
if (cartesian) {
pathPoints.push(cartesian);
viewer.entities.add({
point: {
pixelSize: 10,
color: Cesium.Color.RED,
position: cartesian
}
});
// 如果路径点数量大于1，绘制路径线
if (pathPoints.length > 1) {
const linePositions = pathPoints.slice(-2); // 获取最后两个点
viewer.entities.add({
polyline: {
positions: linePositions,
width: 2,
material: Cesium.Color.YELLOW
}
});
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 处理鼠标右键点击事件，开始动画
handler.setInputAction(function() {
if (pathPoints.length < 2) {
alert('至少绘制两个点');
return;
}
// 创建一个动态模型
const modelEntity = viewer.entities.add({
model: {
uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb',
scale: 100,
minimumPixelSize: 128,
},
position: new Cesium.CallbackProperty(function(time, result) {
const t = (time.secondsOfDay % 20) / 20; // 20秒完成一个循环
const index = Math.floor(t * (pathPoints.length - 1));
const start = pathPoints[index];
const end = pathPoints[index + 1];
const fraction = (t * (pathPoints.length - 1)) % 1;
return Cesium.Cartesian3.lerp(start, end, fraction, result);
}, false),
orientation: new Cesium.VelocityOrientationProperty(new Cesium.CallbackProperty(function(time, result) {
const t = (time.secondsOfDay % 20) / 20; // 20秒完成一个循环
const index = Math.floor(t * (pathPoints.length - 1));
const start = pathPoints[index];
const end = pathPoints[index + 1];
const fraction = (t * (pathPoints.length - 1)) % 1;
return Cesium.Cartesian3.lerp(start, end, fraction, result);
}, false))
});
// 开始动画
viewer.clock.shouldAnimate = true;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
\ No newline at end of file
src/examples/movingTarget/clickOnPath/clickOnPath.vue 0 → 100644
<template>
<div id="cesiumContainer" class="cesium-container"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import { addClickOnPath } 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 window.Cesium.Viewer('cesiumContainer', {
infoBox: false,
// shouldAnimate: true
});
addClickOnPath(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/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秒
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; // 循环执行，到达终止时间，重新从起点时间开始
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; // 循环执行，到达终止时间，重新从起点时间开始
// 模型的路径数据
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 },
];
let modelArr = [];
let pendingUpdates = {};
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;
}
// 创建飞机
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;
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/CesiumMilkTruck.glb',
minimumPixelSize: 2,
},
});
// viewer.trackedEntity = entityCar;
}
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;
}
// 获取模型
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-function.js
export function addMovingTargetsWebsocket(viewer) {
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接开启');
};
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接开启');
};
let property = new Cesium.SampledPositionProperty();
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秒
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; // 循环执行，到达终止时间，重新从起点时间开始
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({
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: start,
stop: stop
})]),
position: property,
orientation: new Cesium.VelocityOrientationProperty(property), // 根据速度计算方向角
model: {
uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/ship.glb', //gltf文件的URL
scale: 0.05, // 放大倍数
silhouetteColor: Cesium.Color.fromCssColorString('rgba(0, 255, 0, 1)'), // 船模型边框颜色
silhouetteSize: 1, // 船模型边框宽度
minimumPixelSize: 128
},
path: { // 船路径
resolution: 1, // 这个不知道是啥
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1, // 颜色透明度
color: Cesium.Color.fromCssColorString('rgba(0, 253, 239, 0.5)') // 路线颜色
}),
width: 2 // 路线的显示宽度
}
position: property,
orientation: new Cesium.VelocityOrientationProperty(property),
model: {
uri: "https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb",
minimumPixelSize: 60
},
path: {
resolution: 1,
leadTime: 0,
trailTime: 200,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.ORANGE
}),
width: 10
}
});
viewer.trackedEntity = entity; // 视角跟随模型
entity.attr = {
property: property,
icao: obj.icao
};
return entity;
}
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log('Received data:', data);
// 获取模型
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;
}
// 更新位置属性
let time = Cesium.JulianDate.addSeconds(start, data.time, new Cesium.JulianDate());
let position = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.height);
property.addSample(time, position);
};
// 更新模型位置
function updateModelPosition(icao, position, time) {
let obj = getModelById(icao);
if (obj.model) {
obj.model.attr.property.addSample(time, position);
}
}
ws.onclose = function() {
console.log('连接关闭');
};
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
......@@ -18,16 +18,12 @@ onMounted(() => {
baseLayerPicker: false, // 影像切换
animation: true, //是否显示动画控件
timeline: false, //是否显示时间线控件
infoBox: 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
})
})
addMovingTargetsWebsocket(viewer)
......
src/examples/movingTarget/robotArmAnimation/robotArmAnimation-function.js
export function addRobotArmAnimation(viewer) {
const czml = [
{
id: "document",
name: "robotArm",
version: "1.0",
clock: {
interval: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
currentTime: "2019-08-28T04:00:00.00Z",
multiplier: 1,
range: "LOOP_STOP",
step: "SYSTEM_CLOCK_MULTIPLIER"
}
id: "document",
name: "CZML Model",
version: "1.0",
clock: {
interval: "2015-01-01T00:00:00Z/2015-01-01T00:00:20Z",
currentTime: "2015-01-01T00:00:00Z",
multiplier: 20,
},
},
{
id: "robotArm",
name: "robotArmAnimation",
description: "<p>this is a ship</p>",
availability: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
position: {
cartographicDegrees: [120, 30, 0]
id: "model",
position: {
cartographicDegrees: [120, 30, 100000],
},
viewFrom: {
cartesian: [4.3, 0.1, 2.6],
},
model: {
gltf: "https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Man.glb",
runAnimations: false,
nodeTransformations: {
Skeleton_arm_joint_L__3_: {
rotation: {
epoch: "2015-01-01T00:00:00Z",
unitQuaternion: [
0,
-0.23381920887303329,
-0.6909886782144156,
-0.0938384854833712,
0.6775378681547408,
10,
-0.4924076887347565,
-0.6304934596091216,
0.20657864059632378,
0.563327551886459,
20,
-0.23381920887303329,
-0.6909886782144156,
-0.0938384854833712,
0.6775378681547408,
],
},
},
Skeleton_arm_joint_R__2_: {
rotation: {
unitQuaternion: [
-0.2840422631464792,
-0.40211904424847345,
0.25175867757399086,
0.7063888981321548,
],
},
},
},
model: {
show: true,
gltf: [
{
interval: "2019-08-28T04:00:00Z/9999-12-31T23:59:59.9999999Z",
uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Station.glb'
}
],
minimumPixelSize: 128,
scale: 1,
runAnimations: true
}
},
},
];
var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
dataSourcePromise.then(function (dataSource) {
dataSourcePromise.then(function(dataSource) {
// 根据模型所在的实体去进行加载
viewer.trackedEntity = dataSource.entities.getById('robotArm');
}).catch(function (error) {
viewer.trackedEntity = dataSource.entities.getById('model');
}).catch(function(error) {
console.error(error);
});
}
src/examples/movingTarget/vehicle/vehicle-function.js
export function addVehicle(viewer) {
const czml = [
{
id: "document",
name: "Vehicle",
version: "1.0",
clock: {
interval: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
currentTime: "2019-08-28T04:00:00.00Z",
multiplier: 1,
range: "LOOP_STOP",
step: "SYSTEM_CLOCK_MULTIPLIER"
}
},
{
id: "path",
name: "path for Vehicle",
description: "<p>this is a description</p>",
availability: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z",
path: {
material: {
polylineOutline: {
color: {
rgba: [255, 0, 255, 255],
},
outlineColor: {
rgba: [0, 255, 255, 255],
},
outlineWidth: 5
},
},
width: 8, // 折线宽度
leadTime: 5,
trailTime: 50000,
resolution: 5,
},
orientation: {
"velocityReference": "#position"
},
model: {
gltf: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/CesiumMilkTruck.glb',
minimumPixelSize: 128,
},
position: {
epoch: "2019-08-28T04:00:00.00Z",
cartographicDegrees: [
0, 120, 30, 0,
1200, 121, 30, 0
]
}
},
// 定义开始时间
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 = 10; // 设置时间倍数
viewer.timeline.zoomTo(start, stop); // 时间轴绑定到viewer上去
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环执行，到达终止时间，重新从起点时间开始
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;
}
let data = [
{ 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 },
];
var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
dataSourcePromise.then(function (dataSource) {
// 根据模型所在的实体去进行加载
viewer.trackedEntity = dataSource.entities.getById('path');
}).catch(function (error) {
console.error(error);
let property = computeFlight(data);
// 添加模型
let entityCar = viewer.entities.add({
id: "car",
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/CesiumMilkTruck.glb',
minimumPixelSize: 2,
}
});
}
viewer.trackedEntity = entityCar; // 视角跟随模型
}
\ No newline at end of file
src/views/ElementMap.js
......@@ -42,7 +42,7 @@ export const elementMovingMap = {
},
实时驱动: {
title: '实时驱动',
pngUrl: '/src/assets/RobotArmAnimation.png'
pngUrl: '/src/assets/RealTimeDriver.png'
},
坐标轴: {
title: '坐标轴',
......@@ -50,11 +50,16 @@ export const elementMovingMap = {
},
大批量动目标: {
title: '大批量动目标',
pngUrl: '/src/assets/CoordinateAxis.png'
pngUrl: '/src/assets/MovingTargets.png'
},
大批量动目标websocket: {
title: '大批量动目标websocket',
pngUrl: '/src/assets/CoordinateAxis.png'
pngUrl: '/src/assets/MovingTargetsWebsocket.png'
},
点选路径: {
title: '点选路径',
pngUrl: '/src/assets/ClickOnPath.png'
},
导弹发射: {
title: '导弹发射',
......
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