2025-06-08 11:30:00 +00:00
|
|
|
|
<!--********************************************************************
|
|
|
|
|
|
* by jiawanlong
|
|
|
|
|
|
*********************************************************************-->
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
|
|
|
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
|
|
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
2025-06-07 11:30:00 +00:00
|
|
|
|
const viewer = new Cesium.Viewer('map', {
|
|
|
|
|
|
imageryProvider: false,
|
|
|
|
|
|
baseLayerPicker: false,
|
|
|
|
|
|
});
|
|
|
|
|
|
var imageryProvider = new Cesium.SingleTileImageryProvider({
|
|
|
|
|
|
"url": "./world_b.jpg",
|
|
|
|
|
|
id: '1'
|
|
|
|
|
|
})
|
|
|
|
|
|
viewer.imageryLayers.addImageryProvider(imageryProvider)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
使用场景总结
|
|
|
|
|
|
|
|
|
|
|
|
场景 描述 示例
|
|
|
|
|
|
动态位置 随时间移动的对象 卫星、飞机、车辆轨迹
|
|
|
|
|
|
动态视觉 改变颜色、大小等 警报闪烁、状态指示器
|
|
|
|
|
|
交互反馈 响应用户操作 点击效果、悬停高亮
|
|
|
|
|
|
数据可视化 实时数据展示 传感器数据、实时监控
|
|
|
|
|
|
复杂动画 物理模拟、高级运动 弹道轨迹、粒子效果
|
|
|
|
|
|
程序化生成 算法生成形状 分形、噪声地形
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟websocket请求数据，实时的改变位置
|
|
|
|
|
|
let x = -120;
|
|
|
|
|
|
let y = 40;
|
|
|
|
|
|
setInterval(function () {
|
|
|
|
|
|
x = x + 0.1;
|
|
|
|
|
|
}, 50);
|
|
|
|
|
|
|
|
|
|
|
|
const movingPoint = viewer.entities.add({
|
|
|
|
|
|
position: new Cesium.CallbackProperty(function (time, result) {
|
|
|
|
|
|
console.log(time);
|
|
|
|
|
|
return Cesium.Cartesian3.fromDegrees(x, y);
|
|
|
|
|
|
}),
|
|
|
|
|
|
point: {
|
|
|
|
|
|
pixelSize: 20,
|
|
|
|
|
|
color: Cesium.Color.YELLOW
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 闪烁效果
|
|
|
|
|
|
let opacity = 1;
|
|
|
|
|
|
let color = new Cesium.CallbackProperty(function (time, result) {
|
|
|
|
|
|
if (opacity > 1 || opacity == 1) {
|
|
|
|
|
|
opacity = 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (opacity < 1) {
|
|
|
|
|
|
opacity += 0.1;
|
|
|
|
|
|
}
|
|
|
|
|
|
return Cesium.Color.fromCssColorString('#FF0000').withAlpha(opacity)
|
|
|
|
|
|
}, false);
|
|
|
|
|
|
const movingPoint2 = viewer.entities.add({
|
|
|
|
|
|
position: Cesium.Cartesian3.fromDegrees(-120, 30),
|
|
|
|
|
|
point: {
|
|
|
|
|
|
pixelSize: 20,
|
|
|
|
|
|
color: color
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2025-06-08 11:30:00 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
