mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<!--********************************************************************
|
||
* 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">
|
||
|
||
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
|
||
}
|
||
});
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |