viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false,
homeButton: false,
imageryProvider: arcgis_layer, //底图
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
shouldAnimate: true,
terrainProvider: terrainProvider,
vrButton: false,
infoBox: true,
selectionIndicator: false,
orderIndependentTranslucency: false,
contextOptions: {
},
requestRenderMode: false,
});
viewer.scene.globe.enableLighting = true;
let geojson = await funjosnS('43060030017-A4');
// 水库
await drainageDasin(viewer,geojson[1])
// 上游河流
await UpstreamRivers(viewer,geojson[0])
// 下游河流
//调用方式以及要传入的链接
await btnRivers(viewer,geojson[2],'http://111.22.69.99:58080/cesium/Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',1)
// 下游河流面
await btnDasin(viewer,geojson[3])
//函数抛出
export const btnRivers =async (viewer: any, e: string,url:any,num=0) => {
var scene = viewer.scene;
Cesium.GeoJsonDataSource.load(e).then((dataSource:any) =>{
dataSource.entities.values.forEach(async (entity: any) => {
if (entity.polygon) { // 面
entity.polygon.material = '/public/app1.jpg';
entity.polygon.clampToGround = true; // 使面实体贴地
} if (entity.polyline) {//线
entity.polyline.width = 6;
entity.polyline.material = '/public/app.png';
entity.polyline.clampToGround = true; // 使面实体贴地
// 获取线的坐标位置
if(num != 0){
await updatePositionFun(viewer,entity,url,scene)
}
}
});
viewer.dataSources.add(dataSource);
})
.catch(() => {
});
}
// 移动动画3D模型
const updatePositionFun =async (viewer: any, entity: any,url:any,scene)=>{
const positions = entity.polyline.positions.getValue(Cesium.JulianDate.now());
// 创建模型矩阵
let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positions[0]);
const model = await Cesium.Model.fromGltfAsync({
url: url,
modelMatrix: modelMatrix,
scale: 50,
incrementallyLoadTextures: true, // 加载模型后的纹理是否可以继续流入
runAnimations: true, // 指定是否应运行 glTF 动画
clampAnimations: true, // 指定 glTF 动画是否应在不带关键帧的持续时间内保持最后一个姿势
shadows: Cesium.ShadowMode.ENABLED, // 指定模型是否 投射或接收来自光源的阴影
heightReference: Cesium.HeightReference.NONE, // 表示相对于地形的位置。NONE表示绝对位置
color: Cesium.Color.RED, // 与模型的渲染颜色混合的颜色
colorBlendMode: Cesium.ColorBlendMode.MIX, // 颜色混合模式,HIGHLIGHT、MIX、REPLACE
colorBlendAmount: 0.3, // colorBlendMode是MIX时有效,控制颜色混入的程度
silhouetteColor: Cesium.Color.WHITE.withAlpha(0.5), // 白色线框,模型边框的颜色
silhouetteSize: 5 // 模型边框大小
});
scene.primitives.add(model);
// 计算运动的总时间和速度
const totalDuration = 60; // 秒
const startTime = performance.now();
// 声明普通函数 updatePosition
const updatePosition=()=>{
const currentTime = performance.now();
const elapsedTime = (currentTime - startTime) / 1000; // 转换为秒
const t = elapsedTime / totalDuration;
if (t >= 1.0) {
// 如果时间超过总时长,将模型移动到终点
modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positions[positions.length - 1]);
model.modelMatrix = modelMatrix;
} else {
// 计算当前比例
const totalLength = positions.length;
const index = Math.floor(t * (totalLength - 1));
const nextIndex = Math.min(index + 1, totalLength - 1);
const segmentT = (t * (totalLength - 1)) - index;
// 线性插值计算当前位置
const currentCartesian = Cesium.Cartesian3.lerp(
positions[index],
positions[nextIndex],
segmentT,
new Cesium.Cartesian3()
);
// 计算方向向量,保持Z轴不变
const direction = Cesium.Cartesian3.subtract(
positions[nextIndex],
positions[index],
new Cesium.Cartesian3()
);
direction.z = 0; // 保持Z轴不变
Cesium.Cartesian3.normalize(direction, direction);
// 计算模型的朝向
const up = Cesium.Cartesian3.UNIT_Z;
const right = Cesium.Cartesian3.cross(direction, up, new Cesium.Cartesian3());
Cesium.Cartesian3.normalize(right, right);
const adjustedUp = Cesium.Cartesian3.cross(right, direction, new Cesium.Cartesian3());
// 创建旋转矩阵
const rotationMatrix = new Cesium.Matrix3(
right.x, right.y, right.z,
adjustedUp.x, adjustedUp.y, adjustedUp.z,
-direction.x, -direction.y, -direction.z
);
modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotationMatrix, currentCartesian, new Cesium.Matrix4());
model.modelMatrix = modelMatrix;
requestAnimationFrame(updatePosition);
}
}
// 开始动画
requestAnimationFrame(updatePosition);
}