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 ...@@ -15,6 +15,7 @@ import vueCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/realTi
import vueCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis.vue?raw' import vueCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis.vue?raw'
import vueCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets.vue?raw' import vueCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets.vue?raw'
import vueCodeMovingTargetsWebsocket from '@/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket.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 vueCodeMissileLaunch from '@/examples/movingTarget/missileLaunch/missileLaunch.vue?raw'
import vueCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch.vue?raw' import vueCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch.vue?raw'
import vueCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch.vue?raw' import vueCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch.vue?raw'
...@@ -80,6 +81,7 @@ const vueCodeMap = { ...@@ -80,6 +81,7 @@ const vueCodeMap = {
坐标轴: vueCodeCoordinateAxis, 坐标轴: vueCodeCoordinateAxis,
大批量动目标: vueCodeMovingTargets, 大批量动目标: vueCodeMovingTargets,
大批量动目标websocket: vueCodeMovingTargetsWebsocket, 大批量动目标websocket: vueCodeMovingTargetsWebsocket,
点选路径: vueCodeClickOnPath,
导弹发射: vueCodeMissileLaunch, 导弹发射: vueCodeMissileLaunch,
导弹机动发射: vueCodeMissileMobileLaunch, 导弹机动发射: vueCodeMissileMobileLaunch,
火箭发射: vueCodeRocketLaunch, 火箭发射: vueCodeRocketLaunch,
......
src/examples/FunctionMap.js
...@@ -15,6 +15,7 @@ import functionCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/r ...@@ -15,6 +15,7 @@ import functionCodeRealTimeDriver from '@/examples/movingTarget/realTimeDriver/r
import functionCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis-function.js?raw' import functionCodeCoordinateAxis from '@/examples/movingTarget/coordinateAxis/coordinateAxis-function.js?raw'
import functionCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets-function.js?raw' import functionCodeMovingTargets from '@/examples/movingTarget/movingTargets/movingTargets-function.js?raw'
import functionCodeMovingTargetsWebsocket from '@/examples/movingTarget/movingTargetsWebsocket/movingTargetsWebsocket-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 functionCodeMissileLaunch from '@/examples/movingTarget/missileLaunch/missileLaunch-function.js?raw'
import functionCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch-function.js?raw' import functionCodeMissileMobileLaunch from '@/examples/movingTarget/missileMobileLaunch/missileMobileLaunch-function.js?raw'
import functionCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch-function.js?raw' import functionCodeRocketLaunch from '@/examples/movingTarget/rocketLaunch/rocketLaunch-function.js?raw'
...@@ -80,6 +81,7 @@ const functionCodeMap = { ...@@ -80,6 +81,7 @@ const functionCodeMap = {
坐标轴: functionCodeCoordinateAxis, 坐标轴: functionCodeCoordinateAxis,
大批量动目标: functionCodeMovingTargets, 大批量动目标: functionCodeMovingTargets,
大批量动目标websocket: functionCodeMovingTargetsWebsocket, 大批量动目标websocket: functionCodeMovingTargetsWebsocket,
点选路径: functionCodeClickOnPath,
导弹发射: functionCodeMissileLaunch, 导弹发射: functionCodeMissileLaunch,
导弹机动发射: functionCodeMissileMobileLaunch, 导弹机动发射: functionCodeMissileMobileLaunch,
火箭发射: functionCodeRocketLaunch, 火箭发射: 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) { export function addMovingTargets(viewer) {
const ws = new WebSocket('ws://localhost:8080'); // 定义开始时间
ws.onopen = function() { let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
console.log('连接开启'); 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()); // 设置时间轴当前时间为开始时间 viewer.clock.startTime = start.clone(); // 设置时钟开始时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间 viewer.clock.currentTime = start.clone(); // 设置时钟当前时间
let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒 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(); // 设置时钟当前时间 var data = [];
viewer.clock.stopTime = stop.clone(); // 设置时钟结束时间 data[0] = [
viewer.clock.multiplier = 1; // 设置时间倍数 { longitude:108.95847801120208, latitude:34.21765422118126, height: -3.948, time: 0 },
viewer.timeline.zoomTo(start, stop); // 时间轴绑定到viewer上去 { longitude:108.95849254781227, latitude:34.21800309998983, height: -3.839, time: 100 },
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环执行，到达终止时间，重新从起点时间开始 { 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 = []; function computeFlight(source) {
let pendingUpdates = {}; 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++) {
function createModel(obj) { var property = computeFlight(data[j]);
let property = new Cesium.SampledPositionProperty(); // 添加模型
property.setInterpolationOptions({ if(j == 0){
interpolationDegree: 5, let entityCar = viewer.entities.add({
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, id: "entities" + j,
}); availability: new Cesium.TimeIntervalCollection([ //要添加到集合中的间隔数组
let entity = viewer.entities.add({ new Cesium.TimeInterval({start: start, stop: stop}),
position: property, ]),
orientation: new Cesium.VelocityOrientationProperty(property), position: property,
model: { path: {
uri: "https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb", resolution: 1,
minimumPixelSize: 60 leadTime: 0,
} trailTime: 200,
}); material: new Cesium.PolylineGlowMaterialProperty({
entity.attr = { glowPower: 0.1,
property: property, color: Cesium.Color.ORANGE
icao: obj.icao }),
}; width: 10
return entity; },
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) { export function addMovingTargetsWebsocket(viewer) {
const ws = new WebSocket('ws://localhost:8080'); const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() { ws.onopen = function() {
console.log('连接开启'); console.log('连接开启');
}; };
let property = new Cesium.SampledPositionProperty(); let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间 start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间 let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
viewer.clock.startTime = start.clone(); // 设置时钟开始时间 viewer.clock.startTime = start.clone(); // 设置时钟开始时间
viewer.clock.currentTime = start.clone(); // 设置时钟当前时间 viewer.clock.currentTime = start.clone(); // 设置时钟当前时间
viewer.clock.stopTime = stop.clone(); // 设置时钟结束时间 viewer.clock.stopTime = stop.clone(); // 设置时钟结束时间
viewer.clock.multiplier = 1; // 设置时间倍数 viewer.clock.multiplier = 1; // 设置时间倍数
viewer.timeline.zoomTo(start, stop); // 时间轴绑定到viewer上去 viewer.timeline.zoomTo(start, stop); // 时间轴绑定到viewer上去
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环执行，到达终止时间，重新从起点时间开始 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({ let entity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ position: property,
start: start, orientation: new Cesium.VelocityOrientationProperty(property),
stop: stop model: {
})]), uri: "https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/Cesium_Air.glb",
position: property, minimumPixelSize: 60
orientation: new Cesium.VelocityOrientationProperty(property), // 根据速度计算方向角 },
model: { path: {
uri: 'https://raw.githubusercontent.com/jinlinchao123/Cesium-assets/main/3Dmodel/ship.glb', //gltf文件的URL resolution: 1,
scale: 0.05, // 放大倍数 leadTime: 0,
silhouetteColor: Cesium.Color.fromCssColorString('rgba(0, 255, 0, 1)'), // 船模型边框颜色 trailTime: 200,
silhouetteSize: 1, // 船模型边框宽度 material: new Cesium.PolylineGlowMaterialProperty({
minimumPixelSize: 128 glowPower: 0.1,
}, color: Cesium.Color.ORANGE
path: { // 船路径 }),
resolution: 1, // 这个不知道是啥 width: 10
material: new Cesium.PolylineGlowMaterialProperty({ }
glowPower: 0.1, // 颜色透明度
color: Cesium.Color.fromCssColorString('rgba(0, 253, 239, 0.5)') // 路线颜色
}),
width: 2 // 路线的显示宽度
}
}); });
viewer.trackedEntity = entity; // 视角跟随模型 entity.attr = {
property: property,
icao: obj.icao
};
return entity;
}
ws.onmessage = function(event) { // 获取模型
const data = JSON.parse(event.data); function getModelById(id) {
console.log('Received data:', data); 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()); function updateModelPosition(icao, position, time) {
let position = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.height); let obj = getModelById(icao);
property.addSample(time, position); if (obj.model) {
}; obj.model.attr.property.addSample(time, position);
}
}
ws.onclose = function() { ws.onmessage = function(event) {
console.log('连接关闭'); 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(() => { ...@@ -18,16 +18,12 @@ onMounted(() => {
baseLayerPicker: false, // 影像切换 baseLayerPicker: false, // 影像切换
animation: true, //是否显示动画控件 animation: true, //是否显示动画控件
timeline: false, //是否显示时间线控件 timeline: false, //是否显示时间线控件
infoBox: false, //是否显示点击要素之后显示的信息 infoBox: true, //是否显示点击要素之后显示的信息
geocoder: false, //是否显示地名查找控件 geocoder: false, //是否显示地名查找控件
timeline: true, //是否启用时间线控件 timeline: true, //是否启用时间线控件
fullscreenButton: false, fullscreenButton: false,
shouldAnimate: true, shouldAnimate: true,
navigationHelpButton: false, //是否显示帮助信息控件 navigationHelpButton: false, //是否显示帮助信息控件
terrainProvider: Cesium.createWorldTerrain({
requestWaterMask: true, // required for water effects
requestVertexNormals: true // required for terrain lighting
})
}) })
addMovingTargetsWebsocket(viewer) addMovingTargetsWebsocket(viewer)
......
src/examples/movingTarget/robotArmAnimation/robotArmAnimation-function.js
export function addRobotArmAnimation(viewer) { export function addRobotArmAnimation(viewer) {
const czml = [ const czml = [
{ {
id: "document", id: "document",
name: "robotArm", name: "CZML Model",
version: "1.0", version: "1.0",
clock: { clock: {
interval: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z", interval: "2015-01-01T00:00:00Z/2015-01-01T00:00:20Z",
currentTime: "2019-08-28T04:00:00.00Z", currentTime: "2015-01-01T00:00:00Z",
multiplier: 1, multiplier: 20,
range: "LOOP_STOP", },
step: "SYSTEM_CLOCK_MULTIPLIER"
}
}, },
{ {
id: "robotArm", id: "model",
name: "robotArmAnimation", position: {
description: "<p>this is a ship</p>", cartographicDegrees: [120, 30, 100000],
availability: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z", },
position: { viewFrom: {
cartographicDegrees: [120, 30, 0] 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)); var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
dataSourcePromise.then(function (dataSource) { dataSourcePromise.then(function(dataSource) {
// 根据模型所在的实体去进行加载 // 根据模型所在的实体去进行加载
viewer.trackedEntity = dataSource.entities.getById('robotArm'); viewer.trackedEntity = dataSource.entities.getById('model');
}).catch(function (error) { }).catch(function(error) {
console.error(error); console.error(error);
}); });
} }
src/examples/movingTarget/vehicle/vehicle-function.js
export function addVehicle(viewer) { export function addVehicle(viewer) {
const czml = [ // 定义开始时间
{ let start = Cesium.JulianDate.fromDate(new Date()); // 设置时间轴当前时间为开始时间
id: "document", start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate()); // 开始时间加8小时改为北京时间
name: "Vehicle", let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()); // 设置结束时间为开始时间加400秒
version: "1.0",
clock: { viewer.clock.startTime = start.clone(); // 设置时钟开始时间
interval: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z", viewer.clock.currentTime = start.clone(); // 设置时钟当前时间
currentTime: "2019-08-28T04:00:00.00Z", viewer.clock.stopTime = stop.clone(); // 设置时钟结束时间
multiplier: 1, viewer.clock.multiplier = 10; // 设置时间倍数
range: "LOOP_STOP", viewer.timeline.zoomTo(start, stop); // 时间轴绑定到viewer上去
step: "SYSTEM_CLOCK_MULTIPLIER" viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环执行，到达终止时间，重新从起点时间开始
}
}, function computeFlight(source) {
{ var property = new Cesium.SampledPositionProperty();
id: "path", for(var i = 0; i < source.length; i++) {
name: "path for Vehicle", var time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate ());
description: "<p>this is a description</p>", var position =Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].latitude, source[i].height);
availability: "2019-08-28T04:00:00Z/2019-08-28T04:20:00Z", property.addSample(time,position);
path: { }
material: { return property;
polylineOutline: { }
color: {
rgba: [255, 0, 255, 255], let data = [
}, { longitude:108.95847801120208, latitude:34.21765422118126, height: -3.948, time: 0 },
outlineColor: { { longitude:108.95849254781227, latitude:34.21800309998983, height: -3.839, time: 100 },
rgba: [0, 255, 255, 255], { longitude:108.9594164044393, latitude:34.21802855891169, height: -2.579, time: 200 },
},
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
]
}
},
]; ];
var dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)); let property = computeFlight(data);
dataSourcePromise.then(function (dataSource) { // 添加模型
// 根据模型所在的实体去进行加载 let entityCar = viewer.entities.add({
viewer.trackedEntity = dataSource.entities.getById('path'); id: "car",
}).catch(function (error) { availability: new Cesium.TimeIntervalCollection([ //要添加到集合中的间隔数组
console.error(error); 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 = { ...@@ -42,7 +42,7 @@ export const elementMovingMap = {
}, },
实时驱动: { 实时驱动: {
title: '实时驱动', title: '实时驱动',
pngUrl: '/src/assets/RobotArmAnimation.png' pngUrl: '/src/assets/RealTimeDriver.png'
}, },
坐标轴: { 坐标轴: {
title: '坐标轴', title: '坐标轴',
...@@ -50,11 +50,16 @@ export const elementMovingMap = { ...@@ -50,11 +50,16 @@ export const elementMovingMap = {
}, },
大批量动目标: { 大批量动目标: {
title: '大批量动目标', title: '大批量动目标',
pngUrl: '/src/assets/CoordinateAxis.png' pngUrl: '/src/assets/MovingTargets.png'
}, },
大批量动目标websocket: { 大批量动目标websocket: {
title: '大批量动目标websocket', title: '大批量动目标websocket',
pngUrl: '/src/assets/CoordinateAxis.png' pngUrl: '/src/assets/MovingTargetsWebsocket.png'
},
点选路径: {
title: '点选路径',
pngUrl: '/src/assets/ClickOnPath.png'
}, },
导弹发射: { 导弹发射: {
title: '导弹发射', 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