2025-03-11 08:25:45 +00:00
|
|
|
|
<!--********************************************************************
|
|
|
|
|
|
* by jiawanlong
|
|
|
|
|
|
*********************************************************************-->
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
2025-03-19 03:00:22 +00:00
|
|
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css" />
|
|
|
|
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
2025-03-11 08:25:45 +00:00
|
|
|
|
<script src="./turf.min.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">
|
|
|
|
|
|
Cesium.Ion.defaultAccessToken =
|
2025-06-07 11:30:00 +00:00
|
|
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjBhMzcxMC0wNjBiLTRmYjItYjY1MC0wMzAwMzMyMGUyMmEiLCJpZCI6MzAzNzc3LCJpYXQiOjE3NDc2Mzk0NTV9.E_90aKtVdzRGlU2z48VwJ4mWvl-uuDkfQBCOO6zbzn4";
|
2025-03-11 08:25:45 +00:00
|
|
|
|
const viewer = new Cesium.Viewer("map");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
viewer.camera.flyTo({
|
|
|
|
|
|
destination: new Cesium.Cartesian3(-930635.3822360804, -5464034.592507356, 3161315.472199566),
|
|
|
|
|
|
orientation: {
|
|
|
|
|
|
heading: 6.126725323385694, // east, default value is 0.0 (north)
|
|
|
|
|
|
pitch: -0.22764983413485584, // default value (looking down)
|
|
|
|
|
|
roll: 6.28290552999833 // default value
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
minx: -100,
|
|
|
|
|
|
miny: 30,
|
|
|
|
|
|
maxx: -99.5,
|
|
|
|
|
|
maxy: 30.5,
|
|
|
|
|
|
dx: 15, // 雨滴宽度
|
|
|
|
|
|
ds: 5000, // 雨滴数量
|
|
|
|
|
|
sd: 50, // 雨滴下落速度
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 创建一个 BillboardCollection 来存储所有的雨滴
|
|
|
|
|
|
let billboardCollection = viewer.scene.primitives.add(new Cesium.BillboardCollection());
|
|
|
|
|
|
let rainDrops = [];
|
|
|
|
|
|
|
|
|
|
|
|
// 添加雨滴并开始更新
|
|
|
|
|
|
addRain();
|
|
|
|
|
|
|
|
|
|
|
|
function addRain() {
|
|
|
|
|
|
// 通过 Turf 生成随机的雨滴位置
|
|
|
|
|
|
let points = turf.randomPoint(obj.ds, { bbox: [obj.minx, obj.miny, obj.maxx, obj.maxy] });
|
|
|
|
|
|
points.features.forEach((feature) => {
|
|
|
|
|
|
let cor = feature.geometry.coordinates;
|
|
|
|
|
|
let billboard = billboardCollection.add({
|
|
|
|
|
|
scaleByDistance: new Cesium.NearFarScalar(2000000, 0.8, 8000000, 0.3),
|
|
|
|
|
|
position: Cesium.Cartesian3.fromDegrees(cor[0], cor[1], getRandomHeight()),
|
|
|
|
|
|
image: './yd.jpg',
|
|
|
|
|
|
width: obj.dx,
|
|
|
|
|
|
height: obj.dx,
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
rainDrops.push(billboard);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 使用请求动画帧来优化性能
|
|
|
|
|
|
viewer.scene.postRender.addEventListener(updateRainPositions);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 获取一个随机的雨滴高度
|
|
|
|
|
|
function getRandomHeight() {
|
|
|
|
|
|
return Math.floor(Math.random() * (10000 - 1000 + 1)) + 1000;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 更新所有雨滴的位置
|
|
|
|
|
|
function updateRainPositions() {
|
|
|
|
|
|
rainDrops.forEach(billboard => {
|
|
|
|
|
|
updateBillboardPosition(billboard);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 更新雨滴的高度
|
|
|
|
|
|
function updateBillboardPosition(billboard) {
|
|
|
|
|
|
var ellipsoid = viewer.scene.globe.ellipsoid;
|
|
|
|
|
|
var cartographic = ellipsoid.cartesianToCartographic(billboard.position);
|
|
|
|
|
|
var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
|
|
|
var lng = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
|
|
|
var height = cartographic.height;
|
|
|
|
|
|
|
|
|
|
|
|
// 如果高度小于0，则重新设置为随机高度
|
|
|
|
|
|
if (height < 0) {
|
|
|
|
|
|
height = getRandomHeight();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 向下移动雨滴
|
|
|
|
|
|
height -= obj.sd;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 更新雨滴的位置
|
|
|
|
|
|
billboard.position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
